vue.js - 如何让 VueJS + ESLint (Airbnb) + Prettier 协同工作？ (VS代码)

Question

在过去的几天里，我一直在竭尽全力试图让它发挥作用，但没有成功，所以我希望这里有人可以提供一些帮助!

本质上，我使用的是 VueJS，我非常喜欢 Airbnb 使用的 ESLint 规则，但我也想使用 prettier 进行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 出现很多其他问题，所以请不要说我的问题与其他人正在寻求 say react 帮助的问题重复。

Answer 1

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

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

vs 代码设置，:

{
  "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 代替。它只会通过一次(即使仍然存在错误)，因此您将 key 发送为垃圾邮件 - 这对于 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"
  },
};

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