在 Visual Studio Code 中使用 Vue

Name: Visual Studio Code
Author: Microsoft

Vue.js 是一個用於構建網頁應用程式與使用者介面的熱門 JavaScript 函式庫，Visual Studio Code 對 Vue.js 的建構基塊：HTML、CSS 和 JavaScript 提供內建支援。為了獲得更豐富的 Vue.js 開發環境，您可以安裝 Vue - Official (前身為 Volar) 擴充功能，以獲得 IntelliSense、TypeScript、格式化等功能的支援。

注意：Vue 2 的支援已於 2023 年 12 月 31 日結束，因此不建議繼續使用 Vetur 擴充功能。若要使用 Vue - Official 擴充功能，您需要停用 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 專案架構。請依照提示選擇選用功能，若不確定某個選項，可以選擇「No」。

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 - 官方擴充功能 (Vue - Official)

現在展開 src 資料夾並選取 App.vue 檔案。您會發現 VS Code 沒有顯示任何語法標示，並將該檔案視為純文字 (Plain Text)，如右下角狀態列所示。您也會看到一個通知，建議針對 .vue 檔案類型安裝 Vue - Official 擴充功能。

Vue 擴充功能為 VS Code 提供了 Vue.js 語言功能（語法標示、IntelliSense 與格式化）。

Vue - Official extension

在通知中，按下 Install (安裝) 以下載並安裝 Vue 擴充功能。您應該會在「擴充功能」檢視中看到 Vue 擴充功能正在 Installing (安裝中)。安裝完成後（可能需要幾分鐘），Install 按鈕將會變更為 Manage (管理) 齒輪按鈕。

現在您應該能看到 .vue 已被識別為 Vue.js 語言的檔案類型，並且您擁有語法標示、括號匹配與懸停說明等語言功能。

Vue language features

IntelliSense

當您開始在 App.vue 中輸入內容時，您會看到 HTML 與 CSS 的智慧建議或自動完成功能，也會看到 Vue.js 專屬項目的建議，例如 Vue template 區段中的宣告（v-bind、v-for）

Vue.js suggestions

以及 scripts 區段中像是 computed 這類的 Vue 屬性

Vue.js JavaScript suggestions

前往定義 (Go to Definition)、預覽定義 (Peek definition)

VS Code 中的 Vue - Official 擴充功能透過提供型別定義等語言服務功能，強化了 Vue.js 的開發體驗。您可以使用下列功能存取這些特性：

前往定義 (Go to Definition) (F12)：直接導覽至程式碼中的型別定義。
預覽定義 (Peek Definition) (⌥F12 (Windows Alt+F12, Linux Ctrl+Shift+F10))：在不離開當前視窗的情況下，直接內嵌檢視型別定義。

若要使用「預覽定義」，請按照以下步驟操作：

將游標放置在 App 上。
按滑鼠右鍵，將游標懸停在內容選單的 Peek (預覽) 上，並選取 Peek Definition (預覽定義)。
一個預覽視窗 (Peek window) 將會開啟，顯示來自 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 支援自動儲存 (Auto Save)，預設會在延遲一段時間後自動儲存檔案。勾選檔案選單中的自動儲存選項即可開啟此功能，或者直接設定 files.autoSave 使用者設定。

hello world

Linting

Lint 工具會分析您的原始程式碼，並在您執行應用程式之前發出潛在問題的警告。Vue ESLint 外掛 (eslint-plugin-vue) 會檢查 Vue.js 專屬的語法錯誤，這些錯誤會在編輯器中以紅色波浪線顯示，並出現在 Problems (問題) 面板中（View (檢視) > Problems (問題) ⇧⌘M (Windows, Linux Ctrl+Shift+M)）。

下方顯示當 Vue linter 偵測到樣板 (template) 中有多個根元素時所產生的錯誤：

Vue linting

偵錯

您可以使用內建的 JavaScript 除錯器對客戶端 Vue.js 程式碼進行除錯。請參考此討論串，了解如何使用 Microsoft Edge 在 VS Code 中對 Vite/Vue.js 3 專案進行除錯。

至於目前已進入維護模式的 Vue CLI，請參閱 VS Code 除錯 recipes (食譜) 網站上的在 VS Code 中進行 Vue.js 除錯指南以了解更多資訊。

另一個熱門的 Vue.js 除錯工具是 vue-devtools 外掛，無論在何種環境下皆可使用。

其他擴充功能

在「擴充功能」檢視 (⇧⌘X (Windows, Linux Ctrl+Shift+X)) 中搜尋 vue，以尋找其他 Vue 相關的擴充功能。
像是 Vue VS Code Snippets 這類擴充功能，對於使用 Vue 程式碼片段非常方便。
此外也有擴充功能套件 (Extension Packs)，其中捆綁了其他人認為對 Vue.js 開發很有用的擴充功能。

4/8/2026