자주 사용하는 VSCODE 확장 플러그인

들어가기 전에

지금까지 editplus를 사용해왔다. 이제는 손에 익어서 별 불만 없었는데, 대세(?)가 vscode이다 보니 나도 사용해봤다.

VSCode 자체의 설정이나 플러그인의 설정 방법은 좀 귀찮다. 피씨에 설정 해놓으면, 상관없으나 다른 피씨를 사용해야 할 경우는 플러그인이 없으면 답답해진다. 또 설정을 동일하게 해도 무슨 이유인지 플러그인 작동이 안 된다거나 엉뚱한 결과가 나오곤 한다. 특히 Formatter 계열 플러그인들은 동일하게 설치를 해도 어떤 상황에서는 다르게 작동하곤 한다.

아직 파야할 것이 많은 듯 하다.

여기서는 가장 유용하게 사용하는 플러그인을 기록한다.

 

Bracket Pair Colorizer 2

괄호의 쌍을 표시해준다. 시작 괄호는 상관없겠지만 닫기 괄호는 아무리 indent를 잘해도 "이게 어디 괄호지?" 할 때가 있다. Ctrl+Shift+[ 로 코드를 닫아서 확인할 수도 있지만 괄호의 쌍을 선으로 표시해주니 눈으로 확인하기 좋다.

설치 페이지

 

indent-rainbow

프로그래밍 역사상 끊임없이 논쟁하고 있는 들여 쓰기, 탭이냐 스페이스냐는 이 플러그인과는 상관없다.

다만 설정된 들여 쓰기에 따라 무지개색으로 잘 표현해줘서 코드 가시성이 좋다.

설치 페이지

 

toggle semicolon

세미콜론(;), 콜론(:), 콤마(,) 이 3형제는 어떤 언어에서는 오류도 많이 일으키고 코딩에도 손이 많이 가는 녀석들이다.

이 플러그인을 설치하고 Ctrl+; 하면 자동으로 마지막에 세미콜론을 입력해준다. Ctrl+Shift+; 하면 세미콜론을 삭제하다.

콜론, 콤마도 마찬가지이고 Ctrl+Enter 와 조합하면 참 편리하다.

다만 처음 설치한다면 "Open keyboard shortcuts(JSON)"에 아래 코드를 추가해줘야 한다.

[
{ "key": "ctrl+;",   "command": "extension.toggleSemicolon", "when": "editorTextFocus" },
{ "key": "ctrl+shift+;",   "command": "extension.toggleColon", "when": "editorTextFocus" },
{ "key": "ctrl+,",   "command": "extension.toggleComma", "when": "editorTextFocus" }
]

설치 페이지

Auto Close Tag

이름 그대로 HTML의 종료 태그를 자동으로 입력해준다.

설치 페이지

Auto Rename Tag

열고 닫는, 쌍을 이루는 HTML의 태그명을 수정할 때 앞뒤 모두 자동으로 변경해주는 플러그인이다.

설치 페이지

Insert < br > Tag

그냥 이름 그대로 <BR> 태그를 입력해주는 것인데 Shift+Enter 하면 <br>이 입력된다.

HTML5 형식으로 <br />을 입력하려면 "Settings > Insert-br-tag: Trailing Slash Language"의 json에 html을 추가하면 된다.

설치 페이지

HTML End Tag Labels

이 플러그인은 정말 스파게티 HTML 코드를 볼 때, 좀 유용하다. 별 설명 없이 플러그인 페이지에서 확인해보면 된다.

설치 페이지

 

그런데...

이 플러그인을 VSCode 에서는 Extensions 이라 표기 하고 있다. 둘다 맞는 말이긴 한데, "확장팩"? 아니면 그냥 "익스텐션"이라 하지 않고 대부분 사람들은 플러그인이라 할까?