Blog

sublime-text2 설치 및 셋팅

궁극의 에디터를 찾고있다.

 

내가 원하는 궁극의 에디터란 우선 가벼워야되며 직관적이고 심플한~ ㅋ

반대의 개념을 찾자면 이클립스? 가벼우면서 기능까지 다 바랄 순 없으니까

 

그래서 정말 좋아하는 노트패드++ 가 있는데 맥에서 동일한 개발환경을 셋팅할 수 없다는 단점이 있다.

먼지털 처럼 가볍고 디자인까지 이쁜 무료 에디터인데 참 아쉽다  ㅋ

현재 내가 알기로 맥과 윈도우에서 동일한 개발 환경을 제공하는 에디터는 Aptana, Sublime text  두가지 이다.

그래서 가벼운 노트패드는 잠시 뒤로하고 노트패드 만큼 가볍고 이쁜 Sublime text를 사용해보기로 했다.

Aptana 를 DLSR 정도로치면 Sublime text 는 똑딱이 정도로.. 두개다 자주사용 될 듯싶다.

 

1. 우선 아래링크에서 sublime text2를 다운받고 설치한다.

http://www.sublimetext.com/2

 

2. Package Control 을 설치한다.

Package Control은 필요한 플러그인을 찾아 설치할 수 있게 도와준다.

설치방법은 ctrl+ 을 누르면 하단에 입력할 수 있는 command 창이 나온다.

