Vue.js 확장 프로그램

1. Chrome 또는 Firefox 내 확장 프로그램 설치

Vue.js devtools - Chrome Web Store

Browser DevTools extension for debugging Vue.js applications.

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

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, 이벤트 핸들러 등 다양한 디렉티브와 기능을 쉽게 추가하는 스니펫을 제공