🚀 在 VS Code 中！

在 Visual Studio Code 中使用 Vue

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

注意：Vue 2 支援已於 2023 年 12 月 31 日終止，因此Vetur 擴充功能不建議使用。您需要停用 Vetur 才能使用 Vue - Official 擴充功能。

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。

提示：若要測試您是否已正確地在機器上安裝 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

讓我們快速執行 Vue 應用程式，輸入 npm run dev 以啟動 Web 伺服器，並在瀏覽器中開啟應用程式

npm run dev

您應該會在瀏覽器中的 https://127.0.0.1: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 - Official 擴充功能用於 .vue 檔案類型。

Vue 擴充功能為 VS Code 提供 Vue.js 語言功能 (語法醒目提示、IntelliSense 和格式化)。

Vue - Official extension

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

您現在應該會看到 .vue 是 Vue.js 語言的已辨識檔案類型，並且您擁有語言功能，例如語法醒目提示、括號比對和hover 描述。

Vue language features

IntelliSense

當您開始在 App.vue 中輸入時，您會看到 HTML 和 CSS 的智慧建議或完成，以及 Vue template 區段中 Vue.js 特有的項目，例如宣告 (v-bind、v-for)

Vue.js suggestions

以及 scripts 區段中的 Vue 屬性，例如 computed

Vue.js JavaScript suggestions

前往定義、查看定義

VS Code 中的 Vue - Official 擴充功能透過提供語言服務功能 (例如類型定義) 來增強 Vue.js 開發體驗。您可以使用以下方式存取這些功能

  • 前往定義 (F12)：直接導覽至程式碼中的類型定義。
  • 查看定義 (⌥F12 (Windows Alt+F12，Linux Ctrl+Shift+F10))：在不離開目前內容的情況下，內嵌檢視類型定義。

若要使用查看定義，請依照下列步驟執行

  1. 將游標放在 App 上。
  2. 按一下滑鼠右鍵，將游標停留在內容功能表中的查看上方，然後選取查看定義。
  3. 將會開啟一個查看視窗，顯示來自 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 的 Hot Module Replacement (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 使用 Microsoft Edge 的 Vite/Vue.js 3 專案。

對於 現在處於維護模式 的 Vue CLI，請查看 VS Code 偵錯秘訣網站上的 VS Code 中的 Vue.js 偵錯 秘訣以深入瞭解。

另一個用於偵錯 Vue.js 的熱門工具是 vue-devtools 外掛程式，無論環境為何，都可以使用它。

其他擴充功能

  • 在擴充功能檢視中搜尋 (⇧⌘X (Windows、Linux Ctrl+Shift+X)) 輸入 vue 以尋找其他 Vue 擴充功能。

    Vue.js extensions

  • 諸如 Vue VS Code Snippets 等擴充功能對於 Vue 程式碼片段可能很方便。

    Vue VS Code Snippets

  • 也有擴充功能套件，其中捆綁了其他人發現對 Vue.js 開發有用的擴充功能。

    Vue.js Extension Pack

02/06/2025