거기에 아래 텍스트를 긁어서 붙여넣고 엔터를 친다. (완료가되면 sublime text를 껏다킨다. / 3는 https://packagecontrol.io/installation 여기서 3용으로 복사 )

 

3. install package를 설치한다.

다시 시작 후  ctrl + shift + p 를 누르면 plugin을 검색할 수 있는 커맨드 팔래트가뜬다.

우선 install package라고 검색하고 클릭하여 설치를 한다.

그런다음 ctrl + shift + p 를 다시눌러 원하는 플러그인에 해당하는 키워드를 입력해보면 쓸만한 플러그인들이 출력된다.

마찬가지로 선택해서 사용하면된다.

인기있는 플러그인은 아래의 링크에서 찾아볼 수 있다.
https://packagecontrol.io/

 

기본, 추가테마 설정 ( 많이 있지만 Monokai, Spacegray )

기본테마 설정

  • Monokai는 기본테마라 Perferences > color scheme > color scheme-default > 여러 테마중 Monokai

추가테마 설정

  • Spacegray는 커맨드팔래트에서 install package > Spacegray로 검색 해서 theme spacegray설치 후
  • Perferences > color scheme > Theme - Spacegray 에서 선택 ( 3가지 옵션있음 )

에디터 자체테마 변경( soda 테마 )

  • 위의 기본,추가테마 설정은 실제로 코딩하는 영역을 설정하는 것이고  아래의 링크에서 에디터 자체의 테마를 변경할 수 있다. 기존의 탭이 라운드라면 각진탭으로, 사이드바의 폴더가 화살표에 배경이 회색이라면 배경도 블랙에 화살표 폴더를 폴더아이콘으로 변경하는 등의 작업이 가능하다.
  • 패키지컨트롤에서 Theme - soda 설치하거나  Preferences -> Browse Package 폴더에 git clone https://github.com/buymeasoda/soda-theme/ "Theme - Soda" 한다.
  • 그리고 user-setting에서  "theme": "Soda Dark.sublime-theme", "soda_folder_icons":true 추가해주면 된다. 자세한 내용은 아래링크 참조.
  • https://github.com/buymeasoda/soda-theme/

 

유용한 플러그인

  • HTML-CSS-JS Pretty ( node.js 설치필요 )
  • ColorPicker
  • Minifier
  • Emmet ( zen coding )
  • BracketHighlighter
  • AutoPrefixr
  • Nettus + fetch
  • sublime alignment ( = : 기준으로 줘우정렬 )
  • trimmer ( 공백제거 )
  • fetch ( 파일이나 압축파일을.가져와 원하는 폴더에 설치할 수 있는패키지 )
  • docblockr  ( 파일상단에 주석문서 첨부 /** )
  • SublimeCodeIntel  ( 자동완성 )
  • view in browser ( 크롬, 파폭, 익스, 사파리로 열어보기 json파일 수정시 아무 브라우저다 추가가능한 듯, 아래 추가설명  )
  • terminal ( 단축키로 터미널열기,  아래 추가설명 )
view in browser 설치 후 User-setting 에 단축키 수정
[
{ "keys": [ "ctrl+alt+v" ], "command": "view_in_browser" },
{ "keys": [ "ctrl+alt+f" ], "command": "view_in_browser", "args": { "browser": "firefox" } },
{ "keys": [ "ctrl+alt+c" ], "command": "view_in_browser", "args": { "browser": "chrome" } },
{ "keys": [ "ctrl+alt+i" ], "command": "view_in_browser", "args": { "browser": "iexplore" } },
{ "keys": [ "ctrl+alt+a" ], "command": "view_in_browser", "args": { "browser": "safari" } }
]
그리고 안열리는 브라우저 있으면 실제 본인 pc에 설치된 실행파일 경로 수정해주면된다.

{
"posix": {
"linux": {
"firefox": "firefox -new-tab",
"chrome": "google-chrome",
"chrome64": "google-chrome",
"chromium": "chromium"
},
"linux2": {
"firefox": "firefox -new-tab",
"chrome": "google-chrome",
"chrome64": "google-chrome",
"chromium": "chromium"
},
"darwin": {
"firefox": "open -a \"/Applications/Firefox.app\"",
"safari": "open -a \"/Applications/Safari.app\"",
"chrome": "open -a \"/Applications/Google Chrome.app\"",
"chrome64": "open -a \"/Applications/Google Chrome.app\""
}
},
"nt": {
"win32": {
"firefox": "C:\\Program Files (x86)\\Mozilla Firefox\\firefox.exe -new-tab",
"iexplore": "C:\\Program Files\\Internet Explorer\\iexplore.exe",
"safari": "C:\\Program Files (x86)\\Safari\\safari.exe",
"chrome": "C:\\Program Files (x86)\\Google\\Chrome\\Application\\chrome.exe",
"chrome64": "C:\\Program Files (x86)\\Google\\Chrome\\Application\\chrome.exe"
}
},

"browser": "chrome" // ctrl + alt + v default set
}

terminal 설치 후 default 셋팅에 아래 추가

{

          "keys": ["super+shift+c"],
          "command": "open_terminal",
          "args": {
               "parameters": ["-T", "Working in directory %CWD%"]
          }
 },

유용한 기능

서브라임의 모든 행동을 기록
// 콘솔에 찍히는 이름을 보고 키바인딩시 string으로 command의 value로 사용가능
[
{ "keys": ["ctrl+shift+n"], "command": "new_window" }
] 콘솔기록 시작/중지
sublime.log_commands(True)
sublime.log_commands(False)

긴문서를 수정할 때
file -> new view into file
( 하나의 파일을 두개의 창에서 보면서 수정가능 단 둘다 수정됨 스크롤은 개별적으로되는 기능 )

유용한 설정 ( Preferences > settings - Default )

  • "highlight_line" = true, // 커서위치줄 강조
  • "trim_trailing_white_space_on_save": false, // 문서저장시 불필요한 공백 제거
  • "show_full_path": true,
  • "bold_folder_labels": true, // 폴더 텍스트 bold 표시
  • "indent_guide_options": ["draw_active"], // 들여쓰기 라인 draw_normal
  • "tab_size": 4,
  • "line_numbers": true,
  • "word_separators": "./\\()\"':,.;<>~!@#$%^&*|+=[]{}~?”,
  • “font_face”: “Monaco”,
  • “font_size”: 10,
  • “close_windows_when_empty”: false,

//맥에서 마지막 탭 닫아도 서브라임 안닫히게할경우는
user설정에서 “close_windows_when_empty”: false를 따로 추가해줘야한다.

단축키 ( cmd는 Mac OS )

  • art + shift + 1~5 , 8, 9 ( 화면분할 )
  • ctrl + shift + p  ( 커맨드 팔레트 )
  • ctrl + 뱡항키  ( 화면스크롤 )
  • alt + 1~ 원하는숫자의 ( 탭으로 이동 )
  • ctrl + shift + T ( 실수로 닫은 마지막 탭 )
  • ctrl + k + -> b  ( 사이드바 토글 )
  • cmd + (b+k)
  • ctrl + ` ( 콘솔창오픈 )
  • ctrl + ‘+/-‘  ( 폰트크기 조절 )
  • cmd + ‘+/-‘
  • shift + f11 ( 전체창 )
  • ctrl + cmd + f
  • ctrl + / ( 단일주석토글 )
  • cmd + /
  • ctrl + shift + /  ( 여러줄 주석 토글 )
  • ctrl + shift  + d  ( 줄복사 )
  • ctrl + shift + k  ( 줄삭제 )
  • ctrl + shift + up, down  ( 현재줄 이동 )
  • ctrl + g  ( 원하는 줄번호로가기 )
  • ctrl + p  ( 원하는 파일열기 )
  • ctrl + p + #  ( #단어위치 )
  • alt + F3   ( 같은단어 모두선택 )
  • ctrl + d ( 같은단어 순차적 선택 )
  • F6 ( 철자검사 )
  • F9 ( 줄정렬 )
  • F5 ( 줄정렬(맥) 별유용하지않음 그냥정렬만함 )
  • shift + 마우스우클릭 드래그 ( 컬럼 선택 )
  • opt + 왼쪽마우스 드래그  ( 컬럼 선택 Mac )
  • ctrl + alt + 좌우 방향키 ( html속성이나 텍스트노드, js {} 기준으로 커서점프 )

 

 

my user-setting

{
“color_scheme”: “Packages/Theme – Spacegray/base16-eighties.dark.tmTheme”,
“font_face”: “Monaco”,
“font_size”: 10,
“ignored_packages”:
[
“Vintage”
],
“soda_folder_icons”: true,
“theme”: “Soda Dark.sublime-theme”
}

  • Jae Won Jang

    댓글은.. 아무도없군 ㅜㅜ 댓글구걸함돠..ㅜ

  • SeongHan Woo

    정말 유용한 정보내요! 아주 좋은 내용 감사합니다

    • Jae Won Jang

      감사합니다^^

  • Jae Won Jang

    아쉽게도 view_in_browser 는 프로젝트에 추가되어야지만 브라우저로 바로보기가 가능하네요