Visual Studio Code 中的 JavaScript

Visual Studio Code 內建 JavaScript IntelliSense、偵錯、格式化、程式碼導覽、重構，以及許多其他進階語言功能。

這些功能大部分開箱即用，但有些可能需要基本的設定才能獲得最佳體驗。本頁面摘要介紹了 VS Code 隨附的 JavaScript 功能。來自 VS Code Marketplace 的延伸模組可以增強或變更大多數內建功能。若要深入了解這些功能如何運作及設定，請參閱使用 JavaScript。

IntelliSense

IntelliSense 為您提供智慧型程式碼完成、滑鼠懸停資訊與簽章資訊，讓您能更快速且正確地撰寫程式碼。

VS Code 在您的 JavaScript 專案中提供 IntelliSense；針對許多 npm 程式庫（例如 React、lodash 與 express）；以及其他平台（例如 node、無伺服器架構或 IoT）。

關於 VS Code 的 JavaScript IntelliSense、如何設定以及疑難排解常見的 IntelliSense 問題，請參閱使用 JavaScript。

JavaScript 專案 (jsconfig.json)

jsconfig.json 檔案在 VS Code 中定義了一個 JavaScript 專案。雖然 jsconfig.json 檔案並非必要，但在以下情況中，您會想要建立一個：

• 若非工作區中的所有 JavaScript 檔案都應視為單一 JavaScript 專案的一部分。jsconfig.json 檔案可讓您將某些檔案排除在 IntelliSense 之外。
• 確保工作區中的 JavaScript 檔案子集被視為單一專案。這對於使用隱含的全域相依性而非 import 相依性的舊程式碼時非常有用。
• 若您的工作區包含一個以上的專案內容，例如前端與後端 JavaScript 程式碼。對於多專案工作區，請在每個專案的根目錄中建立 jsconfig.json。
• 您正在使用 TypeScript 編譯器將 JavaScript 原始程式碼向下編譯 (down-level compile)。

若要定義基本的 JavaScript 專案，請在工作區根目錄加入 jsconfig.json

{
  "compilerOptions": {
    "module": "CommonJS",
    "target": "ES6"
  },
  "exclude": ["node_modules"]
}

關於更進階的 jsconfig.json 設定，請參閱使用 JavaScript。

程式碼片段

VS Code 包含基本的 JavaScript 程式碼片段 (snippets)，會在您輸入時建議；

有許多延伸模組提供額外的程式碼片段，包括 Redux 或 Angular 等熱門框架的片段。您甚至可以定義自己的程式碼片段。

JSDoc 支援

VS Code 能夠理解許多標準的 JSDoc 註解，並使用這些註解來提供豐富的 IntelliSense。您甚至可以選擇使用 JSDoc 註解中的型別資訊來檢查您的 JavaScript 型別。

