Description
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.
-
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. -
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
. -
Any other ideas?
Additional context
Thanks a lot!