Vue.js 개발 환경 구성(VSCode, 크롬 확장)

VSCode 플러그인 설치

 

1. 한국어 언어팩: VSCode 한국어 지원

 

 

2. indent-rainbow: 탭 가독성 향상에 도움

 

 

3. Auto Rename Tag: html 태그명 변경 시 열고 닫는 태그명을 함께 바꿔줌

 

 

4. CSS Peek: html에서 사용된 클래스가 CSS 중 어디에서 사용됐는지 추적이 쉽게 해줌(cmd + 클릭)

 

 

5. HTML to CSS autocompletion: CSS에서 클래스 작성할 때 자동완성 지원

 

6. HTML CSS Support: HTML에서 클래스 작성할 때 자동완성 지원

 

 

7. Live Server: 코드가 변경되었을 때 브라우저에 자동 반영(dev server)

 

 

8. ESLint: 작성한 코드에 오류가 있는지 확인해줌

 

 

9. Vue Language Features (Volar): Vue 3.0을 위한 .vue 파일 하이라이팅 지원

 

 

10. Vue VSCode Snippets: 처음에 SFC를 빠르게 타이핑하게 해주는 플러그인

 

---

VSCode ESLint 설정

 

'CMD + 콤마' > Settings > eslint 검색 > Eslint: Validate 항목 수정

 

 

아래 항목 추가

 

...
"eslint.validate": [
  "javascript",
  "javascriptreact",
  "typescript",
  "typescriptreact",
  "html",
  "vue",
  "markdown",
],
"editor.codeActionsOnSave": {
  "source.fixAll.eslint": true,
},
...

---

크롬 웹스토어 확장 설치

1. Vue.js Devtools