코딩의 작업효율을 올려주는 Sublime Text Package

sapjil-sublimetext

최근의 많이 사용되고 있는 에디터중에는 Brackets, Sublime Text가 가장 많이 사용되고 있지 않나 생각됩니다. 이상하게도 한국에서는 Editplus가 많은데 그 이유는 잘 모르겠습니다만.. 저는 Sublime Text를 애용하는 편입니다. 개인적으로 Coda를 주로 사용했었는데 Sublime을 접한 후로는 메인으로 사용하고 있습니다.

초반에는 그저 가볍고 좋아보여서 사용하기 시작했지만 사용하다보니 이것 저것 플러그인을 깔고 몸집이 커지는 느낌도 들고.. 이번기회에 실제로 사용하지 않는 플러그인을 삭제도 할겸, 정리하고 나니 지우지 않게 되는 몇가지가 있어 정리를 해 보았습니다.

table of contents

  1. Package Control – 사전에 설치해 두어야 함
  2. All Autocomplete – 자동완성을 지원
  3. AutoFileName – 자동으로 파일의 위치를 표시
  4. Diffy – 파일을 비교해줌
  5. Emmet – 젠코딩
  6. GitGutter – 버전관리상태를 알아 볼수 있게 도와줌
  7. Goto-CSS-Declaration – html에서 클래스 선택시 css로 이동시켜줌
  8. SCSS – SASS에 Syntax적용
  9. SublimeLinter – Lint 설치
  10. Tag – 태그의 열고 닫기를 지원
  11. BracketHighlighter – Tag의 온오프 상태 확인
  12. W3CValidators – w3c문법 체크
  13. Random-sublime-text-plugin – 랜덤 텍스트 생성

Package Control

Sublime Text에서 각종 추가기능을 사용하기 위해서는 Package Control을 사용해야 합니다. 공식사이트에서 제공하는 코드를 복사해서 Package Control를 활성화 해주시면 됩니다.

package control installation

All Autocomplete

자동완성을 도와줍니다.

sublimetext-AllAutocomplete

AutoFileName

코딩시에는 CSS를 불러들이거나, 이미지를 불러들이는등 여러가지로 파일을 임포트 시킬 경우가 있습니다. 그럴경우에 자동으로 파일의 위치를 알려주어 작업을 용이하게 해줍니다.

sublimetext-AutoFileName

Diffy

파일을 비교해주는 플러그인입니다. 저같은 경우 Mac용 Kaleidoscope를 사용하고 있어서 실제로는 사용하지 않지만 필요하신 분들이 계실것 같아 목록에 추가시켜 보았습니다.

sublimetext-Diffy

비교하고 싶은 파일 2개를 불러들여 ‘View > Layout > Columns:2’를 선택한후 + K, + D순으로 누르면 다른 부분을 하이라이트 시켜줍니다. 별도로 파일비교툴을 사용하지 않는다면 이 팩키지만으로도 확인작업이 가능하리라 생각됩니다.

Emmet

Zen-Coding은 많이 사용되고 있기에 따로 설명이 필요없겠죠? 예를 들어 html에서는 <ul>li*5>처럼 작성후 Ctr+e로 ul안에 li를 5개만들어주는 작업이 가능하며, CSS에서는 float:right를 작성할 경우 flr이라고 작성하면 float: right처럼 작성됩니다.

sublimetext-Emmet

GitGutter

혹시 Git을 사용하고 계신가요? 버전관리를 하고 계신분이라면 꼭! 추가시키시면 후회하지 않으실 플러그인입니다. 코드작업시에 이전 작업에서 수정된 부분과, 현재 작업을 진행하고 있는 부분을 확인시켜 주기 때문에 무척 도움이 됩니다.

sublimetext-GitGutter

Goto-CSS-Declaration

html에서 사용되고 있는 클래스를 선택한후 해당 옵션을 선택하면 자동으로 CSS의 해당 클래스로 이동됩니다.

sublimetext-Goto-CSS-Declaration

SCSS

SASS를 작업할때 Sublime에서는 Syntax가 적용되어 있지 않기 때문에 구분이 힘듭니다. 이 플러그인을 적용시킴으로 해서 알아보기 쉬어집니다.

sublimetext-scss

SublimeLinter

