Register for this year’s #ChromeDevSummit happening on Nov. 11-12 in San Francisco to learn about the latest features and tools coming to the Web. Request an invite on the Chrome Dev Summit 2019 website

편집기 설정

코드 편집기는 개발자의 주된 개발 도구입니다. 코드를 작성하고 저장하는 데 쓰입니다. 편집기의 단축키를 익히고 주요 플러그인을 설치하면 더 우수한 코드를 더욱 빠르게 작성할 수 있습니다.

TL;DR

  • 단축키를 맞춤설정할 수 있고 더 나은 코드를 작성할 수 있게 도와주는 유용한 플러그인이 많은 편집기를 선택하세요.
  • 패키지 관리자를 사용하면 플러그인을 검색, 설치하고 업데이트하는 과정이 한결 간편해집니다.
  • 개발 과정 중 생산성을 유지하는 데 유용한 플러그인을 설치하세요. 우선 이 가이드에 소개된 권장 항목부터 시작하세요.

Sublime 텍스트 편집기 설치

Sublime은 강력한 기능을 제공하는 우수한 편집기로, 코드 작성을 즐겁게 만들어줍니다. 패키지 관리자를 설치하면 손쉽게 플러그인을 설치하고 새 기능을 추가할 수 있습니다.

현재 Sublime Text에는 두 가지 다운로드 옵션이 있습니다. 하나는 버전 2이고 다른 하나는 버전 3입니다. 버전 3도 제법 안정적이고 Sublime Text 2에서는 이용할 수 없었던 패키지에 액세스할 수 있지만, 버전 2가 더 신뢰할 수 있습니다.

참고: Sublime을 익히고 애용하는 방법에 관한 Rob Dodson의 블로그 게시물은 편집기를 최대한 활용하는 데 도움이 되는 훌륭한 참조 자료입니다. 여기서 다루는 개념은 Sublime뿐만 아니라 모든 텍스트 편집기에 관련됩니다.

패키지 관리자를 사용하는 이유

패키지 관리자를 사용하면 패키지와 플러그인을 간편하게 검색, 설치하고 최신 상태로 유지할 수 있습니다.

Sublime 텍스트 편집기 패키지 컨트롤의 스크린샷

Sublime용 패키지 관리자를 설치하려면 https://packagecontrol.io/installation의 지침을 따르면 됩니다.

이 작업은 한 번만 하면 됩니다. 작업을 마치면 아래에 기재된 권장 플러그인 목록을 참조하세요.

플러그인 설치

플러그인은 더욱 생산적으로 작업하는 데 도움이 됩니다. 작업을 수행하려면 다른 도구로 계속 다시 돌아가게 만드는 작업에는 어떤 것이 있을까요?

Linting - 이를 위한 플러그인이 있습니다. 커밋되지 않은 변경 사항이 무엇인지 표시 - 이를 위한 플러그인도 있습니다. 다른 도구(예: Github)와 통합해야 한다면, 이에 필요한 플러그인도 제공됩니다.

패키지 관리자는 플러그인을 검색, 설치 및 업데이트하는 작업을 매우 용이하게 해줍니다.

  1. Sublime 텍스트 편집기에서 패키지 관리자를 엽니다(ctrl+shift+p).
  2. 'Install Package'를 입력합니다.
  3. 찾고자 하는 플러그인의 이름을 입력합니다. (아니면 모든 플러그인을 검색할 수도 있습니다.)

다음 인기 Sublime Text 플러그인 목록을 둘러보세요. 다음은 개발 속도를 높이는 데 도움이 되기 때문에 여러분에게 설치하도록 권장하고 싶은 플러그인입니다.

Autoprefixer

CSS에 공급업체 접두사를 추가할 신속한 방안을 원하신다면, 이 편리한 플러그인이 제격입니다.

공급업체 접두사를 무시하고 CSS를 작성한 다음 이를 추가하려면 ctrl+shift+p를 누르고 Autoprefix CSS를 입력하면 됩니다.

이 작업을 빌드 프로세스에서 자동화하는 방법도 다루고 있습니다. 이렇게 하면 CSS를 간결하게 유지할 수 있으며 ctrl+shift+p를 눌러야 한다는 사실을 기억하지 않아도 됩니다.

Sublime Autoprefixer 플러그인 예시

ColorPicker

색상표에서 아무 색이나 선택하고 ctrl+shift+c를 사용하여 CSS에 추가합니다.

Sublime Color Picker 플러그인

Emmet

텍스트 편집기에 몇 가지 유용한 키보드 단축키와 스니펫을 추가할 수 있습니다. Emmet.io의 동영상에서는 이 플러그인의 다양한 기능을 간략하게 소개합니다. (개인적으로 마음에 드는 기능은 'Toggle Comment' 명령입니다.)

Emmet.io 플러그인 데모

HTML-CSS-JS prettify

이 확장 프로그램은 HTML, CSS 및 JS의 서식을 지정하는 명령을 제공합니다. 파일을 저장할 때 언제든지 파일을 꾸밀(prettify) 수도 있습니다.

Sublime Prettify 플러그인의 gif 파일

Git Gutter

파일에 변경이 적용될 때마다 여백에 마커를 추가할 수 있습니다.

Git Gutter 플러그인의 스크린샷

Gutter Color

참고: 이것은 Sublime Text 3에서만 이용할 수 있습니다.

Gutter Color는 CSS 옆에 작은 색 샘플을 표시합니다.

Sublime Gutter Color 스크린샷

이 플러그인은 ImageMagick이 필요합니다. Mac OS X를 사용하는 경우, CactusLabs에서 제공하는 설치 프로그램을 사용해보도록 권장합니다. (이 프로그램을 실행하려면 컴퓨터를 다시 시작해야 할 수도 있습니다.)