Skip to content

'vue/html-indent' conflict with iview components #1300

Closed
@mazhewei

Description

@mazhewei

Tell us about your environment

  • ESLint version: ^5.14.0
  • eslint-plugin-vue version: ^7.0.0-beta.3
  • Node version: v12.14.0
  • IDE: Webstorm 2020.2.1

The problem you want to solve.
Here is a simple demo.

<template>
  <Input> <!--Input is a iView component, not html element.-->
    <!--ESLint: Expected indentation of 2 spaces but found 4 spaces.(vue/html-indent)-->
    <template #prepend>
      <p class="abc" v-if="true">123</p>
    </template>
  </Input>
</template>

This is not a bug of ESLint or eslint-plugin-vue, but iView uses the component name with the same name as the html native tag.
In order to solve this ESLint error, I just need to turn off this rule.

Like this,

// .eslintrc.js
module.exports = {
  root: true,

  env: {
    node: true
  },

  extends: [
    'plugin:vue/strongly-recommended'
  ],
  
  rules: {
    // Omit other rules
    "vue/html-indent": "off",
  },
  
  parserOptions: {
    parser: 'babel-eslint'
  },
}

However, when I use it with another rule vue/max-attributes-per-line, When I run vue-cli-service lint --max-warnings 0, things go wrong.

<!--Lint Result-->

<template>
  <Input> <!--Input is a iView component, not html element.-->
    <!--ESLint: Expected indentation of 2 spaces but found 4 spaces.(vue/html-indent)-->
    <template #prepend>
      <p
class="abc"
v-if="true">
123
</p>
    </template>
  </Input>
</template>

I am confused and need help.

Your take on the correct solution to problem.

  1. In vue/html-indent Rule Details, It ignores unknown AST nodes, maybe add a option, like this,

    rules: {
      // Omit other rules
      "vue/html-indent": ["error", type, {
        "attribute": 1,
        "baseIndent": 1,
        "closeBracket": 0,
        "alignAttributesVertically": true,
        "ignores": [],
        "caseSensitive": true // <= new option
      }],
    },
    

    In that Case, element like Input are seen as unknown AST nodes or components.

  2. Can the ignores attribute be used in this case?

    My idea is that regular matching, elements whose first letter is capitalized are ignored.

    But I don't know how to use ignores.

  3. Any other ideas?

Additional context

Thanks a lot!

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions