Visual Studio Code에서 Vue 사용하기

Name: Visual Studio Code
Author: Microsoft

Vue.js는 웹 애플리케이션 및 사용자 인터페이스 구축을 위한 인기 있는 JavaScript 라이브러리이며, Visual Studio Code는 HTML, CSS, JavaScript의 Vue.js 빌딩 블록에 대한 내장 지원을 제공합니다. 더 풍부한 Vue.js 개발 환경을 위해 IntelliSense, TypeScript, 서식 지정 등을 지원하는 Vue - 공식 (이전 Volar) 확장 프로그램을 설치할 수 있습니다.

참고: Vue 2 지원이 2023년 12월 31일에 종료되었으므로 Vetur 확장 프로그램 사용은 권장되지 않습니다. Vue - 공식 확장 프로그램을 사용하려면 Vetur을 비활성화해야 합니다.

welcome to Vue

Vue에 오신 것을 환영합니다

이 튜토리얼에서는 Vite 도구를 사용합니다. Vue.js 프레임워크가 처음이라면 vuejs.org 웹사이트에서 훌륭한 문서와 튜토리얼을 찾을 수 있습니다.

Vite와 Vue.js를 설치하고 사용하려면 Node.js JavaScript 런타임과 npm(Node.js 패키지 관리자)이 설치되어 있어야 합니다. npm은 Node.js와 함께 제공되며, Node.js 다운로드에서 설치할 수 있습니다.

팁: Node.js와 npm이 올바르게 설치되었는지 확인하려면 node --version 및 npm --version을 입력할 수 있습니다.

시작하려면 프로젝트를 생성하려는 상위 디렉토리에 있는지 확인하십시오. 그런 다음 터미널 또는 명령 프롬프트를 열고 다음을 입력합니다.

npm create vue@latest

create-vue를 설치하라는 메시지가 표시됩니다.

Create vue

create-vue를 설치하고 실행하는 데 몇 분이 걸릴 수 있으며, 이는 Vue 프로젝트를 스캐폴딩하는 데 도움이 됩니다. 선택적 기능에 대한 프롬프트를 따르십시오. 옵션에 대해 확실하지 않은 경우 "아니요"를 선택할 수 있습니다.

Vue app scaffolding

프로젝트가 생성되면 해당 프로젝트로 이동하여 종속성을 설치합니다. 종속성을 설치하는 데 몇 분이 걸릴 수 있습니다.

cd <your-project-name>
npm install

웹 서버를 시작하고 브라우저에서 애플리케이션을 열기 위해 npm run dev를 입력하여 Vue 애플리케이션을 빠르게 실행해 봅시다.

npm run dev

브라우저에서 https://:5173에 "Welcome to your Vue.js App"이 표시되어야 합니다.

VS Code에서 Vue 애플리케이션을 열려면 터미널(또는 명령 프롬프트)에서 vue-project 폴더로 이동한 다음 code .를 입력합니다.

cd vue-project
code .

VS Code가 시작되고 파일 탐색기에서 Vue 애플리케이션을 표시합니다.

Vue - 공식 확장 프로그램

이제 src 폴더를 확장하고 App.vue 파일을 선택합니다. VS Code가 구문 강조 표시를 제공하지 않고 파일을 일반 텍스트로 처리하는 것을 볼 수 있습니다. 이는 오른쪽 하단 상태 표시줄에서 확인할 수 있습니다. 또한 .vue 파일 형식에 대한 Vue - 공식 확장 프로그램을 권장하는 알림도 표시됩니다.

Vue 확장 프로그램은 VS Code에 Vue.js 언어 기능(구문 강조 표시, IntelliSense 및 서식 지정)을 제공합니다.

Vue - Official extension

알림에서 설치를 눌러 Vue 확장 프로그램을 다운로드하고 설치합니다. 확장 프로그램 보기에서 Vue 확장 프로그램이 **설치 중**임을 볼 수 있습니다. 설치가 완료되면(몇 분이 걸릴 수 있음) 설치 버튼이 관리 톱니바퀴 버튼으로 변경됩니다.

이제 .vue가 Vue.js 언어에 대한 인식된 파일 형식이며 구문 강조 표시, 괄호 일치 및 호버 설명과 같은 언어 기능이 있음을 볼 수 있습니다.

Vue language features

IntelliSense

