서브라임텍스트 패키지 모음

서브라임텍스트는 개발할 때 주로 사용하는 에디터인데, 기본 편집기능도 좋고, 패키지를 사용하게 되면 훨씬 더 편하게 개발할 수 있다. 이 포스팅에서는 개발할 때 자주 사용하는 패키지를 소개할 것이다.

Sublime Diagram Plugin

평소 서버구성도, 시퀀스 다이어그램을 그려야하는 경우가 많이 있다. Dia, 파워포인트, Pencil, yED와 같은 툴을 사용해봤지만, 만족스럽지 않았다. 직접 그리는 방식이라서 배치하는데 신경이 많이 쓰여 흐름이나 배치에 집중하기 어려웠다.

이 플러그인은 다음 프로그램이 준비되어 있어야 한다.

  • Java (download from java.sun.com)
  • Graphviz (I recommend “homebrew” on the Mac)
  • Sublime Text 2 or 3

그리고 서브라임 패키지 인스톨러로 설치가 되지 않기 때문에, 패키지 디렉토리에 직접 설치해야 한다.

Git Plugin

서브라임 텍스트에서 git을 편하게 사용할 수 있게 하는 플러그인이다. 패키지 인스톨러를 통해 설치하면 된다.

SublimeGit

윈도를 사용할 경우 따로 git 프로그램을 설치해야한다. 그리고 경로를 다음과 같이 설정해야할 것이다.

커맨드 팔레트에서 주로 다음 3개만 사용하는데, 특히 status에서 선택하는 기능이 좋다.

  • GIT status : 버전 관리할 파일을 선택하고, c를 누르면 커밋 메시지를 작성할 수 있고, 탭을 닫으면 커밋이 된다.
  • GIT push
  • GIT pull

MarkdownEditing

Markdown 형식으로 메모도 하고, 프로젝트에서 Readme.md 문서도 자주 만드는데, Markdown 파일을 작성하는데, 이 플러그인이 아주 유용하다. 지금 작성하는 블로그도, 서브라임에서 이 플러그인 사용해서 작성하고 있다. 문서와 코드(Javascript, Python 등)에 신택스 하이라이트도 되는 것이 핵심이다.

패키지 팔레트에서 다음 이름의 플러그인을 찾아 설치하면 된다.

MarkdownEditing

Markdown Preview

Markdown Editing으로 Markdown 파일을 작성할 때 도움이 된다고 할 수 있다. 최종 결과물을 브라우저에서 볼 수 있게 하는 플러그인이 바로 Markdown Preview다. 작성하다가 최종 결과물이 보고 싶다면 CTRL + B(빌드. 윈도)하면 브라우저에 작성하고 있는 문서가 보여질 것이다.

Markdown Preview

SFTP

여러 서버에서 작업할 일이 많이 있는데, 이 플러그인이 아주 유용하다.

SFTP

sftp-config.json 파일을 만들고, CTRL + ALT + U, W를 누르면 서버에 존재하는 폴더와 파일을 볼 수 있다. 수정할 파일을 선택하고, 수정 작업을 거친 후 저장하면 서버에 저장이 된다. 그런데 이 플러그인을 쓰는 것 보다 atom 에디터의 sftp 기능이 더 좋았었다.

GhostText

브라우저의 텍스트 입력창(Textarea)의 내용을 서브라임 텍스트로 작성할 수 있게 하는 플러그인이다. 크롬이나 파이어폭스에 플러그인을 추가로 설치해야한다. 크롬과 파이어폭스에 플러그인을 설치하고, 텍스트 영역에 GhostText 기능을 활성화 할 수 있다. 그 상태에서 서브라임에서 내용을 작성할 수 있다.

그러나 내가 자주 사용하는 도구는 위지웍 에디터라서 잘 활용하지 못했다.

GhostText

처음 알았을 때는 많이 사용하려고 시도했지만, 은근히 귀찮다. 텍스트 창에 글을 입력하다 브라우저가 문제가 생겨 종료가 되더라도, 글은 서브라임에 남아있는 것은 장점이다.

플러그인 페이지

InsertDate

