6. (VueJs) [Vue 3] - VSCode 확장 플러그인 (plugin) 종류 모음

---

[개발 환경 설정]

​

개발 툴 : VS CODE

개발 언어 : Vue Js

 

---

[종류 모음]

 

Extension	설 명
Vetur	코드 하이라이팅 지원, 문법 강조, 코드 자동 완성, 디버깅 등 지원
Vue 3 Snippets	스니펫을 이용하여 코드 자동 완성
Vue VSCode Snippets	Vue 코드 자동 완성 (문법 확인)
GitLens — Git supercharged	코드 변경된 부분 비교 확인
Debugger for Microsoft Edge	Edge 브라우저에서 디버깅 사용
EditorConfig for VS Code	코드 가독성을 위해 확장자 별 tab size (Indentation) 설정
ESlint	코드 작성시 문법 오류 및 버그 확인
Material Icon Theme	폴더 아이콘 디자인 적용
npm	node js 로 만들어진 package 를 관리해주는 도구, npm 을 통해 node.js로 만들어진 module을 웹에서 받아서 설치하고 package.json을 통해 관리
Prettier - Code formatter	사용자 편의에 맞게 구성된 확장 기능 , 자동 tab
Bracket Pair Colorizer	괄호를 시작 종료 구분해 색상 표시
Code Spell Checker	코드 내 철자 검사 (철자가 틀린 경우 밑줄 표시)
npm Intellisense	npm module을 import 할 때 자동완성 기능을 제공
Visual Studio IntelliCode	Python, Java, TypeScript, JavaScript 용 AI 자동 완성 제공

​

​

Extension	설 명
vscode-icons	VSCode 툴 안에서 파일명 앞에 아이콘 표시 (파일 가독성)
One Dark Pro	코드 작성 시 다크 테마 적용
Live Server	개발중인 html 페이지를 localhost에서 바로 보기 시 유용
Auto close Tag	Html 태그 작성 시 자동 완성 기능 제공
Korean Language Pack for Visual Studio Code	VSCode 툴의 한국어 지원 플러그인
Vue Peek	코드 작성 시 Vue 컴포넌트를 쉽게 찾을 수 있게함
JS-CSS-HTML Formatter	코드 자동 완성 기능 제공 (ctrl + space)
Prettier	코드 자동 정렬 기능 지원 (html 코드 작성 시 포맷 일정)
Atom Keymap	단축키 커스텀 설정 지원
Night Owl	VSCode 테마 설정 (파란색)

 

---

 

 

[참고 사이트]

​

https://marketplace.visualstudio.com/items?itemName=hollowtree.vue-pack

Vue 3 Pack - Visual Studio Marketplace

 

 

​

​

https://www.hanl.tech/blog/vs-code-%ED%95%84%EC%88%98-%ED%99%95%EC%9E%A5-%ED%94%84%EB%A1%9C%EA%B7%B8%EB%9E%A8/

유용한 VS Code 필수 확장 프로그램 - 하늘네트

---