Visual Studio Code 中的 JavaScript

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

這些功能大多數都可立即使用，而有些功能可能需要基本設定才能獲得最佳體驗。此頁面摘要說明 VS Code 隨附的 JavaScript 功能。來自 VS Code Marketplace 的擴充功能可以擴增或變更大多數這些內建功能。如需更深入瞭解這些功能如何運作和設定的指南，請參閱使用 JavaScript。

IntelliSense

IntelliSense 會向您顯示智慧程式碼完成、hover 資訊和簽名資訊，讓您可以更快且更正確地撰寫程式碼。

VS Code 在您的 JavaScript 專案中、針對許多 npm 程式庫 (例如 React、lodash 和 express) 以及針對其他平台 (例如 node、serverless 或 IoT) 提供 IntelliSense。

請參閱使用 JavaScript，以取得有關 VS Code 的 JavaScript IntelliSense、如何設定以及協助疑難排解常見 IntelliSense 問題的資訊。

JavaScript 專案 (jsconfig.json)

jsconfig.json 檔案定義 VS Code 中的 JavaScript 專案。雖然不需要 jsconfig.json 檔案，但在下列情況下，您會想要建立一個檔案：

• 如果並非工作區中的所有 JavaScript 檔案都應視為單一 JavaScript 專案的一部分。jsconfig.json 檔案可讓您排除某些檔案，使其不會顯示在 IntelliSense 中。
• 確保工作區中的 JavaScript 檔案子集被視為單一專案。如果您正在使用舊版程式碼，該程式碼使用隱含全域相依性而不是 imports 作為相依性，則這會很有用。
• 如果您的工作區包含多個專案內容，例如前端和後端 JavaScript 程式碼。對於多專案工作區，請在每個專案的根資料夾中建立 jsconfig.json。
• 您正在使用 TypeScript 編譯器來向下層級編譯 JavaScript 原始碼。

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

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

請參閱使用 JavaScript，以取得更進階的 jsconfig.json 設定。

程式碼片段

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

有許多擴充功能提供其他程式碼片段，包括適用於熱門架構 (例如 Redux 或 Angular) 的程式碼片段。您甚至可以定義自己的程式碼片段。

JSDoc 支援

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