App.vue에 입력하기 시작하면 HTML 및 CSS뿐만 아니라 Vue template 섹션의 선언(v-bind, v-for)과 같은 Vue.js 특정 항목에 대한 스마트 제안 또는 자동 완성 기능을 볼 수 있습니다.

Vue.js suggestions

및 scripts 섹션의 computed와 같은 Vue 속성.

Vue.js JavaScript suggestions

정의로 이동, 정의 미리보기

VS Code의 Vue - 공식 확장 프로그램은 형식 정의와 같은 언어 서비스 기능을 제공하여 Vue.js 개발 환경을 향상시킵니다. 다음을 사용하여 이러한 기능에 액세스할 수 있습니다.

정의로 이동 (F12): 코드에서 형식 정의로 직접 이동합니다.
정의 미리 보기 (⌥F12 (Windows Alt+F12, Linux Ctrl+Shift+F10)): 현재 컨텍스트를 벗어나지 않고 인라인으로 형식 정의를 봅니다.

정의 미리 보기를 사용하려면 다음 단계를 따르십시오.

App 위에 커서를 놓습니다.
마우스 오른쪽 버튼을 클릭하고 컨텍스트 메뉴에서 미리 보기로 이동한 다음 정의 미리 보기를 선택합니다.
App.js의 App 정의를 표시하는 미리 보기 창이 열립니다.

Vue.js peek definition

미리보기 창을 닫으려면 Escape 키를 누릅니다.

Hello World

샘플 애플리케이션을 업데이트하여 "Hello World!"를 렌더링해 보겠습니다. App.vue에서 HelloWorld 구성 요소의 msg 사용자 지정 특성 텍스트를 "Hello World!"로 바꿉니다.

<template>
  <header>
    <img alt="Vue logo" class="logo" src="./assets/logo.svg" width="125" height="125" />

    <div class="wrapper">
      <HelloWorld msg="Hello World!" />
    </div>
  </header>

  <main>
    <TheWelcome />
  </main>
</template>

App.vue 파일을 저장하면(⌘S (Windows, Linux Ctrl+S)) Vite의 핫 모듈 교체(HMR) 기능이 브라우저에서 업데이트를 즉시 반영하고 "Hello World!"가 표시됩니다. Vue.js 클라이언트 측 디버깅에 대해 배우는 동안 서버를 계속 실행하십시오.

팁: VS Code는 기본적으로 일정 시간 후에 파일을 저장하는 자동 저장 기능을 지원합니다. 파일 메뉴에서 **자동 저장** 옵션을 확인하여 자동 저장을 켜거나 files.autoSave 사용자 설정을 직접 구성하십시오.

hello world

린팅

린터는 소스 코드를 분석하여 애플리케이션을 실행하기 전에 잠재적인 문제를 경고할 수 있습니다. Vue ESLint 플러그인(eslint-plugin-vue)은 Vue.js 특정 구문 오류를 확인하며, 이는 편집기에서 빨간색 물결선으로 표시되고 **문제** 패널(보기 > 문제 ⇧⌘M (Windows, Linux Ctrl+Shift+M))에도 표시됩니다.

아래는 Vue 린터가 템플릿에 둘 이상의 루트 요소가 있는 경우 발생하는 오류입니다.

Vue linting

디버깅

내장 JavaScript 디버거를 사용하여 클라이언트 측 Vue.js 코드를 디버그할 수 있습니다. VS Code를 사용하여 Vite/Vue.js 3 프로젝트를 Microsoft Edge와 함께 사용하려면 이 대화를 따르십시오.

현재 유지 관리 모드인 Vue CLI의 경우 VS Code 디버깅 레시피 사이트의 VS Code에서 Vue.js 디버깅 레시피를 참조하여 자세히 알아보십시오.

Vue.js 디버깅을 위한 또 다른 인기 있는 도구는 환경에 관계없이 사용할 수 있는 vue-devtools 플러그인입니다.

기타 확장 프로그램

확장 프로그램 보기(⇧⌘X (Windows, Linux Ctrl+Shift+X))에서 vue를 입력하여 다른 Vue 확장 프로그램을 검색합니다.
Vue VS Code Snippets와 같은 확장 프로그램은 Vue 스니펫에 유용할 수 있습니다.
다른 사람들이 Vue.js 개발에 유용하다고 생각하는 확장 프로그램을 번들로 제공하는 확장 프로그램 팩도 있습니다.

12/10/2025