jsconfig.json

什麼是 jsconfig.json？

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

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

提示： jsconfig.json 是 tsconfig.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 的後代，而 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 清單。