2016-06-22와 같이 원하는 형식의 날짜를 단축키로 입력할 수 있게 하는 플러그인이다. 메모하다가 오늘 날짜를 입력해야할 때 유용하다.

InsertDate

단축키는 CTRL + F5, D

SublimeLinter

프로젝트에서 사용하는 언어에 따라 linter를 세팅하고 시작하는 것이 좋다.

coffeelint
eslint
jshint
pylint
shellcheck

기타 사용중인 플러그인

Dockerfile Syntax Highlighting

Dockerfile 문법 강조

플러그인 페이지

Autotools

Autotools 문법 하이라이트

플러그인 페이지

Babel

JSX를 포함한 ES6 문법 하이라이트

플러그인 페이지

BracketHighlighter

괄호안에 있을 때, 좌측에 표시해 준다.

플러그인 페이지

RPM Spec Syntax

rpm.spec 파일에 관한 문법 강조를 지원한다.

플러그인 페이지

sublime-project-specific-syntax

프로젝트에 따라 문법을 다르게 설정할 수 있다.

플러그인 페이지

sublime_diagram_plugin (PlantUML)

Plantuml을 이미지로 만들어준다. 내부에서 Java와 Graphviz를 사용한다.

플러그인 페이지

Terminal

현재 파일 또는 프로젝트 폴더를 터미널로 열어준다.

플러그인 페이지

Stylus

Stylus 문법 강조를 지원한다.

플러그인 페이지

Siteleaf Liquid Syntax

Liquid 문법 강조를 지원한다.

플러그인 페이지

SideBarEnhancements

사이드바 기능을 강화한다. 특히 우클릭을 통해 다양한 기능을 사용할 수 있다.

플러그인 페이지

React ES6 Snippets

React로 개발할 때 아주 유용한 Snippet을 제공한다. (cdm, cdup, …)

플러그인 페이지

R-Box

R 파일 작업할 때, 자동완성, 메뉴, 팝업 힌트를 제공.

플러그인 페이지

PHP Code Coverage

에디터에서 코드 커버리지 데이터를 표시한다. 테스트가 된 코드는 녹색으로 나온다.

플러그인 페이지

Phpcs

PHP CodeSniffer, PHP Code Beautifier and Fixer, PHP Coding Standards Fixer, the PHP Linter, PHP Mess Detector, Scheck

플러그인 페이지

PhpDoc

