Skip to content

[vue/html-indent] wrong indentation reported with just one prop/attr #375

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
sqal opened this issue Feb 3, 2018 · 8 comments
Closed

[vue/html-indent] wrong indentation reported with just one prop/attr #375

sqal opened this issue Feb 3, 2018 · 8 comments
Assignees

Comments

@sqal
Copy link

sqal commented Feb 3, 2018

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
Copy link
Member

Thank you for the report.

I confirmed it, and I will fix it.

@iujlaki
Copy link

iujlaki commented Mar 21, 2018

Hi,

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

@michalsnik
Copy link
Member

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

@iujlaki
Copy link

iujlaki commented Mar 21, 2018

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
Copy link
Member

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
Copy link

iujlaki commented Mar 22, 2018

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

@michalsnik michalsnik reopened this Mar 22, 2018
@michalsnik
Copy link
Member

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

@michalsnik michalsnik self-assigned this Mar 24, 2018
@iujlaki
Copy link

iujlaki commented Mar 26, 2018

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! 🙏

michalsnik pushed a commit that referenced this issue Jul 11, 2018
* Add Vue.extend support, add missing info about Vue.mixin check in readme

* Docs: fixes wording in docs (#372)

* Fix: fix script-indent to prevent removing <script> tag (fixes #367) (#374)

*  [Update] Make `vue/max-attributes-per-line` fixable (#380)

* [Update] Make `vue/max-attributes-per-line` fixable

* [fix] bug and style

* [fix] Switch indent calculation method with node and attribute

* [fix] don't handle indentation

* [add] autofix test max-attributes-per-line.js

* Update: make `vue/order-in-components` fixable (#381)

* [Update] Make `vue/order-in-components` fixable

This Commit makes `vue/order-in-components` fixable.
In case of `The "A" property should be above the "B" property` error, autofix will move A before B

* [fix] fail test at [email protected]

* [fix] If there is a possibility of a side effect, don't autofix

* [fix] failed test at node v4

* [update] use Traverser

* [fix] failed test [email protected]

* [fix] I used `output: null` to specify "not fix"

* Fix: no-async-in-computed-properties crash (fixes #390)

* Fix: valid-v-on false positive (fixes #351)

* Fix: indent rules false positive (fixes #375)

* [New] Add `prop-name-casing`

* fix message and category

* fix category

* fix test message

* Set category to undefined

* Add more tests and fix edge case scenario

* attribute order linting

* updating docs, tests and category

*  [New] Add rule `vue/no-use-v-if-with-v-for` (#2)

* [fix] `meta.docs.description` should not end with `.`  consistent-docs-description

* [fix] lint error caused by merging the master for conflict resolution

* [fix] That `vue/attributes-order` got duplicated when merging README

* [fixed] document `correct` and `incorrect` the contrary stated

* [fixed] error message
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

4 participants