본문으로 건너뛰기

"sublimetext" 태그로 연결된 7개 게시물개의 게시물이 있습니다.

모든 태그 보기

· 약 1분

서브라임 텍스트를 탐색기 우클릭 메뉴에 추가해서 접근성을 높여보자.

OpenWithSublime Gist에서 실행파일을 다운로드 받는다. image from hexo

압축 푼 파일을 서브라임 텍스트가 깔려있는 경로에 넣어준다. image from hexo

OpenWithSublime.bat 파일을 실행한다.

확인

이제 폴더나 파일을 바로 서브라임 텍스트로 열 수 있다. image from hexo

· 약 2분

서브라임 텍스트에서 단축키를 수정해보자.

Preferences > Key Bindings 메뉴를 들어간다. Default 와 User 로 나눠진 창에서 User 창에 내 단축키를 등록하면 된다.

단축키

다른 환경과 호환되는 사용하기 편한 단축키

[
// ctrl+d 로 줄삭제
{
keys: ["ctrl+d"],
command: "run_macro_file",
args: { file: "res://Packages/Default/Delete Line.sublime-macro" },
},
// 기존 ctrl+d의 기능을 옮김
{ keys: ["ctrl+shift+k"], command: "find_under_expand" },
{ keys: ["ctrl+k", "ctrl+shift+k"], command: "find_under_expand_skip" },
// 들여쓰기 활성화
{ keys: ["f12"], command: "reindent", args: { single_line: false } },
// 파일 새로고침
{ keys: ["f5"], command: "revert" },
// f1키 누를시 package controller 띄우기 (기존 ctrl+shift+p 기능)
{
keys: ["f1"],
command: "show_overlay",
args: { overlay: "command_palette" },
},
// terminal package가 있을시 현재 프로젝트 터미널 띄우기
{ keys: ["ctrl+alt+t"], command: "open_terminal_project_folder" },
// sidebarEnhancement package가 있을시 파일명 변경
{ keys: ["f2"], command: "side_bar_rename" },
// sidebarEnhancement package가 있을시 새 파일 생성
{ keys: ["ctrl+n"], command: "side_bar_new_file2" },
];

· 약 2분

서브라임 텍스트 사용시 쓸만한 패키지를 모아봤다.

NameDescription
additional PHP SnippetsPHP 자동완성
All Autocomplete열려있는 모든 문서의 구문을 가져와 자동완성
Auto RefreshN초마다 자동 파일갱신
AutoFileName파일경로 입력시 자동으로 목록을 보여줌
BracketHighlighter괄호 하이라이터
Color HighlighterHEX 및 색상 하이라이터
ConvertToUTF8UTF8 환경 사용가능
DocBlockr괄호 자동생성
EJS2ejs 사용 가능
GitGit 사용 가능
IMESupport한글 및 기타 문자 사용가능
JavaScript & NodeJS Snippetsjs 및 node 자동완성
Javascript Beautify압축된 js의 아름답게
Javascript Completionsjs 자동완성
Javascript PatternsES5이하에서 최적화된 js패턴 사용
JSHint Gutterjs hint를 gutter 아이콘으로 표시
LESSless 사용 가능
MarkdownEditingmarkdown 사용 가능
Material Theme메테리얼 테마
SFTPftp 사용 가능
SideBarEnhancements기본 우클릭메뉴 강화
SublimeCodeIntelHTML 구문 자동완성
SublimeLinter문법 체크
SublimeLinter-jshintjs 문법체크
SublimeLinter-phpphp 문법체크
SublimeLinter-xmllintxml 문법체크
SyncedSideBar파일 선택시 사이드바의 폴더가 자동으로 열림
Terminal터미널
TortoiseSVNSVN 사용가능
TrailingSpaces빈공간 제거
TypeScriptts 사용 가능
UMD snippetsUMD 모듈패턴 자동완성

진하게 표시가 된 패키지들은 필수로 설치하는걸 추천한다.

· 약 1분

실수로라도 Ctrl+Shift+C 키를 누르면 소스가 GBK 중국어 인코딩으로 바뀌어 저장된다. 이 단축키의 기본 설정을 UTF-8로 변경해보자.

패키지 경로 이동

C:\Users\사용자 폴더\AppData\Roaming\Sublime Text3\Packages\ConvertToUTF8 image from hexo

기본 설정파일 변경

Default (Windows).sublime-keymap 파일을 열고 아래와 같이 수정한다.

[
{
keys: ["ctrl+shift+c"],
command: "convert_to_uft8",
args: { encoding: "UTF-8", stamp: 0 },
},
];

또는 파일 내용을 날려버려도 된다.

· 약 1분

패키지 설치

