Javascript 如何为导入TypeScript模块的JS应用程序配置ESlint 目标

我有一个应用程序，我想逐步迁移到TypeScript。我希望能够：

• 在Vue单文件组件中导入

  *.ts

  文件
• 在常规

  *.js

  文件中导入

  *.ts

  文件
• 在

  *.ts

  文件中导入

  *.js

  文件

我的设置 该应用程序是使用vue cli 3.x设置的。我正在使用Airbnb ESLint配置

大多数应用程序都是用JS编写的，但所有新添加的模块都是用TypeScript编写的

在添加TypeScript之前，我的

.eslint.js

配置是：

module.exports={
根：是的，
环境：{
节点：对，
},
扩展：[
'插件：vue/essential'，
“@vue/airbnb”，
],
规则：{
“无控制台”：process.env.NODE_env==”生产“？”错误“：”关闭“，
“无调试器”：process.env.NODE_env==”生产“？”错误“：”关闭“，
},
解析选项：{
解析器：“babel eslint”，
},
};

安装

@vue/cli plugin-typescript

、

typescript

和

@vue/eslint-config-typescript

模块后（使用

vue-add@vue/typescript

命令），在导入

*.js

文件中的

*.ts

文件后，我开始出现eslint错误这些只是ESLint错误，而不是TypeScript或Babel编译错误

因此，我修改了

.eslint.js

配置，如下所示：

module.exports={
根：是的，
环境：{
节点：对，
},
扩展：[
'插件：vue/essential'，
“@vue/airbnb”，
],
规则：{
“无控制台”：process.env.NODE_env==”生产“？”错误“：”关闭“，
“无调试器”：process.env.NODE_env==”生产“？”错误“：”关闭“，
},
覆盖：[
{
档案：[
“***.js”，
“***.vue”
],
解析选项：{
解析器：“babel eslint”，
},
},
{
档案：[
“***.ts”
],
解析选项：{
解析器：“typescript eslint解析器”，
},
}
],
};

我添加了

override

部分，以便根据文件扩展名应用不同的解析器

我的

tsconfig.json

文件：

{
  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    "strict": true,
    "jsx": "preserve",
    "importHelpers": true,
    "moduleResolution": "node",
    "experimentalDecorators": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "sourceMap": true,
    "allowJs": true,
    "baseUrl": ".",
    "types": [
      "webpack-env",
      "jest"
    ],
    "paths": {
      "@/*": [
        "src/*"
      ]
    },
    "lib": [
      "esnext",
      "dom",
      "dom.iterable",
      "scripthost"
    ]
  },
  "include": [
    "src/**/*.ts",
    "src/**/*.tsx",
    "src/**/*.vue",
    "tests/**/*.ts",
    "tests/**/*.tsx"
  ],
  "exclude": [
    "node_modules"
  ]
}

因此，它是

vue cli

生成的标准

tsconfig.json

。我唯一改变的是

allowJs:true

——由于这一点，我可以导入没有

d.ts

类型定义的JS模块——这使得迁移更加容易

问题 这一切似乎都配置正确，但偶尔会出现ESLint错误。有时似乎使用

babel eslint

而不是

typescript eslint解析器来lint
*.ts
文件。我不知道如何复制它，但我几乎可以肯定，当我在
*.vue
文件中导入
*.ts
文件时，会发生这种情况。当我停止并再次启动Webpack时（使用
warn service
），错误通常会消失