vscode vue3中jsconfig與tsconfig的區(qū)別詳細(xì)講解
1、基本說明
jsconfig.json和tsconfig.js的主要區(qū)別在于它們的應(yīng)用場(chǎng)景和功能。
應(yīng)用場(chǎng)景
- jsconfig.json:主要用于JavaScript項(xiàng)目,特別是那些需要JavaScript語言服務(wù)支持的項(xiàng)目。它相當(dāng)于tsconfig.json的“allowJs”屬性設(shè)置為true,即允許JavaScript文件被TypeScript編譯器處理。
- tsconfig.json:專門用于TypeScript項(xiàng)目,用于指定編譯TypeScript代碼時(shí)的編譯選項(xiàng)和編譯目標(biāo)等信息。通過修改該文件,可以定制TypeScript編譯器的行為,例如指定編譯目標(biāo)、啟用或禁用特定的語言特性、設(shè)置代碼檢查規(guī)則等。
功能差異
- jsconfig.json:主要用于指定項(xiàng)目的根文件和JavaScript語言服務(wù)提供的功能選項(xiàng)。它可以幫助VSCode更好地處理項(xiàng)目,提供智能提示等功能。雖然jsconfig.json源于tsconfig.json,但默認(rèn)啟用了與JavaScript相關(guān)的編譯器標(biāo)志,適用于純JavaScript項(xiàng)目23。
- tsconfig.json:包含更詳細(xì)的編譯選項(xiàng),用于控制TypeScript編譯器的行為。它可以設(shè)置編譯目標(biāo)、模塊系統(tǒng)、是否啟用嚴(yán)格模式等,適用于TypeScript項(xiàng)目13。
配置方式
- jsconfig.json:可以通過VSCode等編輯器自動(dòng)生成,也可以通過手動(dòng)添加配置選項(xiàng)來實(shí)現(xiàn)。它主要用于提高開發(fā)體驗(yàn),如路徑智能提示等12。
- tsconfig.json:通常通過命令行工具如
tsc --init自動(dòng)生成,也可以手動(dòng)添加配置選項(xiàng)。它用于控制TypeScript編譯的具體行為和選項(xiàng)

2、基本配制
1. 配置 jsconfig.json
對(duì)于 JavaScript 項(xiàng)目,jsconfig.json 提供了一種方式來定義項(xiàng)目的結(jié)構(gòu)和特定的編譯選項(xiàng)。以下是一個(gè)基本的 jsconfig.json 配置示例
{
"compilerOptions": {
"target": "es5", // 指定 ECMAScript 目標(biāo)版本
"module": "esnext", // 指定生成代碼的模塊系統(tǒng)
"checkJs": true, // 允許在 js 文件中報(bào)告錯(cuò)誤
"allowJs": true, // 允許編譯 js 文件
"baseUrl": "./", // 指定非相對(duì)模塊名的解析基地址
"paths": { // 路徑映射,例如將特定導(dǎo)入重寫為本地文件
"*": ["types/*"]
}
},
"include": [ // 要包含的文件或目錄
"src/**/*"
],
"exclude": [ // 要排除的文件或目錄
"node_modules",
"dist"
]
}2. 配置 tsconfig.json
對(duì)于 TypeScript 項(xiàng)目,tsconfig.json 文件是核心配置文件,它允許你指定編譯選項(xiàng)和項(xiàng)目的結(jié)構(gòu)。以下是一個(gè)基本的 tsconfig.json 配置示例
{
"compilerOptions": {
"target": "es5", // 指定 ECMAScript 目標(biāo)版本
"module": "esnext", // 指定生成代碼的模塊系統(tǒng)
"strict": true, // 啟用所有嚴(yán)格類型檢查選項(xiàng)
"esModuleInterop": true, // 允許導(dǎo)入非 ES 模塊
"skipLibCheck": true, // 跳過聲明文件的類型檢查
"forceConsistentCasingInFileNames": true, // 禁止對(duì)同一個(gè)文件的不一致的引用
"baseUrl": "./", // 指定非相對(duì)模塊名的解析基地址
"paths": { // 路徑映射,例如將特定導(dǎo)入重寫為本地文件
"*": ["types/*"]
},
"outDir": "./dist", // 指定輸出目錄結(jié)構(gòu)
"rootDir": "./src", // 用來控制輸出目錄結(jié)構(gòu)的根文件夾
"allowJs": true, // 允許編譯 js 文件(即使它是 tsconfig.json)
"checkJs": true, // 報(bào)告 js 文件中的錯(cuò)誤
},
"include": [ // 要包含的文件或目錄
"src/**/*"
],
"exclude": [ // 要排除的文件或目錄
"node_modules",
"**/*.spec.ts"
]
}3、相關(guān)說明
目標(biāo)版本 (target): 根據(jù)你的運(yùn)行環(huán)境選擇合適的 ECMAScript 版本(如
es5,es6等)。模塊系統(tǒng) (module): 根據(jù)你的項(xiàng)目需要選擇合適的模塊系統(tǒng)(如
commonjs,es6,esnext等)。嚴(yán)格模式 (strict): 啟用后,TypeScript 會(huì)啟用所有嚴(yán)格類型檢查的選項(xiàng)。這對(duì)于保證代碼質(zhì)量非常有幫助。
輸出目錄 (outDir): 指定編譯后的文件輸出目錄。
包含與排除 (include, exclude): 控制哪些文件和目錄應(yīng)該被包含或排除在編譯過程中。通常,你會(huì)包括源代碼目錄,并排除如
node_modules和測(cè)試文件等。路徑映射 (paths): 在大型項(xiàng)目中,你可能需要將某些導(dǎo)入重定向到特定的本地文件或目錄。這可以通過路徑映射來實(shí)現(xiàn)。
檢查 JavaScript 文件 (checkJs): 對(duì)于 JavaScript 項(xiàng)目,即使使用了 TypeScript,你也可以開啟這個(gè)選項(xiàng)來檢查 JavaScript 文件中的錯(cuò)誤。
允許 JavaScript 文件 (allowJs): 在 TypeScript 項(xiàng)目中,允許 TypeScript 編譯器處理 JavaScript 文件。


