vscode中的 jsconfig.json

問題源頭:webpack模闆裡import路徑中@符号是什麼意思?

import ShuttleBoxfrom '@/components/ShuttleBox'

           

jsconfig.json

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(使用///引用指令或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”指令。

作者：Xindot

原文連結：https://www.jianshu.com/p/b0ec870ddfdf

翻譯：Xindot

原文：https://code.visualstudio.com/docs/languages/jsconfig