vscode vue3中jsconfig与tsconfig的区别详细讲解
作者:花花鱼
1、基本说明
jsconfig.json和tsconfig.js的主要区别在于它们的应用场景和功能。
应用场景
- jsconfig.json:主要用于JavaScript项目,特别是那些需要JavaScript语言服务支持的项目。它相当于tsconfig.json的“allowJs”属性设置为true,即允许JavaScript文件被TypeScript编译器处理。
- tsconfig.json:专门用于TypeScript项目,用于指定编译TypeScript代码时的编译选项和编译目标等信息。通过修改该文件,可以定制TypeScript编译器的行为,例如指定编译目标、启用或禁用特定的语言特性、设置代码检查规则等。
功能差异
- jsconfig.json:主要用于指定项目的根文件和JavaScript语言服务提供的功能选项。它可以帮助VSCode更好地处理项目,提供智能提示等功能。虽然jsconfig.json源于tsconfig.json,但默认启用了与JavaScript相关的编译器标志,适用于纯JavaScript项目23。
- tsconfig.json:包含更详细的编译选项,用于控制TypeScript编译器的行为。它可以设置编译目标、模块系统、是否启用严格模式等,适用于TypeScript项目13。
配置方式
- jsconfig.json:可以通过VSCode等编辑器自动生成,也可以通过手动添加配置选项来实现。它主要用于提高开发体验,如路径智能提示等12。
- tsconfig.json:通常通过命令行工具如
tsc --init
自动生成,也可以手动添加配置选项。它用于控制TypeScript编译的具体行为和选项
2、基本配制
1. 配置 jsconfig.json
对于 JavaScript 项目,jsconfig.json
提供了一种方式来定义项目的结构和特定的编译选项。以下是一个基本的 jsconfig.json
配置示例
{ "compilerOptions": { "target": "es5", // 指定 ECMAScript 目标版本 "module": "esnext", // 指定生成代码的模块系统 "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", // 指定生成代码的模块系统 "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): 根据你的运行环境选择合适的 ECMAScript 版本(如
es5
,es6
等)。模块系统 (module): 根据你的项目需要选择合适的模块系统(如
commonjs
,es6
,esnext
等)。严格模式 (strict): 启用后,TypeScript 会启用所有严格类型检查的选项。这对于保证代码质量非常有帮助。
输出目录 (outDir): 指定编译后的文件输出目录。
包含与排除 (include, exclude): 控制哪些文件和目录应该被包含或排除在编译过程中。通常,你会包括源代码目录,并排除如
node_modules
和测试文件等。路径映射 (paths): 在大型项目中,你可能需要将某些导入重定向到特定的本地文件或目录。这可以通过路径映射来实现。
检查 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说明:
加了编译项,然后我们如果出现了鼠标移上去Unknown的提示,比如说el-button,我们加了
"compilerOptions": { "types": ["element-plus/global"] }
发现并没有什么用,这样的话,我们就要在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区别的文章就介绍到这了,更多相关vscode vue3 jsconfig与tsconfig内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!