VSCode를 주력 에디터로 사용하는 프론트엔드 개발자를 위한 익스텐션(Extension)을 추천합니다.
Visual Studio Code를 주력으로 사용하는 개발자를 위한 익스텐션 몇 가지를 추천합니다. React, Vue관련 익스텐션, 모든 분야와 상관없이 추천하는 익스텐션을 소목차로 나눠 정리해두었습니다.
적절한 익스텐션을 사용하면 개발 생산성이 올라가니 설명을 보시고, 익스텐션을 잘 조합하여 생산성을 올려봅시다.
이 외에도 추천할만한 익스텐션이 있다면 댓글을 달아주세요.
React, Vue 상관없이 추천하는 익스텐션
Auto Close Tag
여는 태그를 만들면, 닫는 태그를 자동으로 생성해줍니다.
VS Code 1.16버전부터 HTML, Handbars등의 태그 자동 닫기를 지원해주긴 하나 XML, PHP, Vue, JavaScript, JSX등은 지원하지 않기 때문에 이 플러그인을 설치하고 사용하면 좋습니다.
Visual Studio Marketplace 링크: https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-close-tag
Bracket Pair Colorizer
(2021년 9월 3일 업데이트) 1.6.0버전에서 내장 기능이 개발되어 이 플러그인은 더 이상 사용하지 않아도 됩니다.
“editor.bracketPairColorization.enabled”: true
여는 대괄호와 닫는 대괄호를 같은 색으로 표시해줍니다. 블록 Depth가 깊을 때 유용합니다.
Visual Studio Marketplace 링크: https://marketplace.visualstudio.com/items?itemName=CoenraadS.bracket-pair-colorizer
Auto Rename Tag
마크업 앞 혹은 뒤를 수정하면 그에 대응하는 마크업 뒤 혹은 앞을 자동으로 수정해줍니다.
Visual Studio Marketplace 링크: https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-rename-tag
Prettier — Code formatter
널리 쓰이는 code formatter로, 선호하는 포맷에 따라 커스터마이징 해 사용할 수 있습니다.
Visual Studio Marketplace 링크: https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode
아래는 정말 많은 개발자가 사용하고있는 익스텐션, 주위 개발자분들이 추천해주시는 익스텐션을 추려놓은 목록입니다.
- Prettier
- Eslint
- Stylelint
- GitLens
- Git history
- Setting Sync
- Bracket Pair Coloriser 2
- Auto Close Tag
- Auto Rename
- Auto Import
- Import Cost
- Jumpy
- ES6 Snippets
- i18n Ally
- Formatting toggle
- npm intellisense
- Web Accessibility
- Live Share
- Better comments
- Markdownlint
- Docker
- Remote-SSH
- Remote-WSL
- Live Server
React용 익스텐션
ES7 React/Redux/GraphQL/React-Native snippets
자주 쓰이는 Snippet들을 단축키로 간단히 생성할 수 있게 해줍니다.
Visual Studio Marketplace 링크: https://marketplace.visualstudio.com/items?itemName=dsznajder.es7-react-js-snippets
Vue용 익스텐션
Vetur
vue 파일의 syntax-highlighting을 지원합니다. Vue 개발자에게 필수 플러그인입니다.
Visual Studio Marketplace 링크: https://marketplace.visualstudio.com/items?itemName=octref.vetur
Vue 3 Snippet 또는 Vue VSCode Snippets
빠르게 코드 스니펫(코드 도막)을 제공해주는 플러그인들입니다.
Vue 3 Snippet, Visual Studio Marketplace 링크: https://marketplace.visualstudio.com/items?itemName=hollowtree.vue-snippets
Vue VSCode Snippets, Visual Studio Marketplace 링크: https://marketplace.visualstudio.com/items?itemName=sdras.vue-vscode-snippets
Vue Peek
컴포넌트가 정의된곳으로 넘어가거나, 해당 컴포넌트를 별도 탭에서 보여주는 플러그인입니다.
Visual Studio Marketplace 링크: https://marketplace.visualstudio.com/items?itemName=dariofuzinato.vue-peek