透過在函式宣告之前輸入 /**，並選取 [JSDoc 註解] 程式碼片段建議，快速建立函式的 JSDoc 註解

若要停用 JSDoc 註解建議，請設定 "javascript.suggest.completeJSDocs": false。

hover 資訊

將滑鼠 hover 在 JavaScript 符號上方，即可快速查看其類型資訊和相關文件。

⌘K ⌘I (Windows、Linux Ctrl+K Ctrl+I) 鍵盤快速鍵會在目前的游標位置顯示此 hover 資訊。

簽名說明

當您撰寫 JavaScript 函式呼叫時，VS Code 會顯示有關函式簽名的資訊，並醒目提示您目前正在完成的參數

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

自動匯入

自動匯入會透過建議整個專案及其相依性中可用的變數來加速程式碼撰寫。當您選取其中一個建議時，VS Code 會自動將其匯入新增至檔案頂端。

只需開始輸入即可查看目前專案中所有可用 JavaScript 符號的建議。自動匯入建議會顯示將從何處匯入

如果您選擇其中一個自動匯入建議，VS Code 會為其新增匯入。

在此範例中，VS Code 會將來自 material-ui 的 Button 匯入新增至檔案頂端

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

貼上時新增匯入

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

此功能預設為啟用，但您可以切換 javascript.updateImportsOnPaste.enabled 設定來停用它。

您可以將貼上時匯入設定為預設行為，而無需顯示貼上控制項，方法是設定 editor.pasteAs.preferences 設定。包含 text.updateImports.jsts 或 text.updateImports 以在貼上時一律新增匯入。

整理匯入

[整理匯入] 來源動作會排序 JavaScript 檔案中的匯入，並移除任何未使用的匯入

您可以從 [來源動作] 內容功能表或使用 ⇧⌥O (Windows、Linux Shift+Alt+O) 鍵盤快速鍵執行 [整理匯入]。

您也可以在儲存 JavaScript 檔案時自動完成整理匯入，方法是設定

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

在檔案移動時更新匯入

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

javascript.updateImportsOnFileMove.enabled 設定會控制此行為。有效設定值為

• "prompt" - 預設值。詢問是否應更新每個檔案移動的路徑。
• "always" - 一律自動更新路徑。
• "never" - 不要自動更新路徑，也不要提示。

格式化

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

javascript.format.* 設定會設定內建格式器。或者，如果內建格式器造成阻礙，請將 "javascript.format.enable" 設定為 false 以停用它。

如需更專業的程式碼格式化樣式，請嘗試從 Marketplace 安裝其中一個 JavaScript 格式化擴充功能。

JSX 和自動關閉標籤

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

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

VS Code 也包含 JSX 特定功能，例如自動關閉 JSX 標籤

設定 "javascript.autoClosingTags" 為 false 以停用 JSX 標籤關閉。

程式碼導覽

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

• 前往定義 F12 - 前往符號定義的原始碼。
• 預覽定義 ⌥F12 (Windows Alt+F12、Linux Ctrl+Shift+F10) - 顯示預覽視窗，其中顯示符號的定義。
• 前往參考 ⇧F12 (Windows、Linux Shift+F12) - 顯示符號的所有參考。
• 前往類型定義 - 前往定義符號的類型。對於類別的執行個體，這會顯示類別本身，而不是執行個體定義的位置。

您可以使用 [命令選擇區] (⇧⌘P (Windows、Linux Ctrl+Shift+P)) 中的 [前往符號] 命令，透過符號搜尋進行導覽。

• 前往檔案中的符號 ⇧⌘O (Windows、Linux Ctrl+Shift+O)
• 前往工作區中的符號 ⌘T (Windows、Linux Ctrl+T)

重新命名

按下 F2 以重新命名游標下的符號，使其遍及您的 JavaScript 專案

重構

VS Code 包含一些方便的 JavaScript 重構，例如 [解壓縮函式] 和 [解壓縮常數]。只需選取您要解壓縮的原始碼，然後按一下 gutter 中的燈泡或按下 (⌘. (Windows、Linux Ctrl+.)) 以查看可用的重構。

可用的重構包括

• 解壓縮至方法或函式。
• 解壓縮至常數。
• 在具名匯入和命名空間匯入之間轉換。
• 移動到新檔案。

請參閱重構，以取得有關重構的詳細資訊，以及如何設定個別重構的鍵盤快速鍵。

此外，[程式碼動作 Widget: 包含鄰近的快速修正] (editor.codeActionWidget.includeNearbyQuickFixes) 是一項預設為啟用的設定，它會從 ⌘. (Windows、Linux Ctrl+.) (命令 ID editor.action.quickFix) 啟用行中最接近的快速修正，無論您的游標位於該行中的哪個位置。

此命令會醒目提示將使用快速修正重構或修正的原始碼。一般程式碼動作和非修正重構仍然可以在游標位置啟用。

未使用的變數和無法連線的程式碼

未使用的 JavaScript 程式碼 (例如，一律為 true 的 if 陳述式的 else 區塊或未參考的匯入) 會在編輯器中淡出

您可以將游標放在未使用的程式碼上，並觸發快速修正命令 (⌘. (Windows、Linux Ctrl+.)) 或按一下燈泡，快速移除此未使用的程式碼。

若要停用淡出未使用的程式碼，請將 "editor.showUnused" 設定為 false。您也可以僅在 JavaScript 中停用淡出未使用的程式碼，方法是設定

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

儲存時的程式碼動作

editor.codeActionsOnSave 設定可讓您設定一組在儲存檔案時執行的程式碼動作。例如，您可以透過設定在儲存時啟用整理匯入

// 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",
}

截至今日，支援下列列舉

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

您也可以將 editor.codeActionsOnSave 設定為要依序執行的程式碼動作陣列。

以下是一些來源動作

• "organizeImports" - 在儲存時啟用整理匯入。
• "fixAll" - 儲存時自動修正會一次計算所有可能的修正 (適用於包括 ESLint 的所有提供者)。
• "fixAll.eslint" - 僅針對 ESLint 自動修正。
• "addMissingImports" - 在儲存時新增所有遺失的匯入。

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

程式碼建議

VS Code 會自動建議一些常見的程式碼簡化，例如轉換 promise 上 .then 呼叫的鏈結以使用 async 和 await

設定 "javascript.suggestionActions.enabled" 為 false 以停用建議。

使用 AI 增強完成

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

GitHub Copilot 為多種語言和各種架構提供建議，而且特別適用於 Python、JavaScript、TypeScript、Ruby、Go、C# 和 C++。

您可以在Copilot 文件中深入瞭解如何開始使用 Copilot。

安裝並啟用 Copilot 擴充功能後，您就可以針對 JavaScript 專案測試它。

建立新檔案 - 您可以使用 [命令選擇區] (F1) 中的 [檔案: 新檔案] 命令。

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

function calculateDaysBetweenDates(begin, end) {

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

內嵌提示

內嵌提示會將額外的內嵌資訊新增至原始碼，以協助您瞭解程式碼的作用。

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

這可以協助您一目瞭然地瞭解每個引數的意義，這對於採用布林旗標或具有容易混淆之參數的函式特別有用。

若要啟用參數名稱提示，請設定 javascript.inlayHints.parameterNames。有三個可能的值

• none — 停用參數內嵌提示。
• literals — 僅顯示常值 (字串、數字、布林值) 的內嵌提示。
• all — 顯示所有引數的內嵌提示。

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

設定：javascript.inlayHints.variableTypes.enabled

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

設定：javascript.inlayHints.propertyDeclarationTypes.enabled

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

設定：javascript.inlayHints.parameterTypes.enabled

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

設定：javascript.inlayHints.functionLikeReturnTypes.enabled

參考 CodeLens

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

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

按一下參考計數以快速瀏覽參考清單

程式碼檢查器

程式碼檢查器會針對可疑的程式碼提供警告。雖然 VS Code 不包含內建的 JavaScript 程式碼檢查器，但 Marketplace 中提供許多 JavaScript 程式碼檢查器擴充功能。

類型檢查

您也可以在一般 JavaScript 檔案中運用 TypeScript 的一些進階類型檢查和錯誤報告功能。這是捕捉常見程式設計錯誤的好方法。這些類型檢查也會為 JavaScript 啟用一些令人興奮的快速修正，包括 [新增遺失的匯入] 和 [新增遺失的屬性]。

TypeScript 嘗試以與在 .ts 檔案中相同的方式推斷 .js 檔案中的類型。當無法推斷類型時，可以使用 JSDoc 註解明確指定類型。您可以在使用 JavaScript中閱讀更多有關 TypeScript 如何使用 JSDoc 進行 JavaScript 類型檢查的資訊。

JavaScript 的類型檢查是選用且選擇加入的。現有的 JavaScript 驗證工具 (例如 ESLint) 可以與內建類型檢查功能一起使用。

偵錯

VS Code 隨附對 JavaScript 的絕佳偵錯支援。設定中斷點、檢查物件、導覽呼叫堆疊，以及在偵錯主控台中執行程式碼。請參閱偵錯主題以瞭解更多資訊。

偵錯用戶端

您可以使用瀏覽器偵錯工具 (例如適用於 Edge 和 Chrome 的內建偵錯工具) 或 適用於 Firefox 的偵錯工具來偵錯您的用戶端程式碼。

偵錯伺服器端

使用內建偵錯工具在 VS Code 中偵錯 Node.js。設定很容易，而且有Node.js 偵錯教學課程可協助您。

熱門擴充功能

VS Code 隨附對 JavaScript 的絕佳支援，但您也可以透過擴充功能額外安裝偵錯工具、程式碼片段、程式碼檢查器和其他 JavaScript 工具。

後續步驟

請繼續閱讀以瞭解

• 使用 JavaScript - 有關 VS Code 的 JavaScript 支援以及如何疑難排解常見問題的更詳細資訊。
• jsconfig.json - jsconfig.json 專案檔案的詳細描述。
• IntelliSense - 深入瞭解 IntelliSense 以及如何有效地將其用於您的語言。
• 偵錯 - 瞭解如何為您的應用程式設定偵錯。
• 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 import 陳述式，您需要將 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 Style imports 無法運作。

當您想要使用 ES6 style imports，但某些類型宣告 (typings) 檔案尚未使用 ES6 style exports 時，請將 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 結構時，我該如何停用語法驗證？

有些使用者想要使用語法結構，例如提議的 pipeline (|>) 運算子。然而，這些目前不受 VS Code 的 JavaScript 語言服務支援，並標記為錯誤。對於仍然想使用這些未來功能的使用者，我們提供了 javascript.validate.enable 設定。

使用 javascript.validate.enable: false，您將停用所有內建語法檢查。如果您這樣做，我們建議您使用像 ESLint 這樣的 linter 來驗證您的原始碼。

我可以使用像 Flow 這樣的其他 JavaScript 工具嗎？

可以，但是 Flow 的某些語言功能，例如類型和錯誤檢查，可能會干擾 VS Code 的內建 JavaScript 支援。若要了解如何停用 VS Code 的內建 JavaScript 支援，請參閱停用 JavaScript 支援。