如何自动修复 vuejs 中的 tslint 错误

Posted 2023-03-13

【中文标题】如何自动修复 vuejs 中的 tslint 错误

【英文标题】：How can I auto fix tslint errors in vuejs

【发布时间】：2019-03-10 19:22:34

【问题描述】：

我在我的 vuejs/typescript 项目上运行 vue-cli-service lint --fix。像预期的那样，大多数 linting 错误/警告都会自动修复。

但是有特定的 tslint 规则（"semicolon": [true, "always", "ignore-interfaces"]）我想用这个命令自动修复。假设我的打字稿界面看起来像这样（预期的 lint 结果）。

interface component 
    type: "input" | "dropdown" | "checkbox",
    hidden?: boolean

运行 lint 后，它会像这样格式化它。留言是[eslint] Replace,with;(prettier/prettier)

interface component 
    type: "input" | "dropdown" | "checkbox";
    hidden?: boolean;

我已将这条规则"semicolon": [true, "always", "ignore-interfaces"] 添加到 tslint 文件中，但它不会改变结果。

【参考方案1】：

控制台消息 ([eslint] Replace , with ; (prettier/prettier)) 表明您在使用 Vue CLI 生成项目时选择了 ESLint + Prettier 选项；但 ESLint 不支持开箱即用的 tslint.json（需要 plugin，但 YMMV）。

另一种方法是切换到 TSLint，并编辑生成的 tslint.json 以包含您想要的 semicolon 规则。

【讨论】：

我尝试了该插件，但它似乎与 .vue 文件中的 templates 不兼容。也发现了这个。 github.com/vuejs/vue-cli/issues/761。感谢您的回复。

这似乎是known Prettier quirk。重新生成项目并选择TSLint linter选项不可行吗？

我可以，但就目前而言，这样做是微不足道的。我将与 github.com/alexjoverm/tslint-config-prettier 一起玩。但是看看 vue-cli 的问题，看起来它正在努力让 tslint-prettier 成为 vue 创建的一部分。