vue.js

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript类库 > vue.js > vscode vue3 jsconfig与tsconfig

vscode vue3中jsconfig与tsconfig的区别详细讲解

作者:花花鱼

这篇文章主要介绍了vscode vue3中jsconfig与tsconfig区别的相关资料,jsconfig.json用于JavaScript项目,允许处理JS文件,tsconfig.json用于TypeScript项目,控制编译选项,文中通过代码介绍的非常详细,需要的朋友可以参考下

1、基本说明

‌jsconfig.json和tsconfig.js的主要区别在于它们的应用场景和功能。

应用场景

功能差异

配置方式

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、相关说明

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内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

您可能感兴趣的文章:
阅读全文