[VS code] visual studio code 확장 목록

안녕하세요, Einere입니다.

(AD block을 꺼주시면 감사하겠습니다.)

---

오늘은 visual studio code의 제가 사용하는 확장들을 소개해볼까 합니다.

visual studio code는 가볍고 빠르며, 다양한 확장을 통해 유용한 기능을 추가하여 사용할 수 있는 편집기입니다.

저는 code를 웹용으로 사용하기 때문에, (html, css, js 등등...) 해당 언어 위주의 확장을 추천해드리겠습니다.

 

 

Version Control System

GitLens

git을 통한 버전관리를 쉽게 해주는 확장입니다.

당연히 해당 확장 설치 전에 git이 설치되어 있어야 합니다.

 

Code Formatting

Beautify

html, css, cass, javascript, json형식을 깔끔하게, 보기좋게 정리해주는 확장입니다.

기본 단축키는 "shift + alt + f" 입니다.

Vetur

vue와 관련된 여러가지 툴을 제공하는 확장입니다.

vue snippet과 formatting등을 지원합니다만.. vue2 snippet을 지원하지는 않는 것 같네요.

사실 저는 formatting에 사용합니다.

 

 

Lint

ESLint

너무나도 유명한 린트 툴입니다.

 

 

Code Snippet

JavaScript (ES6) code snippets

javascript (es6) code snippets입니다. 

참고로 snippet이란 코드조각이라는 뜻이며, "ctrl + space"로 사용할 수 있는 intellisense기능입니다.

정말 마음에 드는 것이, 최신 문법인 ECMAScript6(ECMAScript 2015)를 지원한다는 것입니다.

이제 var는 놓아주자구요..

 

Vue 2 Snippets

vue2 snippet확장입니다. 

 

PHP IntelliSense

php intellisense확장입니다.

 

 

Convenience

Auto Rename Tag

html에서 tag는 매우 중요합니다.

어차피 자동완성으로 태그를 치시겠지만, vue같은 경우 커스텀 tag를 사용할 일도 있습니다.

이런 경우, 여는 태그와 닫는 태그를 동시에 수정해주는 확장입니다.

 

Rainbow Brackets 

각종 괄호에 색상을 입혀주는 확장입니다.

javascript는 json처럼 객체를 표현하는 꺾은 괄호 {}를 자주 사용하게 됩니다. 따라서 괄호의 사용빈도가 잦다고 할 수 있습니다.

이 때, 짝이 되는 괄호를 강조해주며, 스크롤바 옆에도 표시를 해줍니다.

vim처럼 짝 괄호로 점프하는 기능은 없는듯 하네요.

 

 

Debugger

Debugger for Chrome

gdb에서 사용하는 변수 값 추적인 watch와, back trace, break point등등의 기능을 제공하는 확장입니다.

그런데 저는 한번도 안써봐서 잘 모르겟네요..ㅎㅎ

 

 

Theme

Monokai Pro

제가 좋아하는 테마입니다. 강추강추

 

 

Key Map

IntelliJ IDEA Keybindings

개인 노트북으로는 WebStorm을 쓰고 있지만, 회사에서는 라이센스 문제 때문에 사용하기 까다롭습니다. 설령 라이센스를 발급받아도 옛날버전만 사용가능하다던지 제약조건이 많은 편입니다. 그래서 보통 오픈소스인 VS Code를 사용하게 되었습니다.

VS Code에서도 IntelliJ계열 단축키들을 사용하시고 싶으신 분들에게 추천드립니다. (단, 지원되지 않는 단축키도 있으니, 해당 확장 설명 페이지에서 확인해주세요!)

 

 

※ 해당 포스트는 비정기적으로 업데이트 됩니다. :)