问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

tsconfig.vitest.json 如何正确配置？

头像
你好啊你好
    41922482

    image.png

    image.png

      "dependencies": {
    "@types/three": "^0.154.0",
    "pinia": "^2.0.28",
    "vue": "^3.2.45",
    "vue-axios": "^3.5.2",
    "vue-router": "^4.1.6"
  },
  "devDependencies": {
    "@rushstack/eslint-patch": "^1.1.4",
    "@types/jsdom": "^20.0.1",
    "@types/node": "^18.11.12",
    "@vitejs/plugin-vue": "^4.0.0",
    "@vitejs/plugin-vue-jsx": "^3.0.0",
    "@vue/eslint-config-prettier": "^7.0.0",
    "@vue/eslint-config-typescript": "^11.0.3",
    "@vue/test-utils": "^2.4.1",
    "@vue/tsconfig": "^0.4.0",
    "eslint": "^8.22.0",
    "eslint-plugin-vue": "^9.3.0",
    "jsdom": "^20.0.3",
    "less": "^4.1.3",
    "less-loader": "^11.1.0",
    "npm-run-all": "^4.1.5",
    "prettier": "^2.7.1",
    "terser": "^5.20.0",
    "typescript": "~5.2.2",
    "unplugin-vue-components": "^0.25.2",
    "vite": "^4.4.9",
    "vitest": "^0.25.6",
    "vue-tsc": "^1.8.10"
  }

    node v16.19.0
    vscode 最新的

    默认是没有设置 module 的；
    我是希望解决 import.meta 的警告，来设置 module 的。
    那么，现在应该如何做呢？

    {
    "module": "ESNext", 
    "moduleResolution": "node",
}

    似乎应当这样，但会不会有什么副作用？

    vitevue3
    阅读 1.7k
    avatarAI BotBETA

    您可以尝试以下配置：

    {
    "compilerOptions": {
        "module": "esnext",
        "target": "esnext",
        "strict": true,
        "jsx": "preserve",
        "importHelpers": true,
        "moduleResolution": "node",
        "esModuleInterop": true,
        "experimentalDecorators": true,
        "skipLibCheck": true,
        "forceConsistentCasingInFileNames": true
    },
    "include": [
        "src/**/*.ts",
        "src/**/*.tsx",
        "test/**/*.ts",
        "test/**/*.tsx"
    ],
    "exclude": ["node_modules"]
}

    这里我们指定了 module 为 "esnext"，这样 TypeScript 会使用最新的 JavaScript 模块语法，您也可以根据需要调整为其他模块类型。同时，target 设置为 "esnext"，使得我们可以在编译时生成最新的 JavaScript 代码。strict 设置为 true，可以让 TypeScript 启用所有严格的类型检查选项。jsx 设置为 "preserve"，表示保留 JSX 原始语法。importHelpers、moduleResolution、esModuleInterop 这三个选项用于优化模块导入和 ES6模块的转译。experimentalDecorators 用于开启装饰器的实验性支持。skipLibCheck 可以跳过对类型声明文件的检查，加快编译速度。forceConsistentCasingInFileNames 可以确保文件名的一致性，避免在不同操作系统中因大小写问题导致的导入错误。

    1 个回答
    得票最新
    头像
    然后去远足
      42.9k103763
      ✓ 已被采纳

      https://www.typescriptlang.org/docs/handbook/module-resolutio...

      Note: node module resolution is the most-commonly used in the TypeScript community and is recommended for most projects. If you are having resolution problems with imports and exports in TypeScript, try setting moduleResolution: "node" to see if it fixes the issue.

      这个值是决定如何解析模块的，对于普通的导入导出没什么影响，但一旦你导入的包的 package.json 有 exports 这个字段的设置，就会有一些奇怪的表现。

      一般来说不需要特殊设置，沿用默认值就可以了（默认值是什么由 Node 版本、TS 版本和 module 参数设定综合决定）。

      TS v5.x 之后的话这个值建议设置成 bundler，这也是默认值。

      但说实话，无论设置成哪个值，我都没有复现出来题主截图中的错误（会有其他错误）。如果题主能提供一下环境信息（Node 版本、TS 版本、VSCode 版本、Vite 版本等等）是最好的了。

      撰写回答
      你尚未登录，登录后可以
      • 和开发者交流问题的细节
      • 关注并接收问题和回答的更新提醒
      • 参与内容的编辑和改进，让解决方法与时俱进
      推荐问题