jsconfig.json

什麼是 jsconfig.json？

目錄中存在 jsconfig.json 檔案表明該目錄是 JavaScript 專案的根目錄。jsconfig.json 檔案指定了根檔案以及 JavaScript 語言服務提供的功能的選項。

提示：如果您不使用 JavaScript，則無需擔心 jsconfig.json。

提示： jsconfig.json 是 tsconfig.json 的子集，後者是 TypeScript 的配置檔案。jsconfig.json 就是 tsconfig.json，只是將 "allowJs" 屬性設定為 true。

為什麼我需要一個 jsconfig.json 檔案？

Visual Studio Code 的 JavaScript 支援可以在兩種不同的模式下執行

• 檔案範圍 - 無 jsconfig.json：在此模式下，在 Visual Studio Code 中開啟的 JavaScript 檔案被視為獨立的單元。只要檔案 a.js 不顯式引用檔案 b.ts（無論是使用 import 還是 CommonJS 模組），這兩個檔案之間就沒有共同的專案上下文。

• 顯式專案 - 有 jsconfig.json：JavaScript 專案透過 jsconfig.json 檔案定義。目錄中存在這樣的檔案表示該目錄是 JavaScript 專案的根目錄。該檔案本身可以選擇列出屬於專案的檔案、要從專案中排除的檔案以及編譯器選項（參見下文）。

當您的工作區中有一個 jsconfig.json 檔案定義了專案上下文時，JavaScript 體驗會得到改善。因此，當您在新工作區中開啟 JavaScript 檔案時，我們會提示您建立一個 jsconfig.json 檔案。

jsconfig.json 的位置

我們透過建立 jsconfig.json 檔案將我們程式碼的這一部分（網站的客戶端）定義為一個 JavaScript 專案。將該檔案放在您的 JavaScript 程式碼的根目錄下，如下所示。

在更復雜的專案中，您可能在工作區內定義了多個 jsconfig.json 檔案。您希望這樣做，以便一個專案中的程式碼不會作為 IntelliSense 建議給另一個專案中的程式碼。下圖顯示了一個包含 client 和 server 資料夾的專案，展示了兩個獨立的 JavaScript 專案。

示例

預設情況下，JavaScript 語言服務將分析併為您的 JavaScript 專案中的所有檔案提供 IntelliSense。您需要指定要排除或包含的檔案，以便提供正確的 IntelliSense。

使用 "exclude" 屬性

exclude 屬性（一個 glob 模式）告訴語言服務哪些檔案不屬於您的原始碼。這有助於保持高效能。如果 IntelliSense 很慢，請將資料夾新增到您的 exclude 列表（如果 VS Code 檢測到速度變慢，它會提示您這樣做）。

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

提示：您需要 exclude 構建過程生成的檔案（例如，dist 目錄）。這些檔案會導致建議出現兩次，並會減慢 IntelliSense 的速度。

使用 "include" 屬性

或者，您可以使用 include 屬性（一個 glob 模式）顯式設定專案中的檔案。如果沒有 include 屬性，則預設包含包含目錄及其子目錄中的所有檔案。當指定 include 屬性時，僅包含這些檔案。這是一個帶有顯式 include 屬性的示例。

{
  "compilerOptions": {
    "module": "CommonJS",
    "target": "ES6"
  },
  "include": ["src/**/*"]
}

提示：exclude 和 include 中的檔案路徑是相對於 jsconfig.json 的位置的。

jsconfig 選項

下面是 jsconfig 的 "compilerOptions"，用於配置 JavaScript 語言支援。

提示：不要被 compilerOptions 混淆，因為 JavaScript 不需要實際編譯。此屬性的存在是因為 jsconfig.json 是 tsconfig.json 的子集，後者用於編譯 TypeScript。

您可以在 TypeScript compilerOptions 文件中閱讀有關可用 compilerOptions 的更多資訊。

使用 webpack 別名

要使 IntelliSense 與 webpack 別名一起使用，您需要使用 glob 模式指定 paths 鍵。

例如，對於別名 'ClientApp'

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "ClientApp/*": ["./ClientApp/*"]
    }
  }
}

然後使用別名

import Something from 'ClientApp/foo';

最佳實踐

在可能的情況下，您應該排除包含不屬於專案原始碼的 JavaScript 檔案的資料夾。

提示：如果您的工作區中沒有 jsconfig.json，VS Code 預設會排除 node_modules 資料夾。

下表顯示了常見專案元件與其建議排除的安裝資料夾的對映

當您的 JavaScript 專案變得太大並且效能變慢時，通常是由於 node_modules 等庫資料夾。如果 VS Code 檢測到您的專案變得太大，它會提示您編輯 exclude 列表。