문서화 주석을 빠르게 작성할 수 있다. /**로 시작하면 자동 완성됨.

플러그인 페이지

NSIS

Nullsoft Scriptable Install System 문법 강조

플러그인 페이지

Lua​Autocomplete

Lua 자동완성

플러그인 페이지

Jekyll

Jekyll과 통합

플러그인 페이지

INI

INI 문법 강조

플러그인 페이지

Find++

현재 폴더, 프로젝트에서 검색할 수 있다.

플러그인 페이지

DocBlockr

문서화를 위한 주석을 쉽게 작성할 수 있다.

플러그인 페이지

C++11

C++11 문법 정의

플러그인 페이지

C++ Snippets

C++에서 유용한 스니펫이 추가됨.

플러그인 페이지

Lint 플러그인

  • SublimeLinter : 기본 linting 프레임웍
  • SublimeLinter-contrib-eslint : ECMAScript/JavaScript
  • SublimeLinter-contrib-htmlhint : HTML
  • SublimeLinter-cpplint : C++
  • SublimeLinter-jshint : Javascript
  • SublimeLinter-json : json
  • SublimeLinter-pep8 : Python(PEP8)
  • SublimeLinter-php : php-l 옵션을 사용
  • SublimeLinter-phplint : phplint를 사용
  • SublimeLinter-pylint : Python(pylint)
  • SublimeLinter-shellchek : 쉘 스크립트

삭제한 플러그인

이번 장은 플러그인 너무 많아서 지금은 쓸 일 없는 것들을 지우면서 기록한 내용이다.

View In Browser

현재 서브라임탭에 있는 것을 브라우저로 보여준다.

플러그인 페이지

TypescriptCompletion

Typescript 자동완성.

플러그인 페이지

VBScript

VBScript 문법 강조, 스니펫

플러그인 페이지

Select By Regex

정규식으로 영역을 선택할 수 있다.

플러그인 페이지

Repeat Macro

반복적인 작업을 할 때 사용한다.

플러그인 페이지

SublimeServer

Markdown, HTML 파일을 서비스할 수 있는 서버를 띄운다.

플러그인 페이지

설명

플러그인 페이지

React​JS

Babel 플러그인에서 제공해서 필요 없다.

플러그인 페이지

React Templates

React Templates 문법 강조. Babel 플러그인에서 제공해서 필요 없다.

플러그인 페이지

Move Tab

커맨드 팔레트 명령을 통해 탭이 이동한다.

플러그인 페이지

Markdown Extended

TOP 100. 마크다운 문법 강조. 언어에 따라 강조.

플러그인 페이지

Indent​Tips

인덴트와 코드의 위치를 상태바에 보여준다. JS와 PHP는 안된다. 어떤 언어에서 동작하는지 모르겠다.

플러그인 페이지

HTML5

HTML5 번들. HTML5 문법 모드와 스니펫.

플러그인 페이지

Flow

Flow로 자바스크립트 정적 분석을 한다.

플러그인 페이지

Download Source

특정 URL의 데이터를 새로운 또는 이미 존재하는 버퍼로 가져온다.

플러그인 페이지

Dockerfile Syntax Highlighting

Dockerfile 문법 강조

플러그인 페이지

Color Highlighter

색상을 미리보고, 선택할 수 있다.

플러그인 페이지

Markup Jira confluence(SublimeConfluence)

Atlassian Confluence와 통합된 플러그인.

플러그인 페이지

Browser Integration

브라우저와 서브라임을 통합하는 플러그인이다. 우선 서브라임에서 브라우저를 실행하고, 서브라임에서 브라우저로 커맨드를 날릴 수 있다. reload, 스타일시트 보기, 특정 코드 실행하기 등이 가능하지만, 아직 개발중이라고 한다.

플러그인 페이지

All Autocomplete

현재 창에 열린 모든 파일에 있는 내용과 일치할 때 자동완성 키워드를 보여주는 플러그인이다. 느려질 수 있어서 주의가 필요하다.

플러그인 페이지

ApplySyntax

파일 구문을 감지하고, 적용할 수 있는 플러그인이다. 예를들면, .rb 파일은 일반적으로 Ruby 파일이지만 Rails 프로젝트에서의 Rspec, Cucumber 파일, Ruby on Rails(컨트롤러, 모델) 파일을 구분할 수 있다.

플러그인 페이지

Better Coffee Script

신택스 하이라이트, 체크, 커맨드, 단축키, watch 기능 등을 제공한다.

플러그인 페이지

CJSX Syntax

Coffee Script JSX 문법을 지원하는 플러그인이다. ES6로 바꾼 이후는 쓸 필요없었다.

플러그인 페이지

Grunt

Grunt와 통합하는 플러그인이다. Gulp로 바꾸고 나서 쓰지 않는다.

플러그인 페이지

ChangeQuotes

’ 또는 “에 커서를 놓고, 이 플러그인 커맨드를 실행하면 ‘ -> “, 아니면 그 반대로 바꿔주는데, 잘 사용하지 않아서 지웠다.

https://packagecontrol.io/packages/ChangeQuotes

ColorHelper

CSS 작업할 때, 컬러코드를 인식해서 색상을 보여주고, 선택할 수 있는 툴팁을 제공한다. 인라인으로 색상을 보여주는 부분때문에, 확실히 느려진다.

https://packagecontrol.io/packages/ColorHelper

Emmet

Emmet의 공식 플러그인이다. Emmet은 예전에 Zen Coding으로 불렸고, html 작업을 할 때, CSS 스타일로 입력해서 html을 만들어 준다. 편리하지만 html 작업을 많이 하지 않고, 그 마저도 React로 하므로 필요 없어졌다.

https://packagecontrol.io/packages/Emmet

Evernote

Evernote를 서브라임에서 쓸 수 있는 플러그인이다.

https://packagecontrol.io/packages/Evernote

Google Search

서브라임에서 선택한 키워드를 구글에서 검색하는 플러그인이다.

https://packagecontrol.io/packages/Google%20Search

npm

npm을 통합한 플러그인이다. 쉘로 하는게 더 편하다.

https://packagecontrol.io/packages/npm

yUML

yUML을 서브라임에서 만들어 주는 플러그인이다. plantuml을 사용해서 지웠다.

https://packagecontrol.io/packages/yUML

SublimeGit

Git 통합 플러그인이다. 쉘에서 Git 작업을 하면서 지웠다.

https://packagecontrol.io/packages/SublimeGit

GitSavvy

SublimeGit과 유사한 플러그인이다.

https://packagecontrol.io/packages/GitSavvy

HTMLBeautify

HTML을 보기 좋게 만드는 도구다. 가끔씩 필요해서 같은 기능을 하는 사이트를 이용하면서 지웠다.

https://packagecontrol.io/packages/HTMLBeautify

Live​Reload

LiveReload 서버가 서브라임텍스트에서 실행되고, 파일을 저장할 때, 이 서버와 통신할 수 있다.

https://packagecontrol.io/packages/LiveReload

SqlBeautifier

SQL을 사람한테 보기 좋게 만드는 플러그인이다.

https://packagecontrol.io/packages/SqlBeautifier

Text Pastry

반복적인 작업을 쉽게 할 수 있게 돕는 플러그인이다.

https://packagecontrol.io/packages/Text%20Pastry

Pretty JSON

JSON을 보기 좋게 만들어주고, 유효성을 체크할 수 있고, 압축할 수도 있다.

https://packagecontrol.io/packages/Pretty%20JSON

InsertDate

포맷에 맞춰서 현재 날짜와 시간을 출력하는 플러그인이다.

https://packagecontrol.io/packages/InsertDate

SVN

SVN 통합 플러그인.

https://packagecontrol.io/packages/SVN

ShellCommand

쉘 명령을 서브라임내에서 실행하고, 그 결과를 탭에서 보여주는 플러그인이다.

https://packagecontrol.io/packages/ShellCommand

Shell Turtlestein

ShellCommand와 유사한 플러그인이다. 다른점은 결과가 서브라임 콘솔에 출력된다.

https://packagecontrol.io/packages/Shell%20Turtlestein

Tabs​Extra

탭에 추가 기능을 주는 플러그인이다. sticky 탭을 만들고, 탭 정렬, 삭제, 이름 변경 등을 할 수 있다.

https://packagecontrol.io/packages/TabsExtra

Scheme

Scheme이라는 언어를 지원하는 플러그인인데, 언제, 왜 설치했는지 모르겠다.

https://github.com/egrachev/sublime-scheme

PyV8

Emmet 플러그인 설치할 때 자동으로 설치되는 플러그인이다.

https://github.com/emmetio/pyv8-binaries

Java​Script & Node​JS Snippets

Console, DOM, Loop 등을 쉽게 작성할 수 있는 Snippet이다. cl은 console.log, al은 alert, …

https://packagecontrol.io/packages/JavaScript%20%26%20NodeJS%20Snippets

Handlebars

Handlebars.js 템플릿을 지원하는 플러그인이다.

https://packagecontrol.io/packages/Handlebars

Jade

Jade 템플릿을 지원하는 플러그인이다.

https://packagecontrol.io/packages/Jade

Liquid

Liquid 템플릿을 지원하는 플러그인이다.

https://packagecontrol.io/packages/Liquid

Less

Less Syntax Highlight를 지원하는 플러그인이다.

https://packagecontrol.io/packages/LESS

SublimeCodeIntel

Open Komodo Editor에서 포팅된 플러그인으로, 다양한 언어를 지원한다. 심볼이 정의된 파일로 이동하고, 사용가능한 모듈을 자동완성할 수 있다.

https://packagecontrol.io/packages/SublimeCodeIntel

Swift

Swift 언어를 지원하는 플러그인이다. XCode에서 작업해서 필요없다.

https://packagecontrol.io/packages/Swift

Sublime​REPL

서브라임 탭에서 PHP, Python, Ruby, R, Node.js 등 다야한 언어의 인터프리터를 실행하는 플러그인이다.

https://packagecontrol.io/packages/SublimeREPL

Vue Syntax Highlight

Vue 템플릿을 지원하는 플러그인이다.

https://packagecontrol.io/packages/Vue%20Syntax%20Highlight

TypeScript

TypeScript 문법, Snippet을 지원하는 플러그인이다. 백그라운드로 Node 프로세스가 실행된다.

https://packagecontrol.io/packages/TypeScript

LogView

로그 파일을 볼 때 로그 단계에 따라서 심각하면 빨강 덜 심각하면 노랑으로 표시하는 플러그인이다.

https://packagecontrol.io/packages/LogView

SublimeLinter-coffeelint

Coffee Script 문법을 체크하는 Linter인데, ES6로 바꾼 후 사용하지 않는다.

https://packagecontrol.io/packages/SublimeLinter-coffeelint

JSX

JSX 언어 정의.

플러그인 페이지

DB1

PostgreSQL, MySQL, SQLite, MariaDB 같은 디비에서 쿼리를 실행하는 플러그인.

플러그인 페이지

DotENV

.env 파일에 대한 문법 강조

플러그인 페이지

Theme

BitTorrentSync

BitTorrentSync란?

BitTorrentSync(이하 Sync)는 OSX, Windows, 리눅스, iOS, Android 등 대부분 플랫폼에서 동작하는 동기화 프로그램이다.

리눅스의 rsync와 비슷하지만, P2P로 양방향으로 동기화가 가능하다. 그리고 중앙 서버가 필요 없고, 폐쇄된 환경에서 내부 네트워크만 연결되어 있으면 동기화할 수 있다.

제품 설명 페이지에 따르면 클라우드 서버를 거치지 않기 때문에 클라우드 서비스보다 16배 빠르다고 한다.

기능

  • 크로스플랫폼 장치간 파일 전송
  • 인텔리전트 동기화
  • 모바일 데이터 백업

무료, Pro 버전 비교

설치 후 30일 동안 Pro 버전을 사용할 수 있고, 그 이후부터 무료 버전으로 사용할 수 있다.

두 가지 기능에 대해 약간 더 알아볼 필요가 있었다.

처음으로 폴더 수 무제한 기능이다. 무료 버전에서 10개까지만 사용할 수 있다. 만약 10개를 사용하고 있는데, 1개 폴더를 더 공유하고 싶다면 Pro로 업그레이드하거나 1개 폴더를 제거해야 한다.

다음은 데스크탑에서의 온디맨드 액세스 기능이다. 전체 파일을 동기화하는 것이 아니고, 필요할 때 동기화하는 방식이다. 개인적으로 이 기능은 유용한 상황이 없었다. 이 기능은 iOS, 안드로이드 앱에서 무료로 사용할 수 있다.

설치하고 사용하기

설치와 설정 등 기본적인 사용법은 간단하다. 다운로드 후 실행하면 된다.

설정할 때 수신받는 포트를 지정하는 것이 좋다. 수신받는 포트는 TCP와 UDP가 함께 열리게 된다. 보통 55555번 포트를 많이 사용하는 것 같다.

장치 간 최소한 이 포트에 접근할 수 있어야 공유할 수 있다. 또는 Sync에서 제공하는 릴레이 서버에 대한 접근이 막혀있지 않다면, 이 서버가 중계해주는 역할을 해줄 수 있다.

다음은 트래커 서버와 릴레이 서버가 접근 가능한지 확인할 수 있는 명령이다. 아쉽게도 현재 사용 중인 호스팅에서 중계 서버에 접속이 안 돼서 중계 서버는 사용할 수 없었다.

윈도와 맥은 트레이에 아이콘이 나타나고 백그라운드로 동작한다. 여기서 설정이나 상태 등을 확인할 수 있다. 이와는 달리 리눅스 버전은 웹 UI가 제공된다. 웹 UI는 TCP 포트를 사용하고 기본적으로 8888번을 사용한다.

어쨌거나 Sync를 통해서 폴더를 추가하고, 해당 폴더를 공유할 수 있다. 또는 전체 폴더를 동기화 시킬 수도 있다.

처음에 공유하고 싶은 폴더를 QR코드나 링크를 통해서 대상 컴퓨터나 모바일에서 사진을 찍거나 코드를 입력하면 공유할 수 있게 된다.

간단하게 기본적인 사용법은 알아봤고, 실제 어떤 식으로 사용했는지 사례를 알아보겠다.

장비 구성은 서버, 회사 PC, 집 PC, 랩탑으로 되어 있다. 실제로 여기에 아이폰, 아이패드 같은 장비를 추가로 사용한다.

서버에서는 매일 DB 데이터를 덤프해서 특정 폴더에 보관하고 있다. 그리고 nginx를 사용해서 특정 폴더에 대한 웹서비스를 하고 있다.

폴더 공유 목적
데이터베이스 백업 폴더 서버에 있는 데이터베이스 백업을 하고 집 PC에도 저장시켜 이중화시킨다.
웹서비스 폴더 블로그의 이미지나 테스트 페이지 작성을 위해서 집 PC, 랩탑, 회사 PC 등 모든 장비에서 공유한다.

데이터베이스 백업 폴더는 개인적인 데이터이기 때문에 회사 PC에서는 필요 없다. 그리고 웹서비스 폴더의 경우 아무 장비에서나 공유된 폴더에 이미지를 올리거나 페이지를 만들면 동기화되면서 서버에서 바로 서비스가 된다. 예를 들어 랩탑에서 블로그에 쓸 이미지를 10개를 공유 폴더에 위치시키면 바로 nginx를 통해서 10개 이미지를 웹서비스를 할 수 있는 것이다. html, javascript 파일도 서비스 할 수 있다. 물론 jsfiddle로 할 수 있지만, PC에서 내가 좋아하는 에디터를 사용해서 코드를 작성하고 페이지를 바로 공유할 수 있는 것이 다른 점이다.

문제점

동기화가 이상하게 되는 문제

이 외에도 사진이나 개인적으로 보관하고 있는 파일들도 지워질 것에 대비해서 집 안에 있는 PC끼리 서로 백업시키는 용도로 쓰고 싶었다. 그래서 맥(OSX)과 미니 PC(윈도7)에 Sync를 설치하고, 백업 폴더를 공유시켰다. 그리고 공유시킨 폴더 안에 있는 구조를 변경하고, 파일 이름들도 바꾸는 등 작업을 했는데 미니 PC에서 작업한 대로 정상적으로 변경되지 않고, 파일도 삭제되는 문제가 있었다. 이 문제는 너무 치명적이라서 맥과 윈도 간 동기화를 통한 이중화는 하지 않았다. 아마 맥 버전이 문제일 것으로 보인다.

파일 변경이 바로 반응하지 않는 문제(해결)

이 문제는 우분투에서 문제가 발생했었는데, 우분투에서 파일을 삭제하거나 내용을 변경했는데 동기화가 전혀 되지 않았었다. 디버그 모드를 체크한 후 확인해 보니 전혀 이벤트가 발생하지 않는 것으로 보였다. 포럼을 찾아봐도 해결방법을 찾을 수 없었다. 아마 i386(glibc 2.3) 버전을 설치했었는데, i386으로 다시 다운로드 후 다시 설치하니 이벤트가 정상적으로 발생했다.(또는 그 반대로)

백신 프로그램 때문에 막힌 경우

회사 윈도 PC의 경우 백신으로 시만텍이 설치되어 있는데, Sync를 악성 프로그램으로 보고, Sync에서 사용하는 포트를 전부 막아버린다. 그래서 윈도에서는 사용할 수 없었다.

결론

중앙서버를 거치지 않고, 폐쇄된 환경에서도 P2P 방식으로 폴더를 공유하고, 양방향으로 동기화되는 것은 아주 매력적이다. 이러한 기능을 구현하기 위해서 rsync를 사용하고, 구조를 생각하고 스크립트를 만들었어야 했을 텐데, Sync를 사용하게 되면 데몬만 띄우고 폴더만 지정해서 간단하게 구현할 수 있었다.

그러나 백신 프로그램이나 맥과 윈도 간 동기화할 때 문제점은 치명적이었다. 특히 동기화가 이상하게 되는 안정성에 관한 문제들은 앞으로 개선되었으면 좋겠다.

References