As I work on setting ESLint rules for my new Vue project, I am extending both eslint-plugin-vue and airbnb. All is well except for one issue - the indentation of the tag inside Vue components.
The usual accepted format looks like this:
<script>
export default {
name: 'Login',
};
</script>
However, I am striving to have a different code style approved:
<script>
export default {
name: 'Login',
};
</script>
I managed to achieve this using the rule vue/script-indent (link:here) by setting the baseIndent to 1. Despite this, the lint rule continues to raise complaints.
I attempted to address this in my .eslintrc.json file:
"overrides": [
{
"files": [",*.vue"],
"rules": {
"indent": "off"
}
}
]
I also explored using the ignoredNodes from indent rules (link:here) but struggled with accurate AST selectors.
Here is a snippet of my current .eslintrc.json file:
{
"extends": [
"plugin:vue/recommended",
"@vue/airbnb"
],
"rules": {
"indent": [2, 4],
"vue/html-indent": [2, 4],
"vue/script-indent": [2, 4, {
"baseIndent": 1
}],
"vue/singleline-html-element-content-newline": 0,
"vue/eqeqeq": 2
},
"plugins": [
"html"
]
}
Upon running lint, these errors crop up:
8:1 error Expected indentation of 0 spaces but found 4 indent
9:1 error Expected indentation of 4 spaces but found 8 indent
10:1 error Expected indentation of 0 spaces but found 4 indent