目錄中出現(xiàn) jsconfig.json 文件表明該目錄是 JavaScript 項(xiàng)目的根目錄。 Json 文件指定了根文件和 JavaScript 語言服務(wù)提供的特性的選項(xiàng)。
提示: 如果你不使用 JavaScript，你不需要擔(dān)心 jsconfig.json。
提示: jsconfig.json 是 tsconfig.json 的后代，后者是 TypeScript 的配置文件。 Json 是 tsconfig.json，“ allowJs”屬性設(shè)置為 true。
為什么我需要一個(gè) jsconfig.json 文件
因?yàn)閂sCode的 JavaScript 支持可以在兩種不同的模式下運(yùn)行:
- Scope-no jsconfig.json: 文件在這種模式下，在 Visual Studio Code 中打開的 JavaScript 文件被視為獨(dú)立的單元。 只要文件 a.js 沒有顯式引用文件 b.ts (使用 import 或 CommonJS 模塊) ，這兩個(gè)文件之間就不存在通用的項(xiàng)目上下文。
- Explicit Project-with jsconfig.json: JavaScript 項(xiàng)目通過 jsconfig.json 文件定義。 目錄中出現(xiàn)這樣的文件表明該目錄是 JavaScript 項(xiàng)目的根目錄。 文件本身可以選擇列出屬于項(xiàng)目的文件、要從項(xiàng)目中排除的文件以及編譯器選項(xiàng)(見下文)。
當(dāng)工作區(qū)中有一個(gè) jsconfig.json 文件來定義項(xiàng)目上下文時(shí)，JavaScript 體驗(yàn)會(huì)得到改善。 出于這個(gè)原因，我們提示您在一個(gè)全新的工作區(qū)中打開一個(gè) JavaScript 文件時(shí)創(chuàng)建一個(gè) jsconfig.json 文件。
Location of jsconfig.json
我們通過創(chuàng)建一個(gè) jsconfig.json 文件來定義我們代碼的這一部分，我們網(wǎng)站的客戶端，作為一個(gè) JavaScript 項(xiàng)目。 將文件放在 JavaScript 代碼的根目錄下，如下所示。
在更復(fù)雜的項(xiàng)目中，您可能在工作區(qū)中定義了多個(gè) jsconfig.json 文件。 您希望這樣做，這樣一個(gè)項(xiàng)目中的代碼就不會(huì)被建議作為 IntelliSense 在另一個(gè)項(xiàng)目中進(jìn)行編碼。 下面是一個(gè)帶有客戶端和服務(wù)器文件夾的項(xiàng)目，展示了兩個(gè)獨(dú)立的 JavaScript 項(xiàng)目。
例子
默認(rèn)情況下，JavaScript 語言服務(wù)將為您的 JavaScript 項(xiàng)目中的所有文件分析并提供 IntelliSense。 為了提供正確的智能感知，您需要指定要排除或包含哪些文件。
使用 “exclude”
Exclude 屬性(glob 模式)告訴語言服務(wù)哪些文件不是源代碼的一部分。 這使性能保持在一個(gè)高水平。 如果 IntelliSense 速度慢，則向排除列表添加文件夾(如果檢測(cè)到速度慢，VS 代碼將提示您這樣做)。
{
"compilerOptions": {
"module": "commonjs",
"target": "es6"
},
"exclude": ["node_modules"]
}
提示: 您希望排除由構(gòu)建過程生成的文件(例如，dist 目錄)。 這些文件將導(dǎo)致建議顯示兩次，并將減緩智能感知。
使用 “include”
或者，您可以使用 include 屬性(glob 模式)顯式地設(shè)置項(xiàng)目中的文件。 如果沒有 include 屬性，則默認(rèn)情況下包含包含目錄和子目錄中的所有文件。 如果指定了 include 屬性，則只包含這些文件。 下面是一個(gè)帶有明確 include 屬性的示例。
{
"compilerOptions": {
"module": "commonjs",
"target": "es6"
},
"include": ["src/**/*"]
}
提示: exclude 和 include 中的文件路徑相對(duì)于 jsconfig.json 的位置
jsconfig Options 選項(xiàng)
下面是 jsconfig“ compilerOptions”來配置 JavaScript 語言支持。
compilerOptions
提示: 不要被 compilerOptions 搞糊涂了。 這個(gè)屬性之所以存在，是因?yàn)?jsconfig.json 是 tsconfig.json 的后代，后者用于編譯打字稿。
| 屬性 |
描述 |
| nolib |
不要包含默認(rèn)的庫文件(lib.d.ts) |
| target |
指定要使用的默認(rèn)庫(lib.d.ts)。值為 "es3", "es5", "es6", "es2015", "es2016", "es2017", "es2018", "es2019", "es2020", "esnext". |
| module |
在生成模塊代碼時(shí)指定模塊系統(tǒng)。值為“ amd”、“ commonJS”、“ es2015”、“ es6”、“ esnext”、“ none”、“ system”、“ umd” |
| moduleResolution |
指定如何解析導(dǎo)入模塊。值為“node”和“classic” |
| checkJs |
啟用 JavaScript 文件的類型檢查 |
| experimentalDecorators |
為提議的 ES 裝飾器提供實(shí)驗(yàn)支持 |
| allowSyntheticDefaultImports |
允許從沒有默認(rèn)導(dǎo)出的模塊進(jìn)行默認(rèn)導(dǎo)入。這不影響代碼，只是進(jìn)行類型檢查 |
| baseUrl |
解析非相關(guān)模塊名稱的基礎(chǔ)目錄 |
| paths |
指定相對(duì)于 baseUrl 選項(xiàng)計(jì)算的路徑映射 |
您可以在TypeScript compilerOptions documentation .文檔中了解有關(guān)可用 compilerOptions 的更多信息。
使用 webpack 別名
要使用 webpack 別名，智能感知需要使用 glob 模式指定路徑鍵。
例如，使用 ClientApp 別名:
{
"compilerOptions": {
"baseUrl": ".",
"paths": {
"ClientApp/*": ["./ClientApp/*"]
}
}
}
然后用化名
import Something from 'ClientApp/foo';
最佳的使用方案
只要有可能，就應(yīng)該排除包含不屬于項(xiàng)目源代碼的 JavaScript 文件的文件夾。
提示: 如果您的工作區(qū)中沒有 jsconfig.json，VS Code 將默認(rèn)排除 node_modules 文件夾。
下面是一個(gè)表格，將常見的項(xiàng)目組件映射到建議排除的安裝文件夾:
| 組件 |
排除的目錄 |
| node |
排除 node_modules 文件目錄 |
| webpack webpack-dev-server |
排除 dist 文件目錄 |
| bower |
排除 bower_components 文件目錄 |
| ember |
排除 tmp 及 temp 文件目錄 |
| jspm |
排除 jspm_packages 文件目錄 |
|
當(dāng)你的 JavaScript 項(xiàng)目變得太大而且性能降低時(shí)，通常是因?yàn)轭愃苙ode_modules的庫文件夾。 如果 VS 代碼檢測(cè)到項(xiàng)目變得太大，它將提示您編輯exclude。
到此這篇關(guān)于VsCode的jsconfig配置文件說明詳解的文章就介紹到這了,更多相關(guān)VsCode jsconfig配置內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
您可能感興趣的文章:- vscode使用editorconfig插件以及.editorconfig配置文件說明詳解
- VSCode配置C/C++并添加非工作區(qū)頭文件的方法
- vscode vue 文件模板的配置方法
- 解析VScode在Windows環(huán)境下c_cpp_properties.json文件配置問題(推薦)
