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 選項

以下是 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 清單。