Visual Studio Code 中的 JavaScript

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

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

IntelliSense

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

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

請參閱使用 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 資訊

將滑鼠游標停留在 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) - 顯示 Peek 視窗，其中顯示符號的定義。
• 前往參考 ⇧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 重構，例如擷取函式和擷取常數。只需選取您想要擷取的原始程式碼，然後按一下編輯器邊界中的燈泡或按下 (⌘. (Windows、Linux Ctrl+.))，即可查看可用的重構。

可用的重構包括

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

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

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

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

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

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

您可以將游標放在未使用的程式碼上，然後觸發快速修正命令 (⌘. (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 接受建議

Inlay hints

Inlay hints 會將其他內嵌資訊新增至原始程式碼，以協助您了解程式碼的作用。

參數名稱 inlay hints 會顯示函式呼叫中參數的名稱

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

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

• none — 停用參數 inlay hints。
• literals — 僅針對常值 (字串、數字、布林值) 顯示 inlay hints。
• all — 針對所有引數顯示 inlay hints。

變數類型 inlay hints 會顯示沒有明確類型註解的變數類型。

設定：javascript.inlayHints.variableTypes.enabled

屬性類型 inlay hints 會顯示沒有明確類型註解的類別屬性類型。

設定：javascript.inlayHints.propertyDeclarationTypes.enabled

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

設定：javascript.inlayHints.parameterTypes.enabled

傳回類型 inlay hints 會顯示沒有明確類型註解的函式傳回類型。

設定：javascript.inlayHints.functionLikeReturnTypes.enabled

參考 CodeLens

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

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

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

Linters

Linters 提供可疑程式碼的警告。雖然 VS Code 不包含內建 JavaScript linter，但市集中有許多可用的 JavaScript linter 擴充功能。

類型檢查

您也可以在一般 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 的絕佳支援，但您也可以透過擴充功能額外安裝偵錯工具、程式碼片段、linters 和其他 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 匯入陳述式，您需要將 allowSyntheticDefaultImports 編譯器選項設定為 true。這會告知編譯器建立合成預設成員，而您會取得 IntelliSense。React Native 在幕後使用 Babel 來建立具有預設成員的適當執行階段程式碼。如果您也想要偵錯 React Native 程式碼，您可以安裝 React Native 擴充功能。

VS Code 是否支援 Dart 程式設計語言和 Flutter 框架？

是，Dart 和 Dart 開發和 Flutter 開發都有 VS Code 擴充功能。您可以在 Flutter.dev 文件中深入了解。

IntelliSense 不適用於外部程式庫

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

ES6 風格的 import 語法無法運作。

當您想要使用 ES6 風格的 import 語法，但某些類型宣告 (typings) 檔案尚未使用 ES6 風格的 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 來源對應的運作方式。

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

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

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

我可以使用其他 JavaScript 工具，例如 Flow 嗎？

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