如何让 VueJS + ESLint (Airbnb) + Prettier 一起工作？ （VS代码）

Posted 2023-02-22

【中文标题】如何让 VueJS + ESLint (Airbnb) + Prettier 一起工作？ （VS代码）

【英文标题】：How to get VueJS + ESLint (Airbnb) + Prettier working together? (VSCode)

【发布时间】：2018-11-26 15:27:03

【问题描述】：

在过去的几天里，我一直在努力让这个工作，但没有运气，所以我希望这里的人可以提供一些帮助！

基本上，我使用的是 VueJS，我非常喜欢 Airbnb 使用的 ESLint 规则，但我也想使用更漂亮的 ONLY 格式。 （最大长度，缩进等...）所以，例如，而不是这样；

<li v-for="(item, index) in this.list" v-bind:key="index" v-if="showRandomFor">item</li>

会是这个； （或类似的东西）

但是，我永远无法做到这一点。我试过使用eslint-config-prettier，这根本没有帮助，因为即使将它包含到 eslint 配置中，仍然会应用更漂亮的规则（没有错误消息），所以我不确定如何处理这个。

非常感谢任何帮助，如果我可以提供任何其他信息或日志，请告诉我！

编辑： 只是为了澄清，我看过其他帖子。但我似乎找不到涉及 VueJS 的。 Vue 会导致 eslint/prettier 出现许多其他问题，所以请不要说我的问题与其他寻求帮助的人重复。

【问题讨论】：

Prettier + Airbnb's ESLint config的可能重复

不是重复的。将它与 Vue 一起使用会导致大部分问题，因为 Vue 模板是以下各项的组合： html、CSS 和 JS。我想找到解决这些问题的方法。 （这在其他线程中没有解决。）

一些消息 - prettier.io/blog/2018/11/07/1.15.0.html - 显然 Prettier 现在可以格式化 Vue 文件了。我也希望它将属性和指令拆分到新的行上。

【参考方案1】：

这个问题让我质疑我的人生选择，因为我发誓这更早。也许最新的 vs 代码更新改变了一些事情？

无论如何，在我们等待更好的东西时，这里是一个不太漂亮的 vs-code 答案：

vs-code 设置，：

  "vetur.validation.template": false,
  "prettier.eslintIntegration": true,
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    
      "language": "vue",
      "autoFix": true
    
  ],
  "eslint.run": "onType",
  "eslint.autoFixOnSave": true

虽然autoFixOnSave 有效，但无论如何我都无法让editor.action.formatDocument 收听我的esconfig（这一定已经改变了，对吧？对吧？？）那该怎么办？

我将我的 formatDocument-key 重新绑定为使用 eslint.executeAutofix。它只通过一次（即使仍然存在错误），所以你有垃圾邮件密钥 - 这在 html 属性中尤其明显，但我猜这是。

这是我的 .eslintrc.js：

module.exports = 
  root: true,
  extends: [
    "plugin:vue/recommended",
    'airbnb'
  ],
  parserOptions: 
    parser: "babel-eslint", // I guess we have prettier using eslint using babel-eslint? :(
    sourceType: "module"
  ,
;

当你发现更好的东西时不要忘记更新！