2

我有一个 .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（无尾随空格）'

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

谢谢！

4

2 回答 2

2

在将 Prettier 与 Vetur 结合使用来格式化 .Vue 文件时，我能够测试并正确格式化。

以下是在 .Vue 文件中保存示例后的格式。

vue文件格式化

这是我的设置的样子。

在此处输入图像描述

这是 Prettier 代码格式化程序的链接： https ://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode

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

干杯!

于 2019-06-21T14:50:51.940 回答
0

尝试这个：

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

✅ 数组中的每个元素一行

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

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

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

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

希望能帮助到你 ：）

于 2019-06-15T21:01:25.830 回答