Eslint-plugin-vue: [vue/html-indent] wrong indentation reported with just one prop/attr

[sqal]

Tell us about your environment

• ESLint Version: 4.16.0
• eslint-plugin-vue Version: 4.2.2

Please show your full configuration:

module.exports = {
  root: true,
  extends: [
    'plugin:vue/recommended'
  ],
  parserOptions: {
    parser: 'babel-eslint'
  },
  plugins: ['vue'],
  rules: {
    'vue/html-indent': ['error', 2,  {
      alignAttributesVertically: true
    }],
    'vue/html-self-closing': ['error', {
      html: {
        void: 'never',
        normal: 'never',
        component: 'never'
      }
    }],
    'vue/max-attributes-per-line': ['error', {
      singleline: 3,
      multiline: {
        max: 1,
        allowFirstLine: false,
      }
    }],
  },
};

What did you do? Please include the actual source code causing the issue.

<template>
  <div>
    <my-component
      :foo="true">
    </my-component>
  </div>
</template>

Reproduction online

What did you expect to happen?

I expect vue/html-indent error to not being reported in that case

What actually happened? Please include the actual, raw output from ESLint.

 4:1 Expected indentation of 4 spaces but found 6 spaces. (vue/html-indent)

But if you add another prop after foo then it works as expected:

<my-component
  :foo="true"
  :bar="false">
</my-component>

Am i missing something in my configuration? 🤔

[mysticatea]

Thank you for the report.

I confirmed it, and I will fix it.

[iujlaki]

Hi,

We still have the problem with the same config above :(

[michalsnik]

Hey @iujlaki Are you sure you have the right version of eslint-plugin-vue installed? This reproduction seems to be working fine 🤔

[iujlaki]

Hey @michalsnik, yep it's the same. It's weird because it works on several Mac but in Linux it doesn't.
The only differences is with the node and npm versions:

• node v8.10.0
• npm v5.6.0

[michalsnik]

Perhaps you're running global eslint and have a plugin installed globally as well?
Does it happen if you execute:

./node_modules/.bin/eslint . --ext .js,.vue

?

[iujlaki]

We got the same error :(
What should I help to find out?

[michalsnik]

Show me your .eslintrc content @iujlaki and what versions of eslint-plugin-vue and vue-eslint-parser you have installed :)

[iujlaki]

Hi,

The versions are:

"eslint-plugin-vue": "4.2.2",
"vue-eslint-parser": "2.0.2"

and our .eslintrc.js file contains:

// https://eslint.org/docs/user-guide/configuring

module.exports = {
  root: true,
  parserOptions: {
    parser: 'babel-eslint'
  },
  env: {
    browser: true,
  },
  // https://github.com/vuejs/eslint-plugin-vue#priority-a-essential-error-prevention
  // consider switching to `plugin:vue/strongly-recommended` or `plugin:vue/recommended` for stricter rules.
  extends: ['plugin:vue/recommended', 'airbnb-base'],
  // required to lint *.vue files
  plugins: [
    'vue'
  ],
  // check if imports actually resolve
  settings: {
    'import/resolver': {
      webpack: {
        config: 'build/webpack.base.conf.js'
      }
    }
  },
  // add your custom rules here
  rules: {
    // don't require .vue extension when importing
    'import/extensions': ['error', 'always', {
      js: 'never',
      vue: 'never'
    }],
    // disallow reassignment of function parameters
    // disallow parameter object manipulation except for specific exclusions
    'no-param-reassign': ['error', {
      props: true,
      ignorePropertyModificationsFor: [
        'state', // for vuex state
        'acc', // for reduce accumulators
        'e' // for e.returnvalue
      ]
    }],
    // allow optionalDependencies
    'import/no-extraneous-dependencies': ['error', {
      optionalDependencies: ['test/unit/index.js']
    }],
    // allow debugger during development
    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off'
  }
}

Many thanks! 🙏