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的配置项，避免重复配置。