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美化功能，可以像这样格式化文档（因此，链接的文章:)），但是当我禁用它时，文档仍会被格式化。但是，如果我在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文件后，其格式如下。

这是我的设置。

以下是指向更漂亮代码格式化程序的链接： 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个空格的缩进和双引号，但这没关系。

希望它会有所帮助：）

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

2 个答案: