IDE - Sublime Text 3

Sublime Text 3

Sublime Text 공식사이트: https://www.sublimetext.com/
Package Control: https://packagecontrol.io/

다운로드 및 설치:
공식사이트에 들어가서, 다운로드 후 설치한다.

구성:
1. Package Control 설치
- https://packagecontrol.io/installation 로 들어가서, Sublime Text 3 코드를 복사한다.
import urllib.request,os,hashlib; h = '2915d1851351e5ee549c20394736b442' + '8bc59f460fa1548d1514676163dafc88'; pf = 'Package Control.sublime-package'; ipp = sublime.installed_packages_path(); urllib.request.install_opener( urllib.request.build_opener( urllib.request.ProxyHandler()) ); by = urllib.request.urlopen( 'http://packagecontrol.io/' + pf.replace(' ', '%20')).read(); dh = hashlib.sha256(by).hexdigest(); print('Error validating download (got %s instead of %s), please try manual install' % (dh, h)) if dh != h else open(os.path.join( ipp, pf), 'wb' ).write(by)

- Sublime Text 3를 실행후 [Ctrl + `] 눌러 콘솔창을 연다.
- 복사한 코드를 붙여 넣고 enter 후 프로그램을 재 실행한다.
- [Ctrl+Shift+P]를 눌러 설치된 것을 확인한다.

2. Plug-in 설치
- [Ctrl+Shift+P]를 눌러 Command Palette를 열고, 'install'이라고 입력후, 'install Package'를 선택한다.
-[Ctrl+Shift+P]를 다시 누르고 'plug-in 명'을 검색후 선택하면 설치가 된다.

설치한 plug-in
1. Emmet : 코딩할때 기능 추가 해줌 (속도 up)
2. Color Picker: [Ctrl+Shift+C] 누르면 색상 선택해서 번호를 알수 있다.
3. SublimeLinter: 설치후 CSS / JS / Angular.js + Sublime Linter 설치하면, 문법오류(Linting)해줌.
4. SidebarEnhancement : 웹브라우저/local host로 바로 페이지 열수 있음
설치후, 열고 싶은 파일을 선택후 오른쪽 클릭하면, Open in Browser 나옴
local host 위치 지정해주고 싶으면, 오른쪽 클릭 후 Projects > Edit Preview URLs 클릭후
SidebarEnhancements.json 파일에

{

    // 1st Project

    "/프로젝트 위치": {

        "url_testing":"http://localhost/프로젝트명",

        "url_production":"http://www.프로젝트 주소"

    }

     

    // 2nd Project

    "/Users/이름/프로젝트위치/julyee": {

        "url_testing":"http://localhost/julyee",

        "url_production":"http://www.julyee.com"

    }

}

위와 같이 넣어주면 됨

추천 plug-in
SublimeCodeIntel

단축키:
커맨드 팔레트열기 : Ctrl + shift + P

< Editing 단축키 >
1. 한줄 복사하기: Ctrl + Shift + D
2. 한줄 지우기 : Ctrl + X
3. 커서부터 끝까지 지우기 : Ctrl + KK
4. 커서부터 맨 앞까지 지우기: Ctrl + K + backspace
5. 다음줄 추가 : Ctrl + Enter
6. 이전줄 추가 : Ctrl + Shift + Enter
7. 현재 줄에 indent 추가하기 : Ctrl + ]
8. 현재 줄 indent 삭제하기: Ctrl + [

9. 한줄 선택후 줄 위치 변경 : Ctrl + Shift + 위/아래 방향키
10. 현재 줄 맨 뒤에 아래 줄 붙이기: Ctrl + J
11. 한줄 선택: Ctrl + L
12. 한 단어 선택: Ctrl + D
13. 같은 단어 한번에 선택 : Alt + F3

14. 여러줄 한번에 선택하기: Ctrl + 원하는 줄 클릭

주석처리
한줄: Ctlr + /
블록: Ctrl + Shift + /

기타기능:
1. 커서 모양 변경: Insert (Fn+Enter)
   - 커서 모양이 세로에서 가로 모양으로 바꿀수 있다.

2. GoTo 기능:
[Ctrl + p + :라인번호]: 이동하고 싶은 라인으로 바로 이동
[Ctrl + ; ] : 원하는 단어 조회
[Ctrl + r ] : id값 조회

3.Sublime Text 는 기본적으로 vi 단축키가 내장되어있다.
 But! 기본적으로 비활성화가 되어있으므로 활성화 시켜줘야한다.

<활성화 방법>
Preferences -> Settings - User -> Ctrl+F : Vintage -> "Vintage"를 "" 로변경

왼쪽 맨 하단에 Insert Mode 라고 뜨면 활성화 완료
Command 모드: ESC
Edit 모드: i

4. Regular Express 사용해서, 원하는 부분 선택후 바꾸기
Ctrl + H (Replace) 하고, [.*] 버튼을 누른다.
^\n (빈줄을 찾아라) 후 Replace를 빈칸으로 두면, 한줄씩 띄어진 공간이 삭제된다.


indent 사이즈 조절
Preferences -> Setting -User

e.g.
{
    "ignored_packages":
    [
        ""
    ],
    "translate_tabs_to_spaces": true,
    "detect_indentation": false,
    "tab_size": 2
}


프로젝트 폴더 추가:
Project -> Add Folder to Project -> 폴더지정