vscode中的 jsconfig.json

問題源頭： webpack模板裏import路徑中@符號是什麼意思？

什麼是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（使用///引用指令或CommonJS模塊），兩個文件之間就沒有共同的項目上下文。
• 顯式項目 - 使用jsconfig.json：JavaScript項目是經過jsconfig.json文件定義的。 目錄中存在此類文件表示該目錄是JavaScript項目的根目錄。 文件自己能夠選擇列出屬於項目的文件，要從項目中排除的文件，以及編譯器選項（見下文）。

當您在工做空間中有一個定義項目上下文的jsconfig.json文件時，JavaScript體驗會獲得改進。 所以，當您在新工做空間中打開JavaScript文件時，咱們提供了一個建立jsconfig.json文件的提示。

jsconfig.json的位置

咱們經過建立jsconfig.json文件將咱們代碼的這一部分（咱們網站的客戶端）定義爲JavaScript項目。 將文件放在JavaScript代碼的根目錄下，以下所示。

在更復雜的項目中，您可能在工做空間中定義了多個jsconfig.json文件。 您將須要執行此操做，以便不將一個項目中的代碼建議爲IntelliSense以在另外一個項目中進行編碼。 下面的插圖是一個帶有客戶端和服務器文件夾的項目，顯示了兩個單獨的JavaScript項目。

例子

默認狀況下，JavaScript語言服務將分析併爲JavaScript項目中的全部文件提供IntelliSense^{(智能感知)}。 您須要指定要排除或包含的文件，以便提供正確的IntelliSense。

使用「exclude」屬性

exclude屬性（glob模式）告訴語言服務哪些文件是什麼文件，而不是源代碼的一部分。 這使性能保持在較高水平。 若是IntelliSense速度很慢，請將文件夾添加到排除列表中（若是檢測到速度減慢，VS代碼將提示您執行此操做）。

{
    "compilerOptions": {
        "target": "es6"
    },
    "exclude": [
        "node_modules"
    ]
}

提示：您將要排除由構建過程生成的文件（例如，dist目錄）。 這些文件會致使建議顯示兩次，並會下降IntelliSense的速度。

使用「包含」屬性

或者，可使用include屬性（glob模式）顯式設置項目中的文件。若是不存在include屬性，則默認爲包含目錄和子目錄中的全部文件。若是指定了include屬性，則只包括這些文件。下面是一個具備顯式include屬性的示例。

{
    "compilerOptions": {
        "target": "es6"
    },
    "include": [
        "src/**/*"
    ]
}

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

jsconfig選項

下面是jsconfig「compilerOptions」來配置JavaScript語言支持。

提示：不要被compilerOptions混淆。 此屬性的存在是由於jsconfig.json是tsconfig.json的後代，後者用於編譯TypeScript。

選項	描述	類型	默認
noLib	不包含默認庫文件（lib.d.ts）	string	-
target	指定要使用的默認庫（lib.d.ts）。 值是「es3」，「es5」，「es6」，「es2015」，「es2016」，「es2017」，「es2018」，「esnext」。	string	-
checkJs	啓用JavaScript文件的類型檢查。	boolean	true
experimentalDecorators	爲擬議的ES裝飾器提供實驗支持。	string	-
allowSyntheticDefaultImports	容許從沒有默認導出的模塊進行默認導入。 這不會影響代碼發出，只會影響類型檢查。	boolean	true
baseUrl	用於解析非相對模塊名稱的基目錄。	string	-
paths	指定相對於baseUrl選項計算的路徑映射。	object	見demo

使用webpack別名

要使IntelliSense使用webpack別名，您須要使用glob模式指定paths鍵。
例如，對於別名'ClientApp'_(或@)：

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

而後使用別名

import Something from 'ClientApp/foo'
// 或 import Something from '@/foo'

最佳實踐

只要有可能，您應該使用不屬於項目源代碼的JavaScript文件排除文件夾。

提示：若是工做空間中沒有jsconfig.json，則默認狀況下，VS Code將排除node_modules文件夾。

下面是一個將常見項目組件映射到其安裝文件夾的表，建議將其排除在外：

組件	要排除的文件夾
node	排除node_modules文件夾
webpack, webpack-dev-server	排除內容文件夾，例如dist。
bower	排除bower_components文件夾
ember	排除tmp和temp文件夾
jspm	排除jspm_packages文件夾

當您的JavaScript項目變得太大而性能變慢時，一般是由於像node_modules這樣的庫文件夾。 若是VS Code檢測到您的項目變得過大，則會提示您編輯排除列表。

提示：有時沒法正確選擇更改配置，例如添加或編輯jsconfig.json文件。 運行Reload JavaScript Project命令應從新加載項目並獲取更改。

使用TypeScript編譯器進行低級編譯

當tsc用於將ES6 JavaScript向下級編譯爲舊版本時，jsconfig.json中的如下編譯器選項適用：

選項	描述
module	指定模塊代碼生成。 值爲「commonjs」，「system」，「umd」，「amd」，「es6」，「es2015」
diagnostics	顯示診斷信息。
emitBOM	在輸出文件的開頭髮出UTF-8字節順序標記（BOM）。
inlineSourceMap	使用源映射發出單個文件，而不是使用單獨的文件。
inlineSources	在單個文件中將源與源圖一塊兒發出; 須要設置--inlineSourceMap。
jsx	指定JSX代碼生成：「保留」或「反應」?。
reactNamespace	指定在針對'react'JSX發出的目標時爲createElement和__spread調用的對象。
mapRoot	將位置指定爲字符串中的uri，其中調試器應該找到映射文件而不是生成的位置。
noEmit	不發起輸出。
noEmitHelpers	不在編譯輸出中生成自定義輔助函數，如__extends。
noEmitOnError	若是報告任何類型檢查錯誤，不發起輸出。
noResolve	不將三斜槓引用或模塊導入目標解析爲輸入文件。
outFile	鏈接並將輸出發送到單個文件。
outDir	將輸出結構重定向到目錄。
removeComments	不向輸出發出註釋。
rootDir	指定輸入文件的根目錄。用於經過--outDir控制輸出目錄結構。
sourceMap	生成相應的'.map'文件。
sourceRoot	指定調試器應該找到JavaScript文件而不是源位置的位置。
stripInternal	不爲具備'@internal'註釋的代碼發出聲明。
watch	監聽輸入文件。
emitDecoratorMetadata	在源中爲裝飾聲明發出設計類型元數據。
noImplicitUseStrict	不在模塊輸出中發出「use strict」指令。

這個文檔有用麼？

參考：
JavaScript語言服務
TypeScript tsconfig.json
glob模式
glob (programming))
webpack模板裏import路徑中@符號是什麼意思？

---

翻譯：Xindot
原文：https://code.visualstudio.com...

---