[VSCode] Vue.js 개발을 위한 플러그인

VSCode의 많은 확장 플러그인 중 Vue.js 개발을 돕는 플러그인 추천 목록!

 

VSCode Vue.js 플러그인

• Indent-Rainbow : Tab 영역을 색상별로 다르게 표시하여 라인이 길어도 가독성을 높여 줌
• Auto Rename Tag : HTML 태그 이름을 변경하면 쌍을 이루는 여는/닫는 태그명을 실시간으로 함께 수정
• CSS Peek : HTML 문서에서 정의된 CSS를 빠르게 찾을 수 있도록 도움 (Ctrl + 클릭)
• HTMl to CSS autocompletion : HTML 문서에 선언된 클래스명을 .css 파일에서 입력할 때 자동완성 기능 제공
• HTML CSS Support : HTML 문서에서 CSS 자동 완성 이용
• Tailwind CSS IntelliSense : Tailwind CSS 관련 자동 완성 등의 기능을 제공하는 플러그인
• Tailwind Shades : Tailwind 색상 팔레트 자동 완성
• Material Icon Theme : 파일 탐색기에 파일 아이콘을 추가하여 가독성 제공
• Live Server : HTML 파일 수정 시 새로고침 없이 실시간 적용
• ESLint : JavaScript 코드 검사기. 코드에 에러가 있는지 검사해줌 

추가 설정 1) package.json에서 eslint 규칙을 recommended로 올려서 사용
* 가장 강한 코드 교정 규칙

"extends": [
      "plugin:vue/recommended",
      "eslint:recommended"
],

추가 설정 2) setting.json 수정
좌측 하단의 톱니바퀴(설정) 버튼 클릭 후 우측 상단의 open setting.json 클릭 후 해당 내용 추가
* 파일을 저장할 때마다 ESLint 규칙에 따라 코드 자동 교정

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

• Prettier : 프론트엔드 개발 필수 플러그인이라는데, 코드 포맷터로써 코드를 일관성 있고 예쁘게 작성하도록 돕는?
• Vue-Official : Vue 3용으로 특별히 제작된 언어 지원 플러그인
• Vetur : .vue 파일 코드 하이라이팅
• Vue VSCode Snippets : Vue.js 개발 필수 플러그인! vbase 입력-탭 시 .vue 파일 초기 구성 생성 가능 등등..

 

 

---

 

번외

Chrome 확장 앱 Vue.js devtools

Vue.js devtools - Chrome 웹 스토어