0

I've got a Nuxt project set up with eslint. VSCode autmatically formats my code.

However I don't understand why it complains about the style tags on my div:

<div style="background-image: url('/pic.svg');background-size: 800px auto;background-position: 50% -120px;"></div>

Error: Replace background-image:·url('/pic.svg');background-size:·800px·auto;background-position:·50%·-120px; with ⏎··········background-image:·url('/pic.svg');⏎··········background-size:·800px·auto;⏎··········background-position:·50%·-120px;⏎········eslintprettier/prettier

And turns it into:

 <div
        style="
          background-image: url('/pic.svg');
          background-size: 800px auto;
          background-position: 50% -120px;
        "
      ></div>

The browser doesn't unserstand the style tag anymore and complains about wrong formatted style. How can I disable that? "plugin:prettier/recommended", is responsible for doing the reformatting.

Eslint Config:

module.exports = {
  root: true,
  env: {
    node: true,
    browser: true,
  },
  extends: [
    // https://eslint.vuejs.org/rules/#priority-c-recommended-minimizing-arbitrary-choices-and-cognitive-overhead-for-vue-js-2-x
    "plugin:vue/recommended",
    // https://eslint.org/docs/rules/
    "eslint:recommended",
    // https://github.com/prettier/eslint-plugin-prettier#recommended-configuration
    "plugin:prettier/recommended",
    // https://github.com/prettier/eslint-config-prettier#eslint-config-prettier
    "prettier",
    "prettier/vue",
  ],
  rules: {
    "vue/component-name-in-template-casing": ["error", "PascalCase"],
    "vue/no-v-html": 0,
    "no-console": process.env.NODE_ENV === "production" ? "error" : "off",
    "no-debugger": process.env.NODE_ENV === "production" ? "error" : "off",
  },
  globals: {
    $nuxt: true,
  },
  parserOptions: {
    parser: "babel-eslint",
  },
};
danielmoessner
  • 339
  • 3
  • 18
  • There is no reason the browser doesn't understand the style tag anymore. Does it not load the image? If you inspect the div, you can't see any styles on it? Why not use css for styling? – cloned Oct 31 '20 at 14:49
  • The style looks like this: \nbackround-image: url(); I don’t know what the \n is doing there – danielmoessner Oct 31 '20 at 15:41
  • This is caused by the `printWidth` format option in Prettier, which defaults to 80. https://stackoverflow.com/questions/63560974/how-to-disable-attributes-breaking-in-element-tags-with-prettier/ – tony19 Nov 01 '20 at 05:24
  • thanks karel and tony19, this fixes my problem. I think that the underlying problem has to do with nuxt and hot reloading which adds the '\n' to the rendered styles (visible in chrome dev tools). – danielmoessner Nov 03 '20 at 09:34

0 Answers0