바닥코딩
[tool 소개]sublime Text3 본문
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 |