Visual Studio Code 유용한 익스텐션 모음집

익스텐션이란??

: 비주얼 스튜디오 코드에 추가적으로 설치할 수 있는 기능들

 

1.  Better Comments

: 주석을 더 잘보이게 해주고 몇 가지 색상 옵션을 추가해준다.

https://marketplace.visualstudio.com/items?itemName=aaron-bond.better-comments 

Better Comments - Visual Studio Marketplace

 

2. Error Lens

: 코드에 에러가 있을 경우 해당 줄에 오버레이 형식으로 띄워준다.

(오타, 괄호 실수, 라이브러리 미참조 등 웬만한 오류는 컴파일이나 런타임 전에 잡을 수 있다.)

https://marketplace.visualstudio.com/items?itemName=usernamehw.errorlens 

Error Lens - Visual Studio Marketplace

 

3. Bracket Pair Colorizer 2

: 괄호끼리 묶어서 다른 색상으로 칠해준다. 가독성 향상에 도움이 된다.

https://marketplace.visualstudio.com/items?itemName=CoenraadS.bracket-pair-colorizer-2 

Bracket Pair Colorizer 2 - Visual Studio Marketplace

 

(출처)

https://zvi975.tistory.com/81

범용성 최강 에디터, VS Code 확장프로그램 추천 #1

 

 

4. Auto Close Tag

: 자동으로 HTML 태그를 닫아주는 익스텐션, 시작 태그만 작성하면 닫히는 태그는 자동으로 만들어 줍니다.

https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-close-tag 

Auto Close Tag - Visual Studio Marketplace

 

5. Auto Rename Tag

: Auto Close Tag의 단짝 친구, table 시작 태그를 header 로 수정했을 때 닫히는 태그의 이름도 자동으로 바뀌는 것 보이시죠? 반대로, 닫히는 태그의 이름을 수정하면 시작 태그 이름도 같이 수정됩니다!

https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-rename-tag 

Auto Rename Tag - Visual Studio Marketplace

 

6. Highlight Matching Tag

: 페어 태그를 하이라이트 해줍니다. 중첩 되어 있거나 복잡한 태그 지옥을 분석 할 때 유용합니다.

https://marketplace.visualstudio.com/items?itemName=vincaslt.highlight-matching-tag 

Highlight Matching Tag - Visual Studio Marketplace

 

7. npm Intellisense

: 프로젝트가 커지다 보면 프로젝트에 추가되는 라이브러리들이 굉장히 많아지고, 코드를 작성하다 보면 내가 추가한 라이브러리의 이름이 가물가물할 때가 많습니다. 'rout...' 와 같이 react-router-dom 라이브러리의 이름 일부만 입력하면 package.json 파일의 dependencies 로 추가되어 있는 라이브러리 이름 중 매칭되는 라이브러리를 추천해주는 확장입니다. 예를 들어 react-bootstrap 의 경우 'rb' 만 입력해도 추천해줍니다!

https://marketplace.visualstudio.com/items?itemName=christian-kohler.npm-intellisense 

npm Intellisense - Visual Studio Marketplace

 

8. Prettier

: 코드 포맷터 입니다. ESLint의 경우 문법을 검사한다면, 프리티어의 경우 인덴트 width, trailing comma, single/double quote, semicolon 등 일관성 있는 코드를 작성할 수 있도록 해줍니다. .prettierrc 파일에 프로젝트 전반적으로 적용할 규칙을 정의한 후 설정 > format on Save 검색하여 체크해주면 파일을 수정 후 저장 시 .prettierrc 정의된 규칙에 맞게 포맷팅 됩니다. 협업 시 하나의 .prettierrc 설정을 공유하는 것은 필수라고 생각합니다. 개발자 A는 인덴트를 4칸, 개발자 B는 인덴트를 2칸 사용한다면 B가 작성한 코드를 A가 pull 받아서 수정한 후 수정 사항에 대한 PR 을 보낸다면...? 실제로 수정한 코드는 1줄일지라도 코드의 전체 인덴트가 수정되기 때문에 파일의 모든 코드가 변경사항으로 나타나게 되어 유의미한 변경 사항을 확인하기 어려워질 것입니다.

https://prettier.io/

Prettier · Opinionated Code Formatter

+ ESLint

https://velog.io/@jewoo/ESLint

ESLint

 

9. CSS Peek

: 자바스크립트 코드와 CSS 를 하나의 파일에서 관리하기도 하고, 분리하기도 합니다. 저는 분리하는 것을 선호하는데요, 리액트 컴포넌트나 html 태그에 style 속성을 적용하는 것보다 클래스를 선언하여 사용하려고 합니다. (재사용성을 위해..) 이렇게 분리하여 코드를 작성하다 보면, 어떤 CSS 클래스에 어떤 속성이 있는지 파악하기가 어렵습니다. 이 때 CSS Peek 확장을 설치한 후 Ctrl 키를 누른 상태로 속성을 확인하고자 하는 클래스 명을 클릭하면 해당 클래스의 정의로 이동합니다!

https://marketplace.visualstudio.com/items?itemName=pranaygp.vscode-css-peek 

CSS Peek - Visual Studio Marketplace

 

10. Korean Language Pack for Visual Studio Code

: 한국어 팩

https://marketplace.visualstudio.com/items?itemName=MS-CEINTL.vscode-language-pack-ko 

Korean(사용법) Language Pack for Visual Studio Code - Visual Studio Marketplace

 

+ 

비주얼 스튜디오 코드 확장프로그램(Extensions) 추천