Developing Vue with VSCode

Visual Studio Code (VS Code) is a free, open-source code editor developed by Microsoft that supports multiple programming languages and provides features such as syntax highlighting, intelligent code completion, code refactoring, and debugging.

Visual Studio Code has built-in support for Vue.js's core building blocks: HTML, CSS, and JavaScript.

VS Code has a built-in terminal that allows you to run command-line tools such as npm and yarn directly in the editor, making project building and management convenient.

If you want a richer Vue.js development environment, you can install the Volar and Volar for TypeScript extensions, which provide IntelliSense for Vue.js.

If you don't yet know VS Code or haven't installed it, you can refer to:VSCode Tutorial。

---

Create Vue Project

Open a terminal or command prompt and enter the following command:

npm create vue@latest 

The system will prompt you to enter a project name. Here I enterexample-vue3-app：

Vue.js - The Progressive JavaScript Framework

? 请输入项目名称： › example-vue3-app

After that, there will be some options. You can choose according to your needs, or just press Enter all the way:

Vue.js - The Progressive JavaScript Framework

> 请输入项目名称： … example-vue3-app
> 是否使用 TypeScript 语法？ … 否 / 是
> 是否启用 JSX 支持？ … 否 / 是
> 是否引入 Vue Router 进行单页面应用开发？ … 否 / 是
> 是否引入 Pinia 用于状态管理？ … 否 / 是
> 是否引入 Vitest 用于单元测试？ … 否 / 是
> 是否要引入一款端到端（End to End）测试工具？ › 不需要
> 是否引入 ESLint 用于代码质量检测？ › 否

正在初始化项目 /Users/tianqixin/example-vue3-app...

项目初始化完成，可执行以下命令：

  cd example-vue3-app
  npm install
  npm run dev

After the project is created, enter the project folder and install dependencies:

cd example-vue3-app
npm install

Installing dependencies may also take a few minutes.

Enter the following command to quickly start your Vue app:

npm run dev

Open http://localhost:5173 in the browser, and it displays as follows:

Press Ctrl+C to stop the vue-cli-service server.

---

Open Vue Project in VS Code

From the terminal or command prompt, go into the Vue project folder we created, example-vue3-app, and then usecodecommand to open the project in VS Code:

cd example-vue3-app
code .

VS Code will start and display your Vue project in the file explorer, as shown below:

Next, expand the src folder and select the App.vue file. The status bar in the bottom right corner will also prompt you to install the Vue - Official extension to support .vue files:

Just choose to install it.

After installation, .vue files are recognized as Vue.js file types and support the following language features:

• Syntax highlighting
• Bracket matching
• Hover description

IntelliSense

When entering code in App.vue, you will see IntelliSense for HTML, CSS, and Vue.js-specific syntax (such as v-bind, v-for).

In the script section, you can also see Vue.js-related JavaScript feature hints, such as the computed property.

Go to Definition, Peek Definition

Through the installed Volar extension, VS Code supports the Vue.js language service.

Place the cursor on App, right-click and select Peek Definition to view definition information, or press the shortcut key⌥F12。

You will see a popup window displaying App's definition information.

PressEsckey to close the Peek window.

Modify and Run "Hello World"

In App.vue, replace the text of the msg custom attribute of the HelloWorld component with "Hello World!":

Save the App.vue file (shortcut key⌘SorCtrl+S), then restart the server with the following command:

npm run dev

In the browser, you will see the page display "Hello World!".

---

More Related Tools

Other Extensions