Lint의 경우는 각종 문법오류를 체크해줍니다. 작업하는 순간에 오류를 체크해주기 때문에 실수를 상당수 줄여줍니다.

sublimetext-lint

SublimeLinter-jshint, SublimeLinter-csslint, SublimeLinter-contrib-scss-lint, SublimeLinter-phplint등등이 있으니 작업환경에 맞추어서 적용시키면 좋을것 같습니다.

Tag

Tag를 열고 닫는작업을 수월하게 해줍니다. <tag>를 열고, </까지 입력하면 자동으로 닫아주는 플러그인입니다.

sublimetext-Tag

BracketHighlighter

코딩의 기본은 각종 Tag의 열고 닫기입니다. 이 기본을 지키지 않으면 문제가 많이 있겠죠? 해당 패키지는 Tag의 열고 닫는 부분을 알기 쉽게 표시해 줍니다.

sublimetext-BracketHighlighter

W3CValidators

W3C에 접속해서 오류를 확인해 줍니다. 직접 사이트에 접속해서 확인하는 방법도 있지만 개인적으로는 너무 많은 정보를 보여주고 있기 때문에 이 플러그인처럼 오류가 나는 부분만을 뽑아서 보여준다는 점이 마음에 드는 부분입니다.

sublimetext-W3C Validation

‘Tools > W3C Validators’에서 체크하고자 하는 문서형식을 고르면 됩니다.
위 예제는 HTML의 마크업작업은 HTML5형식으로 작업한 후에 HTML4를 기준으로 체크를 진행한 예입니다.

Random-sublime-text-plugin

다양한 형태의 랜덤 텍스트를 생성시켜줍니다.

random-sublime-text-plugin

샘플로 이메일을 랜덤으로 생성시켜봤습니다. 보시면 아시겠지만 텍스트, 컬러, 성, 이름, 이메일등등 다양한 옵션이 있습니다. 은근 사용하기 편합니다.

(Visited 16,392 times, 3 visits today)

sapjil

서울거주의 회사원으로 DESIGN/HTML/CSS를 생업으로 하고 있는 마크업 엔지니어 입니다. 프론트엔드 엔지니어로 거듭나고자 틈틈이 JavaScript를 공부하고 있습니다. 이 블로그 SAPJIL에서는 웹 사이트 제작에 필요한, 삽질을 줄일 수 있는 정보를 공유합니다.

10 thoughts on “코딩의 작업효율을 올려주는 Sublime Text Package

  1. 안녕하세요, Diffy를 알게 되어 설치 했는데… 실행 키가 ⌘ + K, ⌘ + D로, 다중 선택/제외 키와 겹칩니다..ㅠㅠ
    실행 키를 preferences > Key Bindings 에서 변경하는지요?

    “keys”: [“ctrl+command+k”],
    “command”: “Diffy”

    이렇게 넣었는데 실행이 안 되어서요.
    단축키를 변경해야 하는데 방법을 모르겠습니다..^^;;

  2. 안녕하세요 확인이 늦었습니다.

    설정은 preferences > package settings > diffy > settings user 에서 등록하면 가능하실 것 같습니다.

    혹시 빼먹으셨을지도 모르겠는데.. [] 로 감싸고 그 안에서 {…} 키값을 등록하셔야 합니다.
    시험삼아 이렇게 등록해봤더니 제대로 작동하네요..

    [
    { “keys”: [“super+shift+ctrl+k”], “command”: “diffy” },
    { “keys”: [“super+shift+ctrl+c”], “command”: “diffy”, “args”: {“action”: “clear”} }
    ]

    꼭 단축키로 작업하시길 원하신다면 기본적으로 잡혀있는 키값들과 겹치지 않는 조금 복잡한 키조합을 추천드리겠습니다.

  3. 안녕하세요. 서브라임텍스트를 이용중인데요. 자체 적으로 python plugin 제작을 지원하더라구요. java를 실행시켜서 선택한 값을 인자로 받아 결과 값을 서브라임 텍스트로 가져오도록 제작하고 싶은데 관련 문서 링크나 알고 계신게 있다면 공유 부탁 드립니다.

댓글 남기기

이메일은 공개되지 않습니다. 필수 입력창은 * 로 표시되어 있습니다