VS 代码 - 在 .vue 文件中格式化数组

Question

我有一个 .vue 文件，当我保存它时会自动格式化。这很好，但我有一个我无法理解的问题，也无法摆脱。 按照本指南 https://blog.jongallant.com/2019/02/vuejs-vetur-vscode-format-eslint-issues/ ，我设置了 VS 代码以使用 Vetur、beautify-js 和 ESLint。

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

然后像这样保存：

ESLint 然后抱怨两件事：

'预期缩进 8 个空格，但发现 0.eslint(indent)'

和

'不允许尾随空格.eslint(no-trailing-spaces)'

我在这里同意 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',
  },
};

谢谢！

Answer 1

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

这是将示例保存到 .Vue 文件后的格式。

这是我的设置。

这里是 Prettier Code Formatter 的链接： https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode

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

干杯！

Answer 2

试试这个：

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

✅数组中的每个元素一行

✅数组中的每个元素都有一个[行的缩进

✅ ❎ ⚠⚠⚠ 逗号后面没有空格 ⚠⚠⚠ , （但如果你有评论内联, // inline comment，可以加空格）

✅最后一个元素有逗号，如果你添加另一个元素，在 git 上没有区别。

另外，我更喜欢 4 个空格缩进和双引号，但这没关系。

希望对你有帮助:)