vscode vue3中jsconfig與tsconfig的區(qū)別詳細(xì)講解
1、基本說明
jsconfig.json和tsconfig.js的主要區(qū)別在于它們的應(yīng)用場景和功能。
應(yīng)用場景
- jsconfig.json：主要用于JavaScript項目，特別是那些需要JavaScript語言服務(wù)支持的項目。它相當(dāng)于tsconfig.json的“allowJs”屬性設(shè)置為true，即允許JavaScript文件被TypeScript編譯器處理。
- tsconfig.json：專門用于TypeScript項目，用于指定編譯TypeScript代碼時的編譯選項和編譯目標(biāo)等信息。通過修改該文件，可以定制TypeScript編譯器的行為，例如指定編譯目標(biāo)、啟用或禁用特定的語言特性、設(shè)置代碼檢查規(guī)則等。
功能差異
- jsconfig.json：主要用于指定項目的根文件和JavaScript語言服務(wù)提供的功能選項。它可以幫助VSCode更好地處理項目，提供智能提示等功能。雖然jsconfig.json源于tsconfig.json，但默認(rèn)啟用了與JavaScript相關(guān)的編譯器標(biāo)志，適用于純JavaScript項目23。
- tsconfig.json：包含更詳細(xì)的編譯選項，用于控制TypeScript編譯器的行為。它可以設(shè)置編譯目標(biāo)、模塊系統(tǒng)、是否啟用嚴(yán)格模式等，適用于TypeScript項目13。
配置方式
- jsconfig.json：可以通過VSCode等編輯器自動生成，也可以通過手動添加配置選項來實現(xiàn)。它主要用于提高開發(fā)體驗，如路徑智能提示等12。
- tsconfig.json：通常通過命令行工具如
tsc --init自動生成，也可以手動添加配置選項。它用于控制TypeScript編譯的具體行為和選項
2、基本配制
1. 配置 jsconfig.json
對于 JavaScript 項目，jsconfig.json 提供了一種方式來定義項目的結(jié)構(gòu)和特定的編譯選項。以下是一個基本的 jsconfig.json 配置示例
{
"compilerOptions": {
"target": "es5", // 指定 ECMAScript 目標(biāo)版本
"module": "esnext", // 指定生成代碼的模塊系統(tǒng)
"checkJs": true, // 允許在 js 文件中報告錯誤
"allowJs": true, // 允許編譯 js 文件
"baseUrl": "./", // 指定非相對模塊名的解析基地址
"paths": { // 路徑映射，例如將特定導(dǎo)入重寫為本地文件
"*": ["types/*"]
}
},
"include": [ // 要包含的文件或目錄
"src/**/*"
],
"exclude": [ // 要排除的文件或目錄
"node_modules",
"dist"
]
}2. 配置 tsconfig.json
對于 TypeScript 項目，tsconfig.json 文件是核心配置文件，它允許你指定編譯選項和項目的結(jié)構(gòu)。以下是一個基本的 tsconfig.json 配置示例
{
"compilerOptions": {
"target": "es5", // 指定 ECMAScript 目標(biāo)版本
"module": "esnext", // 指定生成代碼的模塊系統(tǒng)
"strict": true, // 啟用所有嚴(yán)格類型檢查選項
"esModuleInterop": true, // 允許導(dǎo)入非 ES 模塊
"skipLibCheck": true, // 跳過聲明文件的類型檢查
"forceConsistentCasingInFileNames": true, // 禁止對同一個文件的不一致的引用
"baseUrl": "./", // 指定非相對模塊名的解析基地址
"paths": { // 路徑映射，例如將特定導(dǎo)入重寫為本地文件
"*": ["types/*"]
},
"outDir": "./dist", // 指定輸出目錄結(jié)構(gòu)
"rootDir": "./src", // 用來控制輸出目錄結(jié)構(gòu)的根文件夾
"allowJs": true, // 允許編譯 js 文件(即使它是 tsconfig.json)
"checkJs": true, // 報告 js 文件中的錯誤
},
"include": [ // 要包含的文件或目錄
"src/**/*"
],
"exclude": [ // 要排除的文件或目錄
"node_modules",
"**/*.spec.ts"
]
}3、相關(guān)說明
目標(biāo)版本 (target): 根據(jù)你的運行環(huán)境選擇合適的 ECMAScript 版本（如
es5,es6等）。模塊系統(tǒng) (module): 根據(jù)你的項目需要選擇合適的模塊系統(tǒng)（如
commonjs,es6,esnext等）。嚴(yán)格模式 (strict): 啟用后，TypeScript 會啟用所有嚴(yán)格類型檢查的選項。這對于保證代碼質(zhì)量非常有幫助。
輸出目錄 (outDir): 指定編譯后的文件輸出目錄。
包含與排除 (include, exclude): 控制哪些文件和目錄應(yīng)該被包含或排除在編譯過程中。通常，你會包括源代碼目錄，并排除如
node_modules和測試文件等。路徑映射 (paths): 在大型項目中，你可能需要將某些導(dǎo)入重定向到特定的本地文件或目錄。這可以通過路徑映射來實現(xiàn)。
檢查 JavaScript 文件 (checkJs): 對于 JavaScript 項目，即使使用了 TypeScript，你也可以開啟這個選項來檢查 JavaScript 文件中的錯誤。
允許 JavaScript 文件 (allowJs): 在 TypeScript 項目中，允許 TypeScript 編譯器處理 JavaScript 文件。
3、最新生成的demo中的配制
tsconfig.json
{
"files": [],
"references": [
{
"path": "./tsconfig.node.json"
},
{
"path": "./tsconfig.app.json"
},
{
"path": "./tsconfig.vitest.json"
}
]
}
references:代表引用了下面的三個json文件，也就是說包含這三個。
tsconfig.app.json
{
"extends": "@vue/tsconfig/tsconfig.dom.json",
"include": ["env.d.ts", "src/**/*", "src/**/*.vue"],
"exclude": ["src/**/__tests__/*"],
"compilerOptions": {
"tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
"paths": {
"@/*": ["./src/*"]
}
}
}
include說明：
加了編譯項，然后我們?nèi)绻霈F(xiàn)了鼠標(biāo)移上去Unknown的提示，比如說el-button，我們加了
"compilerOptions": {
"types": ["element-plus/global"]
}發(fā)現(xiàn)并沒有什么用，這樣的話，我們就要在include里加上這一個引用就可以了。
tsconfig.node.json
{
"extends": "@tsconfig/node22/tsconfig.json",
"include": [
"vite.config.*",
"vitest.config.*",
"cypress.config.*",
"nightwatch.conf.*",
"playwright.config.*",
"eslint.config.*"
],
"compilerOptions": {
"noEmit": true,
"tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
"module": "ESNext",
"moduleResolution": "Bundler",
"types": ["node"]
}
}說明：
繼承了node22/tsconfig.json的配制，包含了vite的配制，還有端到端測試的配制等等。
tsconfig.vitest.json
{
"extends": "./tsconfig.app.json",
"include": ["src/**/__tests__/*", "env.d.ts"],
"exclude": [],
"compilerOptions": {
"tsBuildInfoFile": "./node_modules/.tmp/tsconfig.vitest.tsbuildinfo",
"lib": [],
"types": ["node", "jsdom"]
}
}
說明：
extends：繼承tsconfig.app.json的配置項，避免重復(fù)配置。
總結(jié)
到此這篇關(guān)于vscode vue3中jsconfig與tsconfig區(qū)別的文章就介紹到這了,更多相關(guān)vscode vue3 jsconfig與tsconfig內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了Vue.js單向綁定和雙向綁定,結(jié)合實例形式分析了vue.js單向綁定與雙向綁定相關(guān)原理、實現(xiàn)方法及操作技巧,需要的朋友可以參考下2018-08-08
這篇文章主要和大家分享一下vue中打印指定組件內(nèi)容,多頁打印自動適配紙張大小打印的方案,文中的示例代碼講解詳細(xì),需要的可以參考一下2024-03-03
這篇文章主要為大家介紹了Vue的鍵盤事件，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2022-01-01
這篇文章主要為大家詳細(xì)介紹了Vue實現(xiàn)步驟條效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-03-03
在vue-cli創(chuàng)建的項目中使用sass操作
這篇文章主要介紹了在vue-cli創(chuàng)建的項目中使用sass操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-08-08
vue 實現(xiàn)通過手機發(fā)送短信驗證碼注冊功能
這篇文章主要介紹了vue 實現(xiàn)通過手機發(fā)送短信驗證碼注冊功能的相關(guān)資料,需要的朋友可以參考下2018-04-04
Vue Promise解決回調(diào)地獄問題實現(xiàn)方法
這篇文章主要介紹了Vue Promise解決回調(diào)地獄問題，總的來說這并不是一道難題，那為什么要拿出這道題介紹？拿出這道題真正想要傳達(dá)的是解題的思路，以及不斷優(yōu)化探尋最優(yōu)解的過程。希望通過這道題能給你帶來一種解題優(yōu)化的思路2023-01-01
Vue加載讀取本地txt/json等文件的實現(xiàn)方式
這篇文章主要介紹了Vue加載讀取本地txt/json等文件的實現(xiàn)方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10
使用Vant完成DatetimePicker 日期的選擇器操作
這篇文章主要介紹了使用Vant完成DatetimePicker 日期的選擇器操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-11-11
這篇文章主要介紹了vue請求后端數(shù)據(jù)和跨域問題,本文通過實例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2023-05-05