02-2. 뷰(Vue) 개발자 도구 & VSCODE 확장 플러그인 설치하기

뷰 개발자 도구(뷰 크롬 플러그인)은 뷰로 개발할 때 도움을 주는 유용한 도구로, 뷰로 만든 웹 앱의 구조를 간편하게 디버깅하거나 분석할 수 있다.

1. Google에서 Vue.js devtools를 검색해서 크롬 플러그인 스토어로 이동하거나, https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd 에서 [Chorome에 추가]버튼을 클릭한다.

2. Vue.js devtools을(를) 추가하시겠습니까? 알럿이 뜨면 '확장 프로그램 추가' 버튼을 클릭한다.

VSCODE 확장 플러그인 목록

• Vue 3 : Volar
• 색 테마 : Night Owl
• 파일 아이콘 테마 : Material Icon Theme
• 뷰 확장 플러그인 : Vetur
• 뷰 코드 스니펫 : Vue VSCode Snippets
• 문법 검사 : ESLint, TSLint
• 실습 환경 보조 : Live Server
• 기타 : Prettier, Project Manager, Auto Close Tag, GitLens, Atom Keymap, Jetbrains IDE Keymap 등