Eslint fix命令无法修复所有vue / html-indent错误

问题描述

我的.eslintrc.js中有一些整理规则，如下所示：

module.exports = {
  root: true,env: {
    browser: true,es6: true,node: true,},extends: ['plugin:vue/recommended','eslint:recommended'],parserOptions: {
    parser: 'babel-eslint',rules: {
    'import/extensions': 0,'import/no-unresolved': 0,'import/prefer-default-export': 0,'no-shadow': 0,// Todo: figure out this error in vuex state
    'no-param-reassign': 0,// Todo: figure out this error in vuex state
    'no-use-before-define': 0,// Todo: figure out this error in vuex state
    'no-underscore-dangle': 0,'no-useless-escape': 0,semi: [2,'never'],'vue/no-v-html': 0,'vue/custom-event-name-casing': 0,'vue/html-indent': [
      'error',4,{
        attribute: 1,baseIndent: 1,closeBracket: 0,alignAttributesvertically: true,ignores: [],],'vue/script-indent': [
      'error',2,{
        baseIndent: 1,switchCase: 1,'vue/max-attributes-per-line': [
      'error',{
        singleline: 1,multiline: {
          max: 1,allowFirstLine: true,'vue/html-closing-bracket-newline': [
      'error',{
        singleline: 'never',multiline: 'never','vue/html-self-closing': [
      'error',{
        html: {
          void: 'always',normal: 'always',component: 'always',svg: 'always',math: 'always','vue/attribute-hyphenation': ['error','always'],}

我将这些设置作为我的工作空间设置：

{
  "editor.tabSize": 4,"editor.insertSpaces": false,"editor.detectIndentation": false,"vetur.format.options.useTabs": false,"vetur.format.defaultFormatterOptions": {
    "prettyhtml": {
      "printWidth": 120,"singleQuote": true
    },"js-beautify-html": {
      "wrap_attributes": "force-aligned","indent_size": 4
    }
  },"vetur.format.scriptinitialIndent": true,"vetur.format.styleInitialIndent": true,"vetur.format.defaultFormatter.js": "prettier-eslint","vetur.format.defaultFormatter.html": "js-beautify-html","html.format.wrapAttributes": "force","vetur.format.defaultFormatter.css": "none","vetur.format.defaultFormatter.scss": "prettier","editor.formatOnSave": true,"vetur.validation.template": false,"editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  }
}

当我保存文件并对文件进行格式化时，一切工作正常，那么格式化就可以了。但是当我跑步

eslint --fix --ext js,vue src

这显示了棉绒警告和错误，但不符合vue/html-indent规则。

如果组件看起来像这样：

<transition
        name="slide-fade"
        mode="in-out">
        <div
            v-if="showDesktopSearch"
            v-on-clickaway="away"
            class="desktop-search-component"
            :class="positionClass">
            This is the body
        </div>
</transition>

如果我保存该组件，则如下所示：

<transition name="slide-fade"
                mode="in-out">
        <div v-if="showDesktopSearch"
             v-on-clickaway="away"
             class="desktop-search-component"
             :class="positionClass">
             This is the body
        </div>
</transition>

但是如果我运行linting命令，它看起来像这样：

<transition
        name="slide-fade"
        mode="in-out">
        <div
            v-if="showDesktopSearch"
            v-on-clickaway="away"
            class="desktop-search-component"
            :class="positionClass">
            This is the body
        </div>
</transition>

我想在运行lint命令时修复所有vue/html-indent错误，但是在这里我没有成功。如何从cli获取vetur / eslint格式？

解决方法

这是我的.eslintrc.js

module.exports = {
  root: true,env: {
    node: true,browser: true,},extends: ['plugin:vue/essential','plugin:prettier/recommended','@vue/prettier'],rules: {
    'eqeqeq': 'off','no-plusplus': 'off',"no-return-assign": "off",'max-len': ['error',{ code: 120,ignoreUrls: true,ignoreComments: true }],'linebreak-style': 0,'vue/max-attributes-per-line': 'off','vue/component-name-in-template-casing': ['error','PascalCase'],'no-console': 'off','no-restricted-syntax': [
      'error',{
        selector:
          "CallExpression[callee.object.name='console'][callee.property.name!=/^(log|warn|error|info|trace)$/]",message: 'Unexpected property on console object was called',],parserOptions: {
    parser: 'babel-eslint',};

还有.prettierrc

{
  "semi": true,"tabWidth": 2,"useTabs": false,"printWidth": 100,"singleQuote": true,"editor.insertSpaces": true,"trailingComma": "all","bracketSpacing": true,"jsxBracketSameLine": true,"arrowParens": "always"
}

还有vue.config.js

module.exports = {
  devServer: {
    host: '0.0.0.0',port: 3201,https: false,disableHostCheck: true,runtimeCompiler: true,chainWebpack: (config) => {
    config.module
      .rule('eslint')
      .use('eslint-loader')
      .options({
        fix: true,});
  },pluginOptions: {
    apollo: {
      enableMocks: true,enableEngine: false,// Cross-Origin options
      cors: '*',};

eslint eslint html vue.js