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、無伺服器或物聯網。

有關 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。

懸停資訊

將滑鼠懸停在 JavaScript 符號上，可以快速檢視其型別資訊和相關文件。

鍵盤快捷鍵 ⌘K ⌘I (Windows、Linux 為 Ctrl+K Ctrl+I) 可以在當前游標位置顯示此懸停資訊。

簽名幫助

當您編寫 JavaScript 函式呼叫時，VS Code 會顯示有關函式簽名的資訊，並高亮顯示您當前正在完成的引數。

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

自動匯入

自動匯入透過建議整個專案及其依賴項中的可用變數來加快編碼速度。當您選擇其中一個建議時，VS Code 會自動在檔案頂部為其新增一個 import 語句。

只需開始輸入，即可檢視當前專案中所有可用 JavaScript 符號的建議。自動匯入建議會顯示它們將從何處匯入。

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

在此示例中，VS Code 將來自 material-ui 的 Button 的 import 語句新增到了檔案頂部。

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

貼上時新增匯入

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

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

您可以透過配置 editor.pasteAs.preferences 設定，將帶匯入的貼上作為預設行為，而不顯示貼上控制元件。包含 text.updateImports.jsts 或 text.updateImports 可以在貼上時始終新增匯入。

組織匯入

組織匯入源操作可以對 JavaScript 檔案中的 import 語句進行排序，並移除任何未使用的匯入。

您可以從源操作上下文選單執行組織匯入，或者使用鍵盤快捷鍵 ⇧⌥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 提供了一些方便的重構功能，例如提取函式和提取常量。只需選擇您想要提取的原始碼，然後單擊編輯器邊欄中的燈泡圖示或按 (⌘. (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。

點選引用計數可以快速瀏覽引用列表。

Linter

Linter 會對可疑程式碼提供警告。雖然 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 的出色支援，但您還可以透過擴充套件安裝偵錯程式、程式碼片段、linter 和其他 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 source map 實現這一點。

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

一些使用者希望使用像提議中的管道 (|>) 運算子這樣的語法結構。然而，這些目前不被 VS Code 的 JavaScript 語言服務支援，並被標記為錯誤。對於仍希望使用這些未來功能的使用者，我們提供了 javascript.validate.enable 設定。

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

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

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