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内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要为大家详细介绍了vue-music关于Player播放器组件的相关资料，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-11-11
本篇文章主要介绍了Vue 组件间的样式冲突污染，当多个样式出现时，就会导致样式冲突，本文介绍了具体解决方法2017-08-08
这篇文章主要介绍了vue 自定义内置组件 select的相关知识，整合了第三方jquery 插件select2,具体实例代码大家参考下本文2018-04-04
项目在线上会遇到管理员类似权限比较大的用户,会在同一浏览器登陆多个账号,遇到这样的问题如何处理呢,下面小编给大家介绍vue同一浏览器登录多账号处理方法,感兴趣的朋友一起看看吧2024-01-01
这篇文章主要介绍了开发一个封装iframe的vue组件，帮助大家更好的理解和学习使用vue框架，感兴趣的朋友可以了解下2021-03-03
这篇文章主要为大家详细介绍了Vue实现省市区三级联动，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-12-12
dhtmlxGantt是一个强大的JavaScript Gantt图表库,提供易于使用、高度可自定义的Gantt图表组件,它支持多项任务和进度条,以及多种列和行布局,可用于创建各种类型的时间线和计划表,本文给大家介绍前端vue实现甘特图的相关知识,感兴趣的朋友跟随小编一起看看吧2024-04-04
这篇文章主要为大家介绍了vite插件打包更顺畅的使用技巧示例，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-06-06
这篇文章主要介绍了vue如何获取配置代理文件中的api地址值，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-04-04
这篇文章主要介绍了vue中使用swiper 插件出错问题及解决办法，本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2021-08-08
最新评论