Vetur: Maybe some conflict whthin vetur format and eslint(recommit,add some picture and setting)

[L-Devil-GitHub]

• [ ] I have searched through existing issues
• [ ] I have read through docs
• [ ] I have read FAQ

Info

• Platform: Win
• Vetur version: last
• VS Code version: last

Problem

maybe some conflict between vetur format and eslint.
l can only provide some picture and my vscode setting.
if its my mistake of eslint config.please tell.
the rate of the problem happen is very low, may exist before the last update

Reproducible Case

thats the vscode formatted and eslint error

and the follow picture is the format which may eslint want

and follow is my setting

~ json
{
"editor.renderWhitespace": "all",
"editor.detectIndentation": false,
"files.insertFinalNewline": true,
"files.trimFinalNewlines": true,
"html.format.endWithNewline": true,
"html.format.indentInnerHtml": true,
"javascript.format.insertSpaceAfterOpeningAndBeforeClosingTemplateStringBraces": true,
"javascript.format.insertSpaceAfterOpeningAndBeforeClosingJsxExpressionBraces": true,
"window.zoomLevel": 0,
"team.showWelcomeMessage": false,
"workbench.activityBar.visible": true,
"workbench.statusBar.visible": true,
"workbench.editor.showTabs": true,
"window.menuBarVisibility": "default",
"git.autofetch": true,
"prettier.semi": true,
"prettier.singleQuote": true,
"prettier.trailingComma": "all",
"prettier.tabWidth": 4,
"eslint.validate": [
"javascript",
"javascriptreact",
"typescript",
"typescriptreact",
"vue"
],
"gitlens.keymap": "alternate",
"gitlens.gitExplorer.files.layout": "tree",
"gitlens.advanced.messages": {
"suppressCommitHasNoPreviousCommitWarning": false,
"suppressCommitNotFoundWarning": false,
"suppressFileNotUnderSourceControlWarning": false,
"suppressGitVersionWarning": false,
"suppressLineUncommittedWarning": false,
"suppressNoRepositoryWarning": false,
"suppressResultsExplorerNotice": false,
"suppressShowKeyBindingsNotice": true
},
"gitlens.historyExplorer.enabled": true,
"typescript.updateImportsOnFileMove.enabled": "always",
"vetur.format.defaultFormatter.html": "prettyhtml",
"vetur.format.options.tabSize": 4,
"vetur.format.defaultFormatterOptions": {
"prettyhtml": {
"wrapAttributes": true,
"sortAttributes": true,
},
"prettier": {
"semi": true,
"singleQuote": true,
"trailingComma": "all",
"tabWidth": 4,
}
}
}
~

and my .prettierrc

~ .prettierrc
{
"semi": true,
"singleQuote": true,
"trailingComma": "all",
"tabWidth": 4
}
~

[francoisromain]

@octref Thank you. "vetur.format.defaultFormatter.html": "none" fixed the problem.

[L-Devil-GitHub]

@octref i can paste you part of my .vue file. maybie you can repro this by it and my config upside.

thats part of my .vue

~~~ vue

~~~

[StarpTech]

I won't change that rule in the formatter. This should be an option in the eslint package. Try to explain that urgent issue to the maintainer of the eslint package.

Therefore I can't see that this rule belongs to a official styleguide its the opposite. On the official vue styleguide all self-closing elements has no space in between.

[L-Devil-GitHub]

@octref more info about my project

part of package.json:

~ json
{
"dependencies": {
"element-ui": "^2.4.8",
"font-awesome": "^4.7.0",
"js-base64": "^2.4.9",
"vue": "^2.5.2",
"vue-router": "^3.0.1"
},
"devDependencies": {
"autoprefixer": "^7.1.2",
"axios": "^0.18.0",
"babel-core": "^6.22.1",
"babel-eslint": "^8.2.1",
"babel-helper-vue-jsx-merge-props": "^2.0.3",
"babel-jest": "^21.0.2",
"babel-loader": "^7.1.1",
"babel-plugin-dynamic-import-node": "^1.2.0",
"babel-plugin-syntax-jsx": "^6.18.0",
"babel-plugin-transform-es2015-modules-commonjs": "^6.26.0",
"babel-plugin-transform-runtime": "^6.22.0",
"babel-plugin-transform-vue-jsx": "^3.5.0",
"babel-preset-env": "^1.3.2",
"babel-preset-stage-2": "^6.22.0",
"chalk": "^2.0.1",
"copy-webpack-plugin": "^4.0.1",
"css-loader": "^0.28.0",
"eslint": "^4.15.0",
"eslint-config-airbnb-base": "^11.3.2",
"eslint-friendly-formatter": "^3.0.0",
"eslint-import-resolver-webpack": "^0.8.3",
"eslint-loader": "^1.7.1",
"eslint-plugin-import": "^2.7.0",
"eslint-plugin-vue": "^4.0.0",
"extract-text-webpack-plugin": "^3.0.0",
"file-loader": "^1.1.4",
"font-awesome": "^4.7.0",
"friendly-errors-webpack-plugin": "^1.6.1",
"html-webpack-plugin": "^2.30.1",
"jest": "^22.0.4",
"jest-serializer-vue": "^0.3.0",
"lodash": "^4.17.11",
"moment": "^2.22.2",
"node-notifier": "^5.1.2",
"node-sass": "^4.9.3",
"optimize-css-assets-webpack-plugin": "^3.2.0",
"ora": "^1.2.0",
"portfinder": "^1.0.13",
"postcss-import": "^11.0.0",
"postcss-loader": "^2.0.8",
"postcss-url": "^7.2.1",
"rimraf": "^2.6.0",
"sass-loader": "^7.1.0",
"sass-resources-loader": "^1.3.3",
"semver": "^5.3.0",
"shelljs": "^0.7.6",
"uglifyjs-webpack-plugin": "^1.1.1",
"underscore": "^1.9.1",
"url-loader": "^0.5.8",
"vue-jest": "^1.0.2",
"vue-loader": "^13.3.0",
"vue-schart": "^1.0.0",
"vue-style-loader": "^3.0.1",
"vue-template-compiler": "^2.5.2",
"webpack": "^3.6.0",
"webpack-bundle-analyzer": "^2.9.0",
"webpack-dev-server": "^2.9.1",
"webpack-merge": "^4.1.0",
"xml-js": "^1.6.8"
},
}
~

eslintrc:

~~~ javascript
// 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/essential', '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',
'vue/html-indent': [
'error',
4,
{
attribute: 1,
closeBracket: 0,
alignAttributesVertically: true,
ignores: [],
},
],
indent: ['error', 4, { SwitchCase: 1 }],
'arrow-parens': ['error', 'as-needed'],
'linebreak-style': ['off'],
'no-return-assign': ['off'],
'no-plusplus': ['off'],
'max-len': ['off'],
'no-param-reassign': ['off'],
'class-methods-use-this': ['off'],
'space-before-function-paren': ['off'],
'no-mixed-operators': ['off'],
'prefer-arrow-callback': ['off'],
'prefer-template': ['off'],
'no-nested-ternary': ['off'],
'guard-for-in': ['off'],
'no-restricted-syntax': ['off'],
yoda: ['off'],
'no-use-before-define': ['off'],
'no-prototype-builtins': ['off'],
'no-underscore-dangle': ['off'],
'no-bitwise': ['off'],
'func-names': ['off'],
'object-shorthand': ['off'],
'no-continue': ['off'],
},
overrides: {
files: ['.vue'],
rules: {
'vue/html-indent': [
'error',
4,
{
attribute: 1,
closeBracket: 0,
alignAttributesVertically: false,
ignores: [],
},
],
},
},
globals: {
serverApiConfig: true,
},
};
~~~

[RiFi2k]

I decided to share my fully working configs which took me months of trial and error, these are the base of a few live sites which get worked on by multiple people on multiple environments daily.
https://github.com/RiFi2k/vscode-vue-vetur-eslint-prettier-airbnb

This will get you vscode, vue, eslint, prettier, airbnb working with latest versions on everything. Tweak from here to do whatever you want.

[octref]

I have provided workarounds for all cases in https://github.com/vuejs/vetur/issues/994#issuecomment-442742315.

@RiFi2k Would be great if you can open an issue in https://github.com/octref/veturpack and tell me issues you run into. I want to reduce config friction too.

[RiFi2k]

@octref I actually didn't know you had that repo, I'll for sure share all my findings.