![Vue.js 확장 프로그램](https://image.inblog.dev?url=https%3A%2F%2Finblog.ai%2Fapi%2Fog%3Ftitle%3DVue.js%2520%25ED%2599%2595%25EC%259E%25A5%2520%25ED%2594%2584%25EB%25A1%259C%25EA%25B7%25B8%25EB%259E%25A8%26logoUrl%3Dhttps%253A%252F%252Finblog.ai%252Finblog_logo.png%26blogTitle%3Dvosw1&w=2048&q=75)
1. Chrome 또는 Firefox 내 확장 프로그램 설치
![notion image](https://image.inblog.dev?url=https%3A%2F%2Fwww.notion.so%2Fimage%2Fhttps%253A%252F%252Fprod-files-secure.s3.us-west-2.amazonaws.com%252F8a47dc81-2a0f-4b7c-854a-6cd86ec3b678%252Fa780ade0-7631-4310-8d31-024b9efd81ba%252Fimage.png%3Ftable%3Dblock%26id%3D6c34614a-8251-46ee-a4a9-5aabdcca4d0a%26cache%3Dv2&w=2048&q=75)
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의 단일 파일 컴포넌트를 완벽하게 지원
![notion image](https://image.inblog.dev?url=https%3A%2F%2Fwww.notion.so%2Fimage%2Fhttps%253A%252F%252Fprod-files-secure.s3.us-west-2.amazonaws.com%252F8a47dc81-2a0f-4b7c-854a-6cd86ec3b678%252Fad71e737-50eb-455f-979d-f3597371e7a3%252Fimage.png%3Ftable%3Dblock%26id%3D041ec508-98d4-41a6-8ece-948b5d680d35%26cache%3Dv2&w=2048&q=75)
- HTML CSS Support
- HTML 파일이나 Vue 파일의 템플릿에서 CSS 관련 작업을 할 때 도움을 주는 확장 기능
- CSS 클래스 이름 자동 완성
- 자동으로 CSS 파일이나
<style>
블록 내에서 정의된 클래스 이름을 완성 - CSS 속성 자동 완성
- 인라인 스타일링이나 스타일 시트 작성 시 CSS 속성 및 값에 대한 자동 완성을 제공
- CSS 변수 지원
- CSS 변수(
-variable-name
)에 대한 자동 완성 및 참조 기능을 지원
![notion image](https://image.inblog.dev?url=https%3A%2F%2Fwww.notion.so%2Fimage%2Fhttps%253A%252F%252Fprod-files-secure.s3.us-west-2.amazonaws.com%252F8a47dc81-2a0f-4b7c-854a-6cd86ec3b678%252F6f50799d-ba99-42d7-8328-b6d23e6d2df8%252Fimage.png%3Ftable%3Dblock%26id%3D379f86e5-75be-4103-9c1c-82f24d57a474%26cache%3Dv2&w=2048&q=75)
- Vue 3 Snippets
- Vue 3 개발에 필요한 코드 스니펫(코드 조각)을 제공하는 확장 기능
- 반복적인 코드를 빠르게 작성 가능
- Vue 3 Composition API Snippets
ref
,reactive
,computed
등- Vue 3에서 새로 도입된 Composition API와 관련된 코드 스니펫을 제공
- 템플릿 및 스크립트 스니펫
- Vue 파일 내에서 자주 사용하는 템플릿, 스크립트, 스타일링 관련 코드 조각들을 빠르게 생성
- 다양한 Vue 기능 지원
v-if
,v-for
, 이벤트 핸들러 등 다양한 디렉티브와 기능을 쉽게 추가하는 스니펫을 제공
![notion image](https://image.inblog.dev?url=https%3A%2F%2Fwww.notion.so%2Fimage%2Fhttps%253A%252F%252Fprod-files-secure.s3.us-west-2.amazonaws.com%252F8a47dc81-2a0f-4b7c-854a-6cd86ec3b678%252F6ad2b803-a7ab-46e5-ac79-70e741bd63c7%252Fimage.png%3Ftable%3Dblock%26id%3D5ec2ce23-553a-4498-80a6-9a9571cd4287%26cache%3Dv2&w=2048&q=75)
Share article