在函式宣告前輸入 /**，並選擇 JSDoc 註解程式碼片段建議，即可快速為函式建立 JSDoc 註解。

若要停用 JSDoc 註解建議，請設定 "js/ts.suggest.jsdoc.enabled": false。

滑鼠懸停資訊

將滑鼠懸停在 JavaScript 符號上，即可快速查看其型別資訊與相關說明文件。

鍵盤快速鍵 ⌘K ⌘I (Windows, Linux Ctrl+K Ctrl+I) 可在目前游標位置顯示此懸停資訊。

簽章說明

當您撰寫 JavaScript 函式呼叫時，VS Code 會顯示關於該函式簽章的資訊，並反白顯示您目前正在完成的參數。

當您在函式呼叫中輸入 ( 或 , 時，會自動顯示簽章說明。請按 ⇧⌘Space (Windows, Linux Ctrl+Shift+Space) 來手動觸發簽章說明。

自動匯入

自動匯入功能透過建議專案及其相依性中可用的變數，加快編碼速度。當您選擇這些建議時，VS Code 會自動將其匯入陳述式加入檔案頂端。

只需開始輸入，即可查看目前專案中所有可用 JavaScript 符號的建議。自動匯入建議會顯示其匯入來源。

如果您選擇其中一個自動匯入建議，VS Code 會為其加入匯入陳述式。

在此範例中，VS Code 將 material-ui 的 Button 匯入加入至檔案頂端。

若要停用自動匯入，請將 "js/ts.suggest.autoImports" 設定為 false。

貼上時加入匯入內容

當您在編輯器之間複製並貼上程式碼時，VS Code 可在貼上時自動加入匯入內容。當您貼上包含未定義符號的程式碼時，會顯示一個貼上控制項，讓您選擇以純文字貼上或加入匯入內容。

此功能預設為啟用，您可以透過切換 setting(js/ts.updateImportsOnPaste.enabled) 設定來停用它。

您可以透過設定 editor.pasteAs.preferences 在 VS Code 中開啟 在 VS Code Insiders 中開啟 設定，將「貼上並包含匯入內容」設為預設行為，而不顯示貼上控制項。包含 text.updateImports.jsts 或 text.updateImports 即可在貼上時自動加入匯入內容。

整理匯入

整理匯入 (Organize Imports) 原始碼動作可對 JavaScript 檔案中的匯入內容進行排序，並移除所有未使用的匯入項目。

您可以從 原始碼動作 (Source Action) 快顯功能表執行 整理匯入，或使用鍵盤快速鍵 ⇧⌥O (Windows, Linux Shift+Alt+O)。

設定後，也可以在儲存 JavaScript 檔案時自動整理匯入內容。

"editor.codeActionsOnSave": {
    "source.organizeImports": "explicit"
}

移動檔案時更新匯入

當您移動或重新命名 JavaScript 專案中其他檔案所匯入的檔案時，VS Code 可以自動更新所有參考該已移動檔案的匯入路徑。

setting(js/ts.updateImportsOnFileMove.enabled) 設定可控制此行為。有效的設定值包括：

• "prompt" (預設值)：在每次移動檔案時詢問是否更新路徑。
• "always" - 始終自動更新路徑。
• "never" - 不自動更新路徑且不詢問。

格式化

VS Code 的內建 JavaScript 格式化程式提供具合理預設值的基本程式碼格式化功能。

js/ts.format.* 設定用於設定內建格式化程式。或者，若內建格式化程式造成干擾，請將 "js/ts.format.enable" 設定為 false 以停用它。

如需更專業的程式碼格式化樣式，請嘗試從 Marketplace 安裝 JavaScript 格式化延伸模組。

JSX 與自動關閉標籤

所有 VS Code 的 JavaScript 功能也適用於 JSX。

您可以在一般 *.js 檔案與 *.jsx 檔案中使用 JSX 語法。

VS Code 也包含 JSX 專屬功能，例如自動關閉 JSX 標籤。

將 "js/ts.autoClosingTags" 設定為 false 以停用 JSX 標籤自動關閉。

程式碼導覽

程式碼導覽讓您能快速導覽 JavaScript 專案。

• 前往定義 (Go to Definition) F12 - 前往符號定義的原始程式碼。
• 預覽定義 (Peek Definition) ⌥F12 (Windows Alt+F12, Linux Ctrl+Shift+F10) - 彈出預覽視窗以顯示符號定義。
• 前往參考 (Go to References) ⇧F12 (Windows, Linux Shift+F12) - 顯示該符號的所有參考。
• 前往型別定義 (Go to Type Definition) - 前往定義符號的型別。對於類別實例，此動作將顯示該類別本身，而非定義實例的位置。

您可以使用 命令選擇區 (Command Palette) (⇧⌘P (Windows, Linux Ctrl+Shift+P)) 中的 前往符號 (Go to Symbol) 指令，透過符號搜尋進行導覽。

• 前往檔案中的符號 (Go to Symbol in File) ⇧⌘O (Windows, Linux Ctrl+Shift+O)
• 前往工作區中的符號 (Go to Symbol in Workspace) ⌘T (Windows, Linux Ctrl+T)

重新命名

按下 F2 即可在整個 JavaScript 專案中重新命名游標下的符號。

重構

VS Code 包含一些便利的 JavaScript 重構工具，例如 擷取函式 (Extract function) 與 擷取常數 (Extract constant)。只需選取您想要擷取的原始程式碼，然後點擊邊欄中的燈泡，或按下 (⌘. (Windows, Linux Ctrl+.)) 查看可用的重構項目。

可用的重構項目包括：

• 擷取為方法或函式。
• 擷取為常數。
• 在具名匯入與命名空間匯入之間進行轉換。
• 移動至新檔案。

關於重構以及如何為個別重構項目設定鍵盤快速鍵的詳細資訊，請參閱重構。

此外，程式碼動作小工具：包含附近的快速修正 (Code Action Widget: Include Nearby Quick Fixes) ( editor.codeActionWidget.includeNearbyQuickFixes 在 VS Code 中開啟 在 VS Code Insiders 中開啟 ) 是一項預設啟用的設定，無論您的游標在該行何處，它都能透過 ⌘. (Windows, Linux Ctrl+.) (指令 ID editor.action.quickFix) 啟動該行中最接近的快速修正。

此指令會反白顯示將透過快速修復進行重構或修復的原始碼。一般的程式碼動作與非修復性的重構仍然可以在游標位置啟動。

未使用的變數與無法觸及的程式碼

未使用的 JavaScript 程式碼（例如條件永遠為真的 if 陳述式的 else 區塊，或是未參考的匯入項目）會在編輯器中以淡出效果顯示。

您可以將游標放在未使用程式碼上，並觸發「快速修正」指令 (⌘. (Windows, Linux Ctrl+.)) 或點擊燈泡，快速移除這些程式碼。

若要停用未使用程式碼的淡出效果，請將 "editor.showUnused" 設定為 false。您也可以僅針對 JavaScript 停用未使用程式碼的淡出效果。

"[javascript]": {
    "editor.showUnused":  false
},
"[javascriptreact]": {
    "editor.showUnused":  false
},

儲存時的程式碼動作

editor.codeActionsOnSave 在 VS Code 中開啟 在 VS Code Insiders 中開啟 設定可讓您設定在儲存檔案時執行的程式碼動作。例如，您可以透過設定來啟用儲存時整理匯入內容。

// On explicit save, run fixAll source action. On auto save (window or focus change), run organizeImports source action.
"editor.codeActionsOnSave": {
    "source.fixAll": "explicit",
    "source.organizeImports": "always",
}

目前支援以下枚舉 (enums)：

• explicit (預設值)：明確儲存時觸發程式碼動作。與 true 相同。
• always：在明確儲存時，以及因視窗或焦點變更而觸發自動儲存時，執行程式碼動作。
• never：儲存時從不觸發程式碼動作。與 false 相同。

您也可以將 editor.codeActionsOnSave 在 VS Code 中開啟 在 VS Code Insiders 中開啟 設定為一組依序執行的程式碼動作陣列。

以下是一些原始碼動作：

• "organizeImports" - 啟用儲存時整理匯入內容。
• "fixAll" - 「儲存時自動修正」會在單次執行中計算出所有可能的修正（適用於所有提供者，包括 ESLint）。
• "fixAll.eslint" - 僅針對 ESLint 進行自動修正。
• "addMissingImports" - 儲存時加入所有遺失的匯入內容。

更多資訊請參閱 Node.js/JavaScript。

程式碼建議

VS Code 會自動建議一些常見的程式碼簡化方式，例如將 Promise 的一連串 .then 呼叫轉換為使用 async 與 await。

將 "js/ts.suggestionActions.enabled" 設定為 false 以停用建議。

使用 AI 強化程式碼完成功能

GitHub Copilot 是一款由 AI 驅動的程式碼完成工具，可協助您更快、更智慧地撰寫程式碼。您可以在 VS Code 中使用 GitHub Copilot 擴充功能 來產生程式碼，或從其產生的程式碼中學習。

GitHub Copilot 針對眾多語言和各式各樣的框架提供建議，對於 Python、JavaScript、TypeScript、Ruby、Go、C# 和 C++ 尤其有效。

您可以在 Copilot 說明文件中了解更多關於 Copilot 的入門資訊。

安裝並啟用 Copilot 延伸模組後，即可在您的 JavaScript 專案中測試它。

建立新檔案 - 您可以使用命令選擇區中的 檔案：新增檔案 (File: New File) 指令 (F1)。

在 JavaScript 檔案中，輸入以下函式標頭：

function calculateDaysBetweenDates(begin, end) {

Copilot 會提供如下建議 - 使用 Tab 接受建議。

內嵌提示 (Inlay hints)

內嵌提示 (Inlay hints) 在原始程式碼中加入額外的內嵌資訊，以協助您理解程式碼的功能。

參數名稱內嵌提示會在函式呼叫中顯示參數名稱。

這能協助您一眼看懂每個引數的含義，對於接收布林值標記或容易混淆的參數的函式特別有用。

若要啟用參數名稱提示，請設定 js/ts.inlayHints.parameterNames。共有三種可能的值：

• none — 停用參數內嵌提示。
• literals — 僅對字面值（字串、數字、布林值）顯示內嵌提示。
• all — 對所有引數顯示內嵌提示。

變數型別內嵌提示會顯示沒有明確型別註解的變數型別。

設定：setting(js/ts.inlayHints.variableTypes.enabled)

屬性型別內嵌提示會顯示沒有明確型別註解的類別屬性型別。

設定：setting(js/ts.inlayHints.propertyDeclarationTypes.enabled)

參數型別提示會顯示隱含型別參數的型別。

設定：setting(js/ts.inlayHints.parameterTypes.enabled)

回傳型別內嵌提示會顯示沒有明確型別註解的函式回傳型別。

設定：setting(js/ts.inlayHints.functionLikeReturnTypes.enabled)

參考 CodeLens

JavaScript 參考 CodeLens 會為類別、方法、屬性與匯出物件顯示參考的內嵌計數。

若要啟用參考 CodeLens，請將 "js/ts.referencesCodeLens.enabled" 設定為 true。

點擊參考計數即可快速瀏覽參考清單。

檢查工具 (Linters)

檢查工具 (Linters) 針對可疑程式碼提供警告。雖然 VS Code 沒有內建 JavaScript 檢查工具，但 Marketplace 中有許多 JavaScript 檢查工具延伸模組可供使用。

型別檢查

您也可以在一般 JavaScript 檔案中利用 TypeScript 的部分進階型別檢查與錯誤報告功能。這是捕捉常見程式錯誤的絕佳方式。這些型別檢查也為 JavaScript 啟用了許多令人興奮的快速修正，包括 加入遺失的匯入 與 加入遺失的屬性。

TypeScript 會嘗試以與 .ts 檔案相同的方式推斷 .js 檔案中的型別。當無法推斷型別時，可使用 JSDoc 註解明確指定。您可以在使用 JavaScript 中深入了解 TypeScript 如何使用 JSDoc 進行 JavaScript 型別檢查。

JavaScript 型別檢查是選用且可自行選擇啟用的功能。現有的 JavaScript 驗證工具（如 ESLint）可與內建型別檢查功能同時使用。

偵錯

VS Code 為 JavaScript 提供了強大的偵錯支援。設定中斷點、檢查物件、導覽呼叫堆疊，並在偵錯主控台中執行程式碼。請參閱偵錯主題以了解更多資訊。

用戶端偵錯

您可以使用瀏覽器偵錯工具偵錯用戶端程式碼，例如我們為 Edge 與 Chrome 提供的內建偵錯工具，或 Debugger for Firefox。

伺服器端偵錯

使用內建偵錯工具在 VS Code 中偵錯 Node.js。設定過程簡單，並有Node.js 偵錯教學課程為您提供協助。

熱門延伸模組

VS Code 對 JavaScript 提供了出色的內建支援，但您還可以透過延伸模組額外安裝偵錯工具、程式碼片段、檢查工具與其他 JavaScript 工具。

後續步驟

繼續閱讀以了解

• 使用 JavaScript - 關於 VS Code JavaScript 支援及如何疑難排解常見問題的詳細資訊。
• jsconfig.json - jsconfig.json 專案檔案的詳細說明。
• IntelliSense - 深入了解 IntelliSense 以及如何針對您的語言有效使用它。
• 偵錯 (Debugging) - 了解如何為您的應用程式設定偵錯。
• Node.js - 建立 Express Node.js 應用程式的逐步教學。
• TypeScript - VS Code 對 TypeScript 有絕佳的支援，它為您的 JavaScript 程式碼帶來了結構化與強型別特性。

常見問題

VS Code 是否支援 JSX 與 React Native？

VS Code 支援 JSX 與 React Native。您將透過從 npmjs 型別宣告檔案庫自動下載的型別宣告 (typings) 檔案，獲得 React/JSX 與 React Native 的 IntelliSense。此外，您也可以從 Marketplace 安裝熱門的 React Native 延伸模組。

若要為 React Native 啟用 ES6 匯入陳述式，您需要將 allowSyntheticDefaultImports 編譯器選項設為 true。這會告訴編譯器建立合成預設成員，並讓您獲得 IntelliSense。React Native 在幕後使用 Babel 來建立具備預設成員的適當執行時期程式碼。如果您也想進行 React Native 程式碼的偵錯，可以安裝 React Native 延伸模組。

VS Code 是否支援 Dart 程式語言與 Flutter 框架？

是的，VS Code 有針對 Dart 與 Flutter 開發的延伸模組。您可以在 Flutter.dev 文件中了解更多。

IntelliSense 對外部程式庫無效

自動型別取得 (Automatic Type Acquisition) 適用於由 npm (在 package.json 中指定)、Bower (在 bower.json 中指定) 下載的相依性，以及資料夾結構中列出的許多最常見程式庫 (例如 jquery-3.1.1.min.js)。

ES6 樣式匯入無效。

當您想要使用 ES6 樣式匯入，但某些型別宣告 (typings) 檔案尚未支援 ES6 樣式匯出時，請將 TypeScript 編譯器選項 allowSyntheticDefaultImports 設為 true。

{
  "compilerOptions": {
    "module": "CommonJS",
    "target": "ES6",
    // This is the line you want to add
    "allowSyntheticDefaultImports": true
  },
  "exclude": ["node_modules", "**/node_modules/*"]
}

我可以偵錯壓縮/混淆過的 JavaScript 嗎？

可以。您可以在 Node.js 偵錯主題中使用 JavaScript 來源對應 (source maps) 來實現。

使用非 ES6 建構時，如何停用語法驗證？

有些使用者希望使用如建議中的管線 (|>) 運算子等語法建構。然而，這些目前不支援於 VS Code 的 JavaScript 語言服務，並會被標記為錯誤。對於仍希望使用這些未來功能的使用者，我們提供了 setting(js/ts.validate.enable) 設定。

透過 js/ts.validate.enable: false，您可以停用所有內建語法檢查。若您這麼做，我們建議您使用如 ESLint 等檢查工具來驗證您的原始程式碼。

我可以使用 Flow 等其他 JavaScript 工具嗎？

可以，但 Flow 的部分語言功能（例如型別與錯誤檢查）可能會干擾 VS Code 的內建 JavaScript 支援。若要了解如何停用 VS Code 的內建 JavaScript 支援，請參閱停用 JavaScript 支援。