3、最新生成的demo中的配制

tsconfig.json
{
"files": [],
"references": [
{
"path": "./tsconfig.node.json"
},
{
"path": "./tsconfig.app.json"
},
{
"path": "./tsconfig.vitest.json"
}
]
}
references:代表引用了下面的三個(gè)json文件,也就是說包含這三個(gè)。
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說明:
加了編譯項(xiàng),然后我們?nèi)绻霈F(xiàn)了鼠標(biāo)移上去Unknown的提示,比如說el-button,我們加了
"compilerOptions": {
"types": ["element-plus/global"]
}發(fā)現(xiàn)并沒有什么用,這樣的話,我們就要在include里加上這一個(gè)引用就可以了。
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的配制,還有端到端測(cè)試的配制等等。
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的配置項(xiàng),避免重復(fù)配置。
總結(jié)
到此這篇關(guān)于vscode vue3中jsconfig與tsconfig區(qū)別的文章就介紹到這了,更多相關(guān)vscode vue3 jsconfig與tsconfig內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
vue實(shí)現(xiàn)打印指定組件內(nèi)容的示例詳解
這篇文章主要和大家分享一下vue中打印指定組件內(nèi)容,多頁打印自動(dòng)適配紙張大小打印的方案,文中的示例代碼講解詳細(xì),需要的可以參考一下2024-03-03
在vue-cli創(chuàng)建的項(xiàng)目中使用sass操作
這篇文章主要介紹了在vue-cli創(chuàng)建的項(xiàng)目中使用sass操作,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-08-08
vue 實(shí)現(xiàn)通過手機(jī)發(fā)送短信驗(yàn)證碼注冊(cè)功能
這篇文章主要介紹了vue 實(shí)現(xiàn)通過手機(jī)發(fā)送短信驗(yàn)證碼注冊(cè)功能的相關(guān)資料,需要的朋友可以參考下2018-04-04
Vue Promise解決回調(diào)地獄問題實(shí)現(xiàn)方法
這篇文章主要介紹了Vue Promise解決回調(diào)地獄問題,總的來說這并不是一道難題,那為什么要拿出這道題介紹?拿出這道題真正想要傳達(dá)的是解題的思路,以及不斷優(yōu)化探尋最優(yōu)解的過程。希望通過這道題能給你帶來一種解題優(yōu)化的思路2023-01-01
Vue加載讀取本地txt/json等文件的實(shí)現(xiàn)方式
這篇文章主要介紹了Vue加載讀取本地txt/json等文件的實(shí)現(xiàn)方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10
使用Vant完成DatetimePicker 日期的選擇器操作
這篇文章主要介紹了使用Vant完成DatetimePicker 日期的選擇器操作,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-11-11
vue請(qǐng)求后端數(shù)據(jù)和跨域問題解決
這篇文章主要介紹了vue請(qǐng)求后端數(shù)據(jù)和跨域問題,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-05-05

