바닥코딩

[tool 소개]sublime Text3 본문

JavaScript/JQuery

[tool 소개]sublime Text3

개발공부개발공부 2020. 3. 6. 14:45

Sublime Text3

 sublime Text3는 개발 언어를 위한 에디터라기 보단 주로 front-end 개발자들을 위해 개발이 되었고 현재 웹 퍼블리셔 들에게 가장 hot한 에디터입니다.무료 에디터라고 착각하는 사람이 많은데 정식 라이센스는 유료입니다. sublimeText3가 인기가 있는 이유를 살펴보자면 물론 지금도 많이 사용하지만 과거에 주로 많이 사용했던 울트라에디트, 에디트 플러스, notepad++등에 비해 설치하면 화면 구성이 너무 심플하고 딱 코드 작성에판 필요한 기능만이 존재하기 때문에 이런 심플한 관점에서 많은 사랑을 받게 되었고, 두 번째는 키보드 단축키 만으로 모든 조작이 가능 하기 때문에 와 세 번쨰 이유인 다양한 패키지를 추가 설치할 수 있고 패키지 관리의 간편함이 개발자들을 매료시켰습니다. 

 sublime Text3를 제외하고 요즘 유행하는 에디터 로는 Atom, vscode, Brackets가 있는데 이들은 대부분 sublime Text의 장점을 살린 에디터라 볼 수 있습니다. 

 개인적으로는 vscode는 사용자 관점에서 편하고 python, sql, node등에서 범용적으로 사용하기 좋아 편리하지만 단순한 web html 이나 javascript에서는 sublime Text3가 더 편한느낌 이였습니다.  Atom 과 같은 경우는 에디터자체가 좀 무거운 느낌이 강했고 브라켓은 써본적이 없지만 웹 퍼블리셔에게 정말 좋은 에디터 라고 합니다.

 

Sublime Text3 Package 설치하기

상단 메뉴바 prerfomances -> package Control 로 들어가면

위와 같은 창이 나오는데 해당 란에 원하는 패키지를 검색하여 설치 할 수 있다 아래는 sublime Text3에서 많은 사람들이 추천하는 패키지 목록입니다.

  • IMESupport ( 한글 입력을 할 때 한글자씩 늦게 보이는 현상을 완화시켜준다. Only Window )
  • ConvertToUTF8 ( 서브라임 텍스트는 euc-kr 을 지원하지 않는데, 이 플러그인을 깔고 File - Set File Encoding To 에서 EUC-KR을 선택하면 된다. )
    - Linux, MacOS X 에서는 Codecs33 도 같이 설치해야 제대로 작동한다.
  • BracketHighlighter ( 태그의 처음과 끝을 하이라이트 시켜서 코드 가독성을 높여준다. )
  • Emmet ( 젠코딩 플러그인이다. 개인적으로는 사용을 안한다. 젠코딩 없이도 서브라임 기본 기능만으로도 부족함이 없다. *젠코딩 API)
  • SideBarEnhancements ( 사이드바의 기능을 확장시켜준다. 상대경로로 브라우저 오픈기능을 설정할 수 있어서 매우 유용하다. Only ST3)
  • AdvancedNewFile ( 단축키로 원하는 경로에 파일을 생성해준다. lorem\test.html 식으로 입력하면 한번에 생성
    되고 폴더가 없으면 생성된다. )
  • JQuery ( JQuery 자동완성 기능이 추가된다. )
  • CSS Format ( css 를 여러가지 방법으로 정렬시켜준다. )
  • CSScomb ( css 의 속성 순서를 원하는 순서로 변경시켜준다. CSSFormat 과 같은 기능도 있다. )
  • View in Browser ( 브라우저 오픈 기능의 원조 플러그인이다. chrome, firefox, safari, IE 등 여러 브라우저로 오픈 가능하고 상대 경로도 가능한듯하다. )
  • Material Theme ( Material Theme 추천 테마 패키지 Only ST3)
  • live reload ( 에디터에서 저장을 하면, 브라우저로 창을 옮기지 않아도 새로고침이 된다. Only ST3)
    - 크롬 브라우저 확장프로그램 필요
  • LiveStyle ( 개발자도구를 열어놓고 수정을 하면 css에 바로 수정이 된다. 반대도 가능하다. )
    - emmet livestyle 이란 프로그램과 크롬 브라우저 확장프로그램이 필요
  • SyncedSideBar ( 현재 포커스된 파일의 위치를 사이드바를 통해 바로바로 포커스를 맞춰준다. 현재 열려 있는 사이드 바 위치가 다른 곳이라도 파일이 어떤 위치에 있는지 포커스를 해줌으로서 알려주는 편리한 기능 )
    패키지 기본 설정에서 reveal-on-activate 값으로 기능을 on/off 가능하다.

 

 

 

'JavaScript > JQuery' 카테고리의 다른 글

엘리먼트를 제어하는 법  (0) 2020.03.09
event  (0) 2020.03.09
chain, traversing  (0) 2020.03.09
선택자  (0) 2020.03.06
jQuery에 대해  (0) 2020.03.06