vscode vue3中jsconfig與tsconfig的區(qū)別詳細(xì)講解
1、基本說(shuō)明
jsconfig.json和tsconfig.js的主要區(qū)別在于它們的應(yīng)用場(chǎng)景和功能。
應(yīng)用場(chǎng)景
- jsconfig.json：主要用于JavaScript項(xiàng)目，特別是那些需要JavaScript語(yǔ)言服務(wù)支持的項(xiàng)目。它相當(dāng)于tsconfig.json的“allowJs”屬性設(shè)置為true，即允許JavaScript文件被TypeScript編譯器處理。
- tsconfig.json：專(zhuān)門(mén)用于TypeScript項(xiàng)目，用于指定編譯TypeScript代碼時(shí)的編譯選項(xiàng)和編譯目標(biāo)等信息。通過(guò)修改該文件，可以定制TypeScript編譯器的行為，例如指定編譯目標(biāo)、啟用或禁用特定的語(yǔ)言特性、設(shè)置代碼檢查規(guī)則等。
功能差異
- jsconfig.json：主要用于指定項(xiàng)目的根文件和JavaScript語(yǔ)言服務(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：可以通過(guò)VSCode等編輯器自動(dòng)生成，也可以通過(guò)手動(dòng)添加配置選項(xiàng)來(lái)實(shí)現(xiàn)。它主要用于提高開(kāi)發(fā)體驗(yàn)，如路徑智能提示等12。
- tsconfig.json：通常通過(guò)命令行工具如
tsc --init自動(dòng)生成，也可以手動(dòng)添加配置選項(xiàng)。它用于控制TypeScript編譯的具體行為和選項(xiàng)
2、基本配制
1. 配置 jsconfig.json
對(duì)于 JavaScript 項(xiàng)目，jsconfig.json 提供了一種方式來(lái)定義項(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)入重寫(xiě)為本地文件
"*": ["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)格類(lèi)型檢查選項(xiàng)
"esModuleInterop": true, // 允許導(dǎo)入非 ES 模塊
"skipLibCheck": true, // 跳過(guò)聲明文件的類(lèi)型檢查
"forceConsistentCasingInFileNames": true, // 禁止對(duì)同一個(gè)文件的不一致的引用
"baseUrl": "./", // 指定非相對(duì)模塊名的解析基地址
"paths": { // 路徑映射，例如將特定導(dǎo)入重寫(xiě)為本地文件
"*": ["types/*"]
},
"outDir": "./dist", // 指定輸出目錄結(jié)構(gòu)
"rootDir": "./src", // 用來(lái)控制輸出目錄結(jié)構(gòu)的根文件夾
"allowJs": true, // 允許編譯 js 文件(即使它是 tsconfig.json)
"checkJs": true, // 報(bào)告 js 文件中的錯(cuò)誤
},
"include": [ // 要包含的文件或目錄
"src/**/*"
],
"exclude": [ // 要排除的文件或目錄
"node_modules",
"**/*.spec.ts"
]
}3、相關(guān)說(shuō)明
目標(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)格類(lèi)型檢查的選項(xiàng)。這對(duì)于保證代碼質(zhì)量非常有幫助。
輸出目錄 (outDir): 指定編譯后的文件輸出目錄。
包含與排除 (include, exclude): 控制哪些文件和目錄應(yīng)該被包含或排除在編譯過(guò)程中。通常，你會(huì)包括源代碼目錄，并排除如
node_modules和測(cè)試文件等。路徑映射 (paths): 在大型項(xiàng)目中，你可能需要將某些導(dǎo)入重定向到特定的本地文件或目錄。這可以通過(guò)路徑映射來(lái)實(shí)現(xiàn)。
檢查 JavaScript 文件 (checkJs): 對(duì)于 JavaScript 項(xiàng)目，即使使用了 TypeScript，你也可以開(kāi)啟這個(gè)選項(xiàng)來(lái)檢查 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文件，也就是說(shuō)包含這三個(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說(shuō)明：
加了編譯項(xiàng)，然后我們?nèi)绻霈F(xiàn)了鼠標(biāo)移上去Unknown的提示，比如說(shuō)el-button，我們加了
"compilerOptions": {
"types": ["element-plus/global"]
}發(fā)現(xiàn)并沒(méi)有什么用，這樣的話(huà)，我們就要在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"]
}
}說(shuō)明：
繼承了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"]
}
}
說(shuō)明：
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-music關(guān)于Player播放器組件詳解
這篇文章主要為大家詳細(xì)介紹了vue-music關(guān)于Player播放器組件的相關(guān)資料，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-11-11
本篇文章主要介紹了Vue 組件間的樣式?jīng)_突污染，當(dāng)多個(gè)樣式出現(xiàn)時(shí)，就會(huì)導(dǎo)致樣式?jīng)_突，本文介紹了具體解決方法2017-08-08
這篇文章主要介紹了vue 自定義內(nèi)置組件 select的相關(guān)知識(shí)，整合了第三方j(luò)query 插件select2,具體實(shí)例代碼大家參考下本文2018-04-04
項(xiàng)目在線(xiàn)上會(huì)遇到管理員類(lèi)似權(quán)限比較大的用戶(hù),會(huì)在同一瀏覽器登陸多個(gè)賬號(hào),遇到這樣的問(wèn)題如何處理呢,下面小編給大家介紹vue同一瀏覽器登錄多賬號(hào)處理方法,感興趣的朋友一起看看吧2024-01-01
開(kāi)發(fā)一個(gè)封裝iframe的vue組件
這篇文章主要介紹了開(kāi)發(fā)一個(gè)封裝iframe的vue組件，幫助大家更好的理解和學(xué)習(xí)使用vue框架，感興趣的朋友可以了解下2021-03-03
Vue實(shí)現(xiàn)省市區(qū)三級(jí)聯(lián)動(dòng)
這篇文章主要為大家詳細(xì)介紹了Vue實(shí)現(xiàn)省市區(qū)三級(jí)聯(lián)動(dòng)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-12-12
dhtmlxGantt是一個(gè)強(qiáng)大的JavaScript Gantt圖表庫(kù),提供易于使用、高度可自定義的Gantt圖表組件,它支持多項(xiàng)任務(wù)和進(jìn)度條,以及多種列和行布局,可用于創(chuàng)建各種類(lèi)型的時(shí)間線(xiàn)和計(jì)劃表,本文給大家介紹前端vue實(shí)現(xiàn)甘特圖的相關(guān)知識(shí),感興趣的朋友跟隨小編一起看看吧2024-04-04
這篇文章主要為大家介紹了vite插件打包更順暢的使用技巧示例，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-06-06
這篇文章主要介紹了vue如何獲取配置代理文件中的api地址值，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
解決vue中使用swiper 插件出錯(cuò)的問(wèn)題
這篇文章主要介紹了vue中使用swiper 插件出錯(cuò)問(wèn)題及解決辦法，本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2021-08-08