目錄中出現 jsconfig.json 文件表明該目錄是 JavaScript 項目的根目錄。 Json 文件指定了根文件和 JavaScript 語言服務提供的特性的選項。
提示: 如果你不使用 JavaScript，你不需要擔心 jsconfig.json。
提示: jsconfig.json 是 tsconfig.json 的后代，后者是 TypeScript 的配置文件。 Json 是 tsconfig.json，“ allowJs”屬性設置為 true。
為什么我需要一個 jsconfig.json 文件
因為VsCode的 JavaScript 支持可以在兩種不同的模式下運行:
- Scope-no jsconfig.json: 文件在這種模式下，在 Visual Studio Code 中打開的 JavaScript 文件被視為獨立的單元。 只要文件 a.js 沒有顯式引用文件 b.ts (使用 import 或 CommonJS 模塊) ，這兩個文件之間就不存在通用的項目上下文。
- Explicit Project-with jsconfig.json: JavaScript 項目通過 jsconfig.json 文件定義。 目錄中出現這樣的文件表明該目錄是 JavaScript 項目的根目錄。 文件本身可以選擇列出屬于項目的文件、要從項目中排除的文件以及編譯器選項(見下文)。
當工作區中有一個 jsconfig.json 文件來定義項目上下文時，JavaScript 體驗會得到改善。 出于這個原因，我們提示您在一個全新的工作區中打開一個 JavaScript 文件時創建一個 jsconfig.json 文件。
Location of jsconfig.json
我們通過創建一個 jsconfig.json 文件來定義我們代碼的這一部分，我們網站的客戶端，作為一個 JavaScript 項目。 將文件放在 JavaScript 代碼的根目錄下，如下所示。
在更復雜的項目中，您可能在工作區中定義了多個 jsconfig.json 文件。 您希望這樣做，這樣一個項目中的代碼就不會被建議作為 IntelliSense 在另一個項目中進行編碼。 下面是一個帶有客戶端和服務器文件夾的項目，展示了兩個獨立的 JavaScript 項目。
例子
默認情況下，JavaScript 語言服務將為您的 JavaScript 項目中的所有文件分析并提供 IntelliSense。 為了提供正確的智能感知，您需要指定要排除或包含哪些文件。
使用 “exclude”
Exclude 屬性(glob 模式)告訴語言服務哪些文件不是源代碼的一部分。 這使性能保持在一個高水平。 如果 IntelliSense 速度慢，則向排除列表添加文件夾(如果檢測到速度慢，VS 代碼將提示您這樣做)。
|
1
2
3
4
5
6
7
|
{ "compilerOptions": { "module": "commonjs", "target": "es6" }, "exclude": ["node_modules"]} |
提示: 您希望排除由構建過程生成的文件(例如，dist 目錄)。 這些文件將導致建議顯示兩次，并將減緩智能感知。
使用 “include”
或者，您可以使用 include 屬性(glob 模式)顯式地設置項目中的文件。 如果沒有 include 屬性，則默認情況下包含包含目錄和子目錄中的所有文件。 如果指定了 include 屬性，則只包含這些文件。 下面是一個帶有明確 include 屬性的示例。
|
1
2
3
4
5
6
7
|
{ "compilerOptions": { "module": "commonjs", "target": "es6" }, "include": ["src/**/*"]} |
提示: exclude 和 include 中的文件路徑相對于 jsconfig.json 的位置
jsconfig Options 選項
下面是 jsconfig“ compilerOptions”來配置 JavaScript 語言支持。
compilerOptions
提示: 不要被 compilerOptions 搞糊涂了。 這個屬性之所以存在，是因為 jsconfig.json 是 tsconfig.json 的后代，后者用于編譯打字稿。
| 屬性 | 描述 |
|---|---|
| nolib | 不要包含默認的庫文件(lib.d.ts) |
| target | 指定要使用的默認庫(lib.d.ts)。值為 "es3", "es5", "es6", "es2015", "es2016", "es2017", "es2018", "es2019", "es2020", "esnext". |
| module | 在生成模塊代碼時指定模塊系統。值為“ amd”、“ commonJS”、“ es2015”、“ es6”、“ esnext”、“ none”、“ system”、“ umd” |
| moduleResolution | 指定如何解析導入模塊。值為“node”和“classic” |
| checkJs | 啟用 JavaScript 文件的類型檢查 |
| experimentalDecorators | 為提議的 ES 裝飾器提供實驗支持 |
| allowSyntheticDefaultImports | 允許從沒有默認導出的模塊進行默認導入。這不影響代碼，只是進行類型檢查 |
| baseUrl | 解析非相關模塊名稱的基礎目錄 |
| paths | 指定相對于 baseUrl 選項計算的路徑映射 |
您可以在TypeScript compilerOptions documentation .文檔中了解有關可用 compilerOptions 的更多信息。
使用 webpack 別名
要使用 webpack 別名，智能感知需要使用 glob 模式指定路徑鍵。
例如，使用 ClientApp 別名:
|
1
2
3
4
5
6
7
8
|
{ "compilerOptions": { "baseUrl": ".", "paths": { "ClientApp/*": ["./ClientApp/*"] } }} |
然后用化名
|
1
|
import Something from 'ClientApp/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 代碼檢測到項目變得太大，它將提示您編輯exclude。
到此這篇關于VsCode的jsconfig配置文件說明詳解的文章就介紹到這了,更多相關VsCode jsconfig配置內容請搜索服務器之家以前的文章或繼續瀏覽下面的相關文章希望大家以后多多支持服務器之家！
原文鏈接：https://juejin.im/post/5ea8ebfd5188256d5a0d8517
