如何让VueJS + ESLint（Airbnb）+更漂亮的合作？ （VSCode）

Question

过去几天我一直试着让头发上班，没有运气，所以我希望这里有人可以提供一些帮助！

基本上，我使用的是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引起了许多其他问题，因为我更喜欢/更漂亮，所以请不要说我的问题与其他正在寻求帮助的人做出反复说明。

Answer 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"
  },
};

当你找到更好的东西时别忘了更新！