jsconfig.json

什麼是 jsconfig.json？

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

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

提示： jsconfig.json 是 tsconfig.json 的後代，後者是 TypeScript 的配置檔案。jsconfig.json 是設定了 "allowJs" 屬性為 true 的 tsconfig.json。

為什麼需要 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 選項

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

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

您可以在 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 列表。