歡迎您光臨本站 註冊首頁

VsCode的jsconfig配置文件說明詳解

←手機掃碼閱讀     retouched @ 2020-04-30 , reply:0

目錄中出現 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 代碼將提示您這樣做)。

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

提示: 您希望排除由構建過程生成的文件(例如,dist 目錄)。 這些文件將導致建議顯示兩次,並將減緩智能感知。

使用 “include”

或者,您可以使用 include 屬性(glob 模式)顯式地設置項目中的文件。 如果沒有 include 屬性,則默認情況下包含包含目錄和子目錄中的所有文件。 如果指定了 include 屬性,則只包含這些文件。 下面是一個帶有明確 include 屬性的示例。

{ "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 別名:

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

然後用化名

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。


[retouched ] VsCode的jsconfig配置文件說明詳解已經有604次圍觀

http://coctec.com/docs/vscode/show-post-232199.html