Package Control을 열어 Terminal 패키지를 설치한다.

Git Bash 와의 연동

Preferences > Package Settings > Terminal > Settings - User 메뉴에서 터미널 경로를 수정한다.

{
// git-bash가 설치된 경로
"terminal": "C:\\Program Files\\Git\\git-bash.exe",
"parameters": []
}

단축키 추가

기본 단축키는 ctrl+shift+alt+t 라 어려우니 변경해주자. Preferences > Key Bindings 메뉴에서 단축키를 추가한다.

{ "keys": ["ctrl+alt+t"], "command": "open_terminal_project_folder" }

이제 ctrl+alt+t 키로 현재 프로젝트에서 깃 배쉬창을 바로 띄울 수 있다.

· 약 4분

javascript 에서 linter 의 역활은 중요하다. Sublime Text 나 VSCode 에서 jshint linter 를 설치하고, 기본 설정을 수정해보자.

Sublime

모듈 설치

Sublime Linter 패키지가 선행되어야한다.

Package Control을 열어 Sublimt-Linter jshint를 설치한다. 간단히 jshint 로 검색해도 된다.

jshint 설치

# 전역으로 jshint를 설치한다.
$ npm install -g jshint

설정 경로 변경

Preferences > Package Settings > SublimeLinter > Settings - user 메뉴로 들어가, "users.linters.jshint.args"에 경로를 수정한다.

{
"linters": {
"jshint": {
"@disable": false,
"args": [
// 여기에 경로를 적어준다.
"--config=C:\\Users\\사용자\\npm\\node_modules\\jshint\\jshint_config.json"
],
"excludes": []
}
}
}

VSCode

내장되어있다. 파일 > 기본설정 > 설정에서 아래 속성을 만져주면 된다.

{
"jshint.options": {}
}

설정 파일

소스

{
"esnext": true,
"asi": false,
"boss": false,
"curly": true,
"eqeqeq": true,
"eqnull": false,
"evil": false,
"expr": true,
"forin": true,
"funcscope": false,
"jquery": true,
"latedef": true,
"lastsemic": false,
"loopfunc": false,
"maxerr": 10,
"nocomma": true,
"nonbsp": true,
"node": true,
"nonew": false,
"plusplus": false,
"regexdash": false,
"shadow": false,
"strict": false,
"supernew": false,
"trailing": false,
"undef": false,
"unused": false,
"white": false,
"withstmt": false,
"worker": true
}

설명

  • esnext : es6 의 구문을 사용할 수 있음
  • asi : 세미콜론이 없을 수 있음
  • boss : 비교문(lt, gt..)이 올 자리에 할당문(a = 1)이 올 수 있음
  • curly : 중괄호 생략할 수 없음
  • eqeqeq : ==를 사용할 수 없음 (===를 사용)
  • eqnull : null 비교를 사용할 수 있음
  • evil : eval 을 사용할 수 있음
  • expr : 할당이나 함수호출이 아닌 표현식 사용할 수 있음 (예제 참조)
  • forin : forin 반복문 사용시 if 으로 필터링을 해줘야함
  • funcscope : 조건문 내의 선언된 변수를 조건문 바깥에서 참조 가능
function test() {
if (true) {
var x = 0;
}

x += 1; // Default: 'x' used out of scope.
// No warning when funcscope:true
}
  • jquery : jQuery 의 전역변수를 미리 정의
  • latedef : 호출보다 늦게 정의된 변수를 금지 (호이스팅 방지)
  • lastsemic : 한 줄짜리 블록 코드에서 마지막 세미콜론이 없을 경우만 오류
  • loopfunc : 반복문 안에서 함수 정의 가능
  • maxerr : 총 보여줄 오류의 갯수
  • nocomma : comma 연산자 사용 금지
  • nonbsp : non-breaking whitespace 금지
  • node : 노드 환경 사용 가능
  • nonew : new 생성자 사용 불가
  • plusplus : 단항 증감연산자 사용 불가
  • regexdash : 정규식에서 대괄호 안에 escape 처리 되지 않은 대쉬(-) 가능
  • shadow : 변수 재선언 가능 (inner 또는 false, outer, true 로 설정)
  • strict : "use-strict" 선언이 없을시 오류
  • supernew : 잘못 작성한 생성자의 오류 표시 안함
  • trailing : 라인 끝의 불필요한 공백이 있으면 오류
  • undef : 선언되지 않은 변수 사용시 오류
  • unused : 선언이 되었으나 사용되지 않는 변수에 대해 오류
  • white : jshint 가 더글락스 크락포드의 코딩 스타일 가이드에 따라 코드를 검사
  • withstmt : with 구문 사용 가능
  • worker : Web Worker 사용 가능