ESLint rule vue/html-closing-bracket-newline conflicts with @vue/prettier

[udyux]

Version

3.2.1

Environment info

  System:
    OS: macOS 10.14.1
    CPU: (4) x64 Intel(R) Core(TM) i5-7360U CPU @ 2.30GHz
  Binaries:
    Node: 8.12.0 - /usr/local/bin/node
    Yarn: 1.12.1 - /usr/local/bin/yarn
    npm: 6.4.1 - /usr/local/bin/npm
  Browsers:
    Chrome: 70.0.3538.110
    Firefox: Not Found
    Safari: 12.0.1
  npmPackages:
    @vue/babel-preset-app:  3.2.0
    @vue/cli-overlay:  3.2.0
    @vue/cli-plugin-babel: ^3.2.0 => 3.2.0
    @vue/cli-plugin-eslint: ^3.2.0 => 3.2.1
    @vue/cli-service: ^3.2.0 => 3.2.0
    @vue/cli-shared-utils:  3.2.0
    @vue/component-compiler-utils:  2.3.0
    @vue/eslint-config-prettier: ^4.0.0 => 4.0.1
    @vue/preload-webpack-plugin:  1.1.0
    @vue/web-component-wrapper:  1.2.0
    babel-helper-vue-jsx-merge-props:  2.0.3
    babel-plugin-transform-vue-jsx:  4.0.1
    eslint-plugin-vue: ^5.0.0-0 => 5.0.0
    vue: ^2.5.17 => 2.5.17
    vue-eslint-parser:  4.0.2
    vue-hot-reload-api:  2.3.1
    vue-loader:  15.4.2
    vue-router: ^3.0.1 => 3.0.2
    vue-style-loader:  4.1.2
    vue-template-compiler: ^2.5.17 => 2.5.17
    vue-template-es2015-compiler:  1.6.0
    vuex: ^3.0.1 => 3.0.1
  npmGlobalPackages:
    @vue/cli: Not Found

Steps to reproduce

• Use vue-cli to create a new project: vue create eslint-test-proj
• Manually select features: Babel, Router, Vuex, CSS Pre-processors, Linter / Formatter (selected history mode for router, selected Sass/SCSS for preprocessor)
• Pick linter / formatter config ESLint Prettier and select Lint on save
• Choose to place configs In dedicated config files
• Add the following rule to rules in .eslintrc.js: 'vue/html-closing-bracket-newline': ['warn', { singleline: 'never', multiline: 'never' }]
• Add a .prettierrc file to the project root containing { "printWidth": 120, "jsxBracketSameLine": true, "htmlWhitespaceSensitivity": "ignore" }
• Open src/components/HelloWorld.vue and save (to trigger formatting)

What is expected?

That, on every save, multiline tags' closing brackets be on the same line as the last prop/attribute. Eg:

<a
    href="https://vuejs.org/"
    target="_blank"
    rel="noopener">
    VueJS
</a>

What is actually happening?

The document is formatted differently every time it is saved, toggling between the correct output:

<a
    href="https://vuejs.org/"
    target="_blank"
    rel="noopener">
    VueJS
</a>

and an incorrect output:

<a
    href="https://vuejs.org/"
    target="_blank"
    rel="noopener"
>
    VueJS
</a>

---

It would seem that there is a conflict between the rule vue/html-closing-bracket-newline and extending @vue/prettier in the config.

If I remove @vue/prettier then the problem is not present but I lose formatting for many other things (such as allowing multiple attributes on the same line and wrapping once the max-length is reached).

I am using VSCode 1.29.1 with the following settings for extensions:

{
  "prettier.eslintIntegration": true,
  "vetur.validation.template": false,
  "vetur.format.defaultFormatter.html": "none",
  "javascript.format.enable": false,
  "editor.formatOnSave": true,
  "[javascript]": { "editor.formatOnSave": false },
  "eslint.enable": true,
  "eslint.autoFixOnSave": true,
  "eslint.alwaysShowStatus": true,
  "eslint.options": {
    "extensions": [".html", ".js", ".vue", ".jsx"]
  },
  "eslint.validate": [
    { "language": "html", "autoFix": true },
    { "language": "vue", "autoFix": true },
    { "language": "javascript", "autoFix": true },
    { "language": "javascriptreact", "autoFix": true }
  ]
}

[LinusBorg]

Well, that's just prettier - a very opinionated formatter. Nothing we can do about it, really, until prettier would either:

a) add options to customize this behaviour (highly unlikely)
b) add an option to skip HTML formatting in .vue files altogether.

Prettier always has been like that. You either buy into its way of formatting things or you don't use it.

[udyux]

That's fair enough. There is a setting in prettier's config that does exactly this for JSX/React (jsxBracketSameLine) but it doesn't seem to treat Vue's template as such.

For reference, I did manage to get the correct behaviour without losing other features by setting Vetur's template formatter to js-beautify-html in VSCode settings and replacing @vue/prettier in the eslintrc's extends field with prettier.

I'll check over at prettier to see if they've got any ideas. Thanks!

[oswaldofreitas]

related to prettier/prettier#5377

[faudisio]

@Udyx: your solution is promising... did you set js-beautify-html for HTML or for all types (CSS, HTML, JS, LESS, ...) ?

[dominictobias]

Not sure if it's related but I generated a new project and prettier formats HelloWorld.vue like this:

<a
  href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel"
  target="_blank"
  rel="noopener"
>babel</a>

and prettier ESLint warns it's not like this:

<a
  href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel"
  target="_blank"
  rel="noopener"
>
  babel
</a>

Any way to fix that?

Edit: Nevermind fixed it by turning vue/multiline-html-element-content-newline off

[yinsang]

Using one of the formatter is a good way. One Way is to using ESLint to lint and format.
Actually, you use both of ESLint And prettier to format your code . Because of the operation time of the two formatter is not the same ,you will see the code going to A and going to B.