Eslint fix command is not fixing all of the vue/html-indent errors - html

Question

I have some linting rules in my .eslintrc.js which looks like the following:
module.exports = {
root: true,
env: {
browser: true,
es6: true,
node: true,
},
extends: ['plugin:vue/recommended', 'eslint:recommended'],
parserOptions: {
parser: 'babel-eslint',
},
rules: {
'import/extensions': 0,
'import/no-unresolved': 0,
'import/prefer-default-export': 0,
'no-shadow': 0, // TODO: figure out this error in vuex state
'no-param-reassign': 0, // TODO: figure out this error in vuex state
'no-use-before-define': 0, // TODO: figure out this error in vuex state
'no-underscore-dangle': 0,
'no-useless-escape': 0,
semi: [2, 'never'],
'vue/no-v-html': 0,
'vue/custom-event-name-casing': 0,
'vue/html-indent': [
'error',
4,
{
attribute: 1,
baseIndent: 1,
closeBracket: 0,
alignAttributesVertically: true,
ignores: [],
},
],
'vue/script-indent': [
'error',
2,
{
baseIndent: 1,
switchCase: 1,
ignores: [],
},
],
'vue/max-attributes-per-line': [
'error',
{
singleline: 1,
multiline: {
max: 1,
allowFirstLine: true,
},
},
],
'vue/html-closing-bracket-newline': [
'error',
{
singleline: 'never',
multiline: 'never',
},
],
'vue/html-self-closing': [
'error',
{
html: {
void: 'always',
normal: 'always',
component: 'always',
},
svg: 'always',
math: 'always',
},
],
'vue/attribute-hyphenation': ['error', 'always'],
},
}
I have these setup as my workspace settings:
{
"editor.tabSize": 4,
"editor.insertSpaces": false,
"editor.detectIndentation": false,
"vetur.format.options.useTabs": false,
"vetur.format.defaultFormatterOptions": {
"prettyhtml": {
"printWidth": 120,
"singleQuote": true
},
"js-beautify-html": {
"wrap_attributes": "force-aligned",
"indent_size": 4
}
},
"vetur.format.scriptInitialIndent": true,
"vetur.format.styleInitialIndent": true,
"vetur.format.defaultFormatter.js": "prettier-eslint",
"vetur.format.defaultFormatter.html": "js-beautify-html",
"html.format.wrapAttributes": "force",
"vetur.format.defaultFormatter.css": "none",
"vetur.format.defaultFormatter.scss": "prettier",
"editor.formatOnSave": true,
"vetur.validation.template": false,
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
}
}
When I save a file and format everything works fine, the formatting works. But when I run
eslint --fix --ext js,vue src
This shows the lint warnings and errors, but doesn't comply with the vue/html-indent rule.
If the component looks like this:
<transition
name="slide-fade"
mode="in-out">
<div
v-if="showDesktopSearch"
v-on-clickaway="away"
class="desktop-search-component"
:class="positionClass">
This is the body
</div>
</transition>
If I save the component looks like this:
<transition name="slide-fade"
mode="in-out">
<div v-if="showDesktopSearch"
v-on-clickaway="away"
class="desktop-search-component"
:class="positionClass">
This is the body
</div>
</transition>
But if I run the linting command, it looks like this:
<transition
name="slide-fade"
mode="in-out">
<div
v-if="showDesktopSearch"
v-on-clickaway="away"
class="desktop-search-component"
:class="positionClass">
This is the body
</div>
</transition>
I want to fix all of the vue/html-indent errors when running the lint command, but I have been unsuccessful here. How can I get the vetur/eslint format from cli?

Answer 1

This is my .eslintrc.js
module.exports = {
root: true,
env: {
node: true,
browser: true,
},
extends: ['plugin:vue/essential', 'plugin:prettier/recommended', '#vue/prettier'],
rules: {
'eqeqeq': 'off',
'no-plusplus': 'off',
"no-return-assign": "off",
'max-len': ['error', { code: 120, ignoreUrls: true, ignoreComments: true }],
'linebreak-style': 0,
'vue/max-attributes-per-line': 'off',
'vue/component-name-in-template-casing': ['error', 'PascalCase'],
'no-console': 'off',
'no-restricted-syntax': [
'error',
{
selector:
"CallExpression[callee.object.name='console'][callee.property.name!=/^(log|warn|error|info|trace)$/]",
message: 'Unexpected property on console object was called',
},
],
},
parserOptions: {
parser: 'babel-eslint',
},
};
And .prettierrc
{
"semi": true,
"tabWidth": 2,
"useTabs": false,
"printWidth": 100,
"singleQuote": true,
"editor.insertSpaces": true,
"trailingComma": "all",
"bracketSpacing": true,
"jsxBracketSameLine": true,
"arrowParens": "always"
}
And vue.config.js
module.exports = {
devServer: {
host: '0.0.0.0',
port: 3201,
https: false,
disableHostCheck: true,
},
runtimeCompiler: true,
chainWebpack: (config) => {
config.module
.rule('eslint')
.use('eslint-loader')
.options({
fix: true,
});
},
pluginOptions: {
apollo: {
enableMocks: true,
enableEngine: false,
// Cross-Origin options
cors: '*',
},
},
};