Vue.js VS代码-格式化.vue文件中的数组

我有一个.vue文件，它在保存时会自动格式化。这很好，但我有一个我无法理解的问题，无法摆脱。 根据本指南，我已经设置了VS代码来使用Vetur、beautify js和ESLint

在.vue文件中，我有一个简单的数组。当我保存文件时，它会闪烁100毫秒，如下所示：

然后像这样保存：

然后，ESLint抱怨了两件事：

'预期缩进8个空格，但找到0.eslint（缩进）'

及

'不允许尾随空格。eslint（无尾随空格）'

我同意ESLint的观点，不想压制这些错误。其他格式都可以，但JS不是数组。我相信这是js beautify，它可以像这样格式化文档（因此链接的文章：），但是当我禁用它时，文档仍然会格式化。但是，如果我在eslint.validate（见下文）的vue部分将autofix设置为false，文档将不会格式化。所以我有点困惑

这是我的settings.json

{
  "explorer.confirmDragAndDrop": false,
  "vetur.validation.template": false,
  "editor.formatOnSave": true,
  "eslint.validate": [
    {
      "language": "vue",
      "autoFix": true
    },
    {
      "language": "html",
      "autoFix": true
    },
    {
      "language": "javascript",
      "autoFix": true
    }
  ],
  "explorer.confirmDelete": false,
  "eslint.autoFixOnSave": true,
  "html.format.wrapLineLength": 200,
  "editor.wordWrapColumn": 280,
  "editor.wordWrap": "on",
  "html.format.wrapAttributes": "force",
  "editor.snippetSuggestions": "top",
  "vetur.format.defaultFormatter.html": "js-beautify-html",
  "vetur.format.defaultFormatterOptions": {
    "js-beautify-html": {
      "wrap_attributes": "auto"
    }
  }
}

这是我的.eslintrc.js

module.exports = {
  root: true,
  env: {
    node: true,
  },
  plugins: ['es-beautifier'],

  extends: ['plugin:vue/essential', 'plugin:es-beautifier/standard'],

  rules: {
    'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
    'comma-dangle': ['error', 'never'],
    // 'no-trailing-spaces': [0],
    // indent: 'off',
    'linebreak-style': 'off',
  },
  parserOptions: {
    parser: 'babel-eslint',
  },
};

谢谢

试试这个：

    return {
      columns: [
        'test', 
        'test2',
        'test3',
        'test4',
        'Pest555',
        '66666666',
        'seven seven seven', 
      ],
    },

✅ 数组中的每个元素对应一行

✅ 数组中的每个元素都有一个以上的

[

行缩进

✅ ❎ ⚠⚠⚠ 逗号后没有空格⚠⚠⚠

，

（但是如果您有内联注释

，//内联注释

，则可以添加空格）

✅ 最后一个元素有逗号，若您添加另一个元素，那个么它在git上并没有区别

另外，我更喜欢4个空格的缩进和双引号，但这并不重要

---

希望它能帮上忙：）

当使用Prettier和Vetur组合格式化.Vue文件时，我能够测试并正确格式化它

下面是将示例保存到.Vue文件后的格式

以下是我的设置

以下是指向Prettier代码格式化程序的链接：

不确定交换扩展是否是您可以在项目中执行的操作，但它确实可以按照您的意愿格式化，并且可以阻止esLint对您大喊大叫

---

干杯！

在右下角是否显示“空格：8”？是否显示“空格：2”。这不是被格式化程序覆盖的VS代码吗？@Farsen你有没有给Vetur一个结合Prettier而不是BeautifJS的机会？谢谢你的回答。我基本上同意你的偏好，但我想你误解了我的问题。我正在寻找一种方法，让VS代码在保存vue文件时正确格式化我的代码，wi不要抱怨。