Vue/TypeScript/Linting 排除 .vue 文件

Posted 2023-03-13

【中文标题】Vue/TypeScript/Linting 排除 .vue 文件

【英文标题】：Vue/TypeScript/Linting exclude .vue files

【发布时间】：2021-11-23 10:31:01

【问题描述】：

我有一个 Vue2 项目，我正在慢慢转换为 TypeScript。我的第一阶段是检查 .js 文件，将它们重命名为 .ts 并确保它们通过 linting 规则。

问题是，当我运行构建时，它会拾取所有 .vue 文件（以及 .js 文件）并输出大量 linting 错误。

如何防止非 .ts 文件的 ts linting？

仅供参考 - 我尝试创建一个全新的 vue cli 项目并将 eslintrc、tsconfig 和相关的 package.json 部分复制到我的项目中。但是，这并不能解决问题。我还尝试将 tsconfig 文件的“包含”部分设置为仅指向我的一个简单的 .ts 文件（没有导入，只导出一个字符串）。但是，当我进行构建时，它仍然在抱怨每个 .vue、.js 等文件。

我不确定这是相关的还是单独的问题，但在解决了这个问题并且我已将所有 .js 转换为 .ts 文件后，我需要从 .vue 文件开始。这意味着我只需要定位具有 script lang=ts 标签的 .vue 文件。

【参考方案1】：

vue-cli-service lint 的参数被传递给 ESLint，因此您可以传递 --ext option 来指定要 lint 的文件扩展名。

例如，这个lint NPM 脚本只检查.ts 下./src 及其子目录下的文件：

// package.json

  "scripts": 
    "lint": "vue-cli-service lint ./src --ext .ts"
  

或者，您可以直接从命令行运行它，因为yarn 也将参数传递给底层 NPM 脚本：

yarn lint ./src --ext .ts

【讨论】：

您好，感谢您提供的信息。在这种情况下是否可以使用多个 linter，例如用于 ts 的 ts linter 和用于 js 的常规 linter？此外，这是否能够用于解析 vue 文件并在 script=ts 标签存在时应用 ts？谢谢！