← 返回首页
Using Vue in Visual Studio Code
Visual Studio Code
Download

📼 Rewatch VS Code Live at MS Build 2026

All Docs

Languages

Topics Overview JavaScript JSON HTML Emmet CSS, SCSS and Less TypeScript Markdown PowerShell C++ Java PHP Python Julia R Ruby Rust Go T-SQL C# .NET Swift Working with JavaScript Node.js Tutorial Node.js Debugging Deploy Node.js Apps Browser Debugging Angular Tutorial React Tutorial Vue Tutorial Debugging Recipes Performance Profiling Extensions Tutorial Transpiling Editing Refactoring Debugging Quick Start Tutorial Run Python Code Editing Linting Formatting Debugging Environments Testing Python Interactive Django Tutorial FastAPI Tutorial Flask Tutorial Create Containers Deploy Python Apps Python in the Web Settings Reference Getting Started Navigate and Edit Refactoring Formatting and Linting Project Management Build Tools Run and Debug Testing Spring Boot Modernizing Java Apps Application Servers Deploy Java Apps GUI Applications Extensions FAQ Intro Videos GCC on Linux GCC on Windows GCC on Windows Subsystem for Linux Clang on macOS Microsoft C++ on Windows Build with CMake CMake Tools on Linux CMake Quick Start C++ Dev Tools for Copilot Editing and Navigating Debugging Configure Debugging Refactoring Settings Reference Configure IntelliSense Configure IntelliSense for Cross-Compiling FAQ Intro Videos Get Started Navigate and Edit IntelliCode Refactoring Formatting and Linting Project Management Build Tools Package Management Run and Debug Testing FAQ
Copy as Markdown

On this page there are 7 sections

Using Vue in Visual Studio Code

Vue.js is a popular JavaScript library for building web applications and user interfaces, and Visual Studio Code has built-in support for the Vue.js building blocks of HTML, CSS, and JavaScript. For a richer Vue.js development environment, you can install the Vue - Official (previously Volar) extension to have support for IntelliSense, TypeScript, formatting, and more.

Note: Vue 2 support ended on December 31st, 2023, so the use of the Vetur extension is not recommended. You will need to disable Vetur to use the Vue - Official extension.

Welcome to Vue

We'll be using the Vite tooling for this tutorial. If you are new to the Vue.js framework, you can find great documentation and tutorials on the vuejs.org website.

To install and use Vite and Vue.js, you'll need the Node.js JavaScript runtime and npm (the Node.js package manager) installed. npm is included with Node.js, which you can install from Node.js downloads.

Tip: To test that you have Node.js and npm correctly installed on your machine, you can type node --version and npm --version.

To get started, make sure you are in the parent directory where you intend to create a project. Then open your terminal or command prompt and type:

cd <your-project-name> npm install

Let's quickly run our Vue application by typing npm run dev to start the web server and open the application in a browser:

cd vue-project code .

VS Code will launch and display your Vue application in the File Explorer.

Vue - Official extension

Now expand the src folder and select the App.vue file. You'll notice that VS Code doesn't show any syntax highlighting and it treats the file as Plain Text as you can see in the lower right Status Bar. You'll also see a notification recommending the Vue - Official extension for the .vue file type.

The Vue extension supplies Vue.js language features (syntax highlighting, IntelliSense, and formatting) to VS Code.

From the notification, press Install to download and install the Vue extension. You should see the Vue extension Installing in the Extensions view. Once the installation is complete (may take several minutes), the Install button changes to the Manage gear button.

You should now see that .vue is a recognized file type for the Vue.js language and you have language features such as syntax highlighting, bracket matching, and hover descriptions.

IntelliSense

As you start typing in App.vue, you'll see smart suggestions or completions both for HTML and CSS but also for Vue.js specific items like declarations (v-bind, v-for) in the Vue template section:

and Vue properties such as computed in the scripts section:

Go to Definition, Peek definition

The Vue - Official extension in VS Code enhances the Vue.js development experience by providing language service features such as type definitions. You can access these features using:

  • Go to Definition (F12): Navigate directly to the type definition in your code.
  • Peek Definition (⌥F12 (Windows Alt+F12, Linux Ctrl+Shift+F10)): View the type definition inline without leaving your current context.

To use Peek Definition, follow these steps:

  1. Place the cursor over App.
  2. Right-click, hover over Peek in the context menu, and select Peek Definition.
  3. A Peek window will open, displaying the App definition from App.js.

Press Escape to close the Peek window.

Hello World

Let's update the sample application to render "Hello World!". In App.vue replace the HelloWorld component msg custom attribute text with "Hello World!".