1. Chrome 또는 Firefox 내 확장 프로그램 설치
2. VS Code 내 확장 프로그램 설치
- Vetur
- Vue.js 개발을 위한 VS Code의 대표적인 확장 기능
- 구문 강조(Syntax Highlighting)
- Vue 파일(.vue) 내의 HTML, CSS, JavaScript 코드에 대해 구문 강조
- 자동 완성(Auto Completion)
- Vue 코드 작성 시 속성, 태그, 디렉티브 등의 자동 완성을 지원
- Linter와 Formatter
- 코드 품질을 유지하기 위한 Linting(코드 오류 및 스타일 문제 감지)과 자동 포맷팅을 제공
- Emmet 지원
- Vue 템플릿에서 Emmet(코드 축약) 기능 사용
- 단일 파일 컴포넌트(SFC) 지원
- .vue 파일 내에서 HTML, CSS, JavaScript를 함께 사용하는 Vue의 단일 파일 컴포넌트를 완벽하게 지원
- HTML CSS Support
- HTML 파일이나 Vue 파일의 템플릿에서 CSS 관련 작업을 할 때 도움을 주는 확장 기능
- CSS 클래스 이름 자동 완성
- 자동으로 CSS 파일이나
<style>블록 내에서 정의된 클래스 이름을 완성 - CSS 속성 자동 완성
- 인라인 스타일링이나 스타일 시트 작성 시 CSS 속성 및 값에 대한 자동 완성을 제공
- CSS 변수 지원
- CSS 변수(
-variable-name)에 대한 자동 완성 및 참조 기능을 지원
- Vue 3 Snippets
- Vue 3 개발에 필요한 코드 스니펫(코드 조각)을 제공하는 확장 기능
- 반복적인 코드를 빠르게 작성 가능
- Vue 3 Composition API Snippets
ref,reactive,computed등- Vue 3에서 새로 도입된 Composition API와 관련된 코드 스니펫을 제공
- 템플릿 및 스크립트 스니펫
- Vue 파일 내에서 자주 사용하는 템플릿, 스크립트, 스타일링 관련 코드 조각들을 빠르게 생성
- 다양한 Vue 기능 지원
v-if,v-for, 이벤트 핸들러 등 다양한 디렉티브와 기능을 쉽게 추가하는 스니펫을 제공
Share article