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