[Vue.js] Vue.js 개발을 위한 필수 VSCode 플러그인 추천

Vue.js로 개발할 때, 효율성을 극대화하고 생산성을 높이기 위해서는 적절한 개발 도구와 플러그인을 사용하는 것이 중요합니다.

특히, Visual Studio Code(VSCode)는 Vue.js 개발에 최적화된 다양한 플러그인을 제공하여 개발자들이 더 편리하게 작업할 수 있도록 도와주는데요.

이 글에서는 Vue.js 개발 환경을 더욱 강력하게 만들어줄 VSCode 플러그인들을 소개하고, 각 플러그인의 주요 기능과 설치 방법을 설명하겠습니다. 이를 통해 여러분의 개발 경험을 한층 더 향상시킬 수 있을 것입니다!

 

 

 

 

VSCode Plugins 설치

---

 

HTML/CSS 마크업 (코드 입력) 을 도와주는 확장 프로그램을 설치해보도록 하겠습니다.

확장 프로그램들은 우리가 코딩을 할 때, 더 효율적으로 작업 할 수 있게 도와주니, 처음 세팅할때 기본적으로 적용하고 가면 좋을 것 입니다.

 

Korean Language Pack

: visual studio code tool 을 '한국어'로 사용할 수 있다.

• 설치 후 설정에서 언어를 '한국어'로 선택하면 적용된다.

 

Indent-Rainbow

: tab 영역을 컬러별로 표시하여 코드라인이 길어졌을 때 읽기 편하게 한다.

 

 

Auto Rename Tag

: HTML Tag 에서 태그 이름을 바꾸면 쌍을 이루는 여느태그 또는 닫느태그 명도 함께 바꿔준다.

 

 

Auto Close Tag

: 자동으로 닫는 태그를 추가해준다.

 

 

CSS Peek

: HTML 문서에서 정의된 CSS 를 금방 찾을 수 있도록 도와준다. 

• ctrl + 클릭 시 선언한 곳으로 이동

 

HTML to CSS autocompletion

: HTML 문서에 선언된 class 명을 .css 파일에서 입력할 때 자동완성 기능을 제공한다.

 

 

HTML CSS Support

: HTML 문서에서 CSS 의 자동완성을 이용할 수 있다.

 

 

Live Server

: HTML 파일 수정 시 새로고침 없이 바로 즉각 적용되도록 도와준다.

 

 

ESLint

: 코드 검사기로써 에러 판단, 검사해주는 도구

• 자동 수정 기능: VSCode 설정에서 eslint.codeActionsOnSave를 활성화하면, 코드 저장 시 ESLint가 설정된 규칙에 따라 자동으로 문제를 수정합니다.

 

Prettier - Code Formatter

: 코드 포멧터로써 코드를 일관성있고 예쁘게 작성할 수 있도록 도와주는 도구

• VSCode 설정에서 editor.formatOnSave: true로 설정하면, 저장할 때 자동으로 코드가 포맷팅됩니다.

 

Vue - Offitial

: Vue.js 공식 확장 프로그램으로, Vue 파일 구조(템플릿, 스크립트, 스타일 구역)를 올바르게 인식하여 코드 작성을 효과적으로 할 수 있도록 지원합니다.

• 구문 강조, 코드 자동 완성, Linting(코드 스타일 검사) 등을 제공하여 Vue.js 개발 생산성을 높여줍니다.

 

Vue-Official ( vue 공식 확장 프로그램 ) 

 

을 설치하면 됩니다.

• Volar Extension + TypeScript Vue Plugin 설치 x
• 💡 Volar 는 Vue2 용 공식 VSCode Extension 인 Vetur 를 대체합니다. 현재 Vetur 가 설치되어 있는 경우 Vue3 프로젝트에서 비활성화해야 합니다. 

 

 

 

 

 

 

 

Chrome 브라우저의 확장 프로그램

---

Vue.js 애플리케이션 디버깅을 위한 Chrome 브라우저의 확장 프로그램입니다. ( vue3 지원 다운로드 )

 

 

 

https://chromewebstore.google.com/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd

Vue.js devtools