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、serverless 或 IoT。

有關 VS Code 的 JavaScript IntelliSense、如何配置以及幫助解決常見 IntelliSense 問題的資訊，請參閱 使用 JavaScript。

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"]
}

有關更高階的 jsconfig.json 配置，請參閱 使用 JavaScript。

程式碼片段

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

有許多擴充套件提供了額外的程式碼片段，包括流行框架（如 Redux 或 Angular）的程式碼片段。你甚至可以 定義自己的程式碼片段。

JSDoc 支援

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

透過在函式宣告前鍵入 /** 並選擇 **JSDoc 註釋** 程式碼片段建議，快速建立函式的 JSDoc 註釋。

要停用 JSDoc 註釋建議，請將 "javascript.suggest.completeJSDocs": false 設定為 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 會將 Button 從 material-ui 匯入到檔案頂部。

要停用自動匯入，請將 "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 格式化擴充套件。 Marketplace。

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 包含了一些方便的重構，例如 **提取函式** 和 **提取常量**。只需選擇要提取的原始碼，然後單擊排水溝中的燈泡或按 (⌘. (Windows、Linux Ctrl+.)) 即可檢視可用的重構。

可用的重構包括：

• 提取到方法或函式。
• 提取到常量。
• 在命名匯入和名稱空間匯入之間進行轉換。
• 移至新檔案。

有關重構以及如何為單個重構配置鍵盤快捷鍵的更多資訊，請參閱重構。

此外，程式碼操作小元件：包含附近的快速修復 (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。

單擊引用計數可快速瀏覽引用列表

Linters

Linters 會為可疑程式碼提供警告。雖然 VS Code 不包含內建的 JavaScript Linter，但在 marketplace 中有許多 JavaScript Linter 擴充套件可用。

型別檢查

你也可以在常規 JavaScript 檔案中使用 TypeScript 的一些高階型別檢查和錯誤報告功能。這是捕獲常見程式設計錯誤的好方法。這些型別檢查還支援一些激動人心的 JavaScript 快速修復，包括 **新增缺失的匯入** 和 **新增缺失的屬性**。

TypeScript 嘗試在 .js 檔案中推斷型別，就像在 .ts 檔案中一樣。當無法推斷型別時，可以使用 JSDoc 註釋顯式指定。你可以在 使用 JavaScript 中閱讀有關 TypeScript 如何使用 JSDoc 進行 JavaScript 型別檢查的更多資訊。

JavaScript 的型別檢查是可選的，並且是選擇加入的。現有的 JavaScript 驗證工具（如 ESLint）可以與內建的型別檢查功能一起使用。

除錯

VS Code 附帶出色的 JavaScript 除錯支援。設定斷點、檢查物件、導航呼叫堆疊以及在除錯控制檯中執行程式碼。請參閱 除錯主題以瞭解更多資訊。

除錯客戶端

你可以使用瀏覽器偵錯程式來除錯客戶端程式碼，例如我們內建的 Edge 和 Chrome 偵錯程式，或者 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** 和 **Flutter** 開發的 VS Code 擴充套件。你可以在 Flutter.dev 文件中瞭解更多資訊。

外部庫的 IntelliSense 不起作用

自動型別獲取適用於 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 源對映來檢視此功能。

如何在使用非 ES6 結構時停用語法驗證？

一些使用者想使用建議的管道（|>）運算子等語法結構。但是，這些目前不受 VS Code 的 JavaScript 語言服務支援，並被標記為錯誤。對於仍想使用這些未來功能的​​使用者，我們提供了 javascript.validate.enable 設定。

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

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

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