eslint-plugin-prettier: "error Delete `⏎` prettier/prettier" in .vue files

This problem exists and has to do with the newlines inserted.

Take for example this error:

code/nodejs/nuxt.js/foo/pages/index.vue
  36:1  error  Delete `⏎`  prettier/prettier

Then, go to line 36. You will notice a newline between the style tag and the styles definitions. Remove that line and error is gone.

<style>

.container {

If you have this error in another file, just follow the same procedure.

Does running yarn run lint --fix cause the errors to be fixed (it does for me)? That create-nuxt-app’s default app contains a file that is not formatted to prettier’s standard is an issue with create-nuxt-app (as per my prior comment).

This is only an issue with prettier / eslint-plugin-prettier if the issue persists after running running a prettier command that should fix the reported error

I have this error but don’t have any newline between style and the class and it doesn’t go away.

I had to restart the local server for it to pick up the change.

@BPScott I followed your instructions exactly, but I was using npm. I just found out that npm has a different way of passing arguments to scripts than yarn. On npm it is npm run lint -- --fix. This SO comment captures my sentiment perfectly:

I feel very dumb now, but it’s how we learn I guess. Thanks for looking into this!

I had the same issue mentioned in the original post. The error message appears to be complaining about a line break at line 36 of the pages/index.vue. So I deleted that line break, restarted the local server and it’s all good now.

For other’s reference, I had a similar, but different error.

89:1 error Delete ·· prettier/prettier

Caused by this code…

<script>
  export default {

The complaint? export should not be indented, so highlighting the codeblock and removing 1 indent fixed all the errors (17 in total for default.vue)

The -- thing is indeed a headscratcher if you’ve not came across it before. It’s there to so that npm can tell the difference between “pass these args into npm” and “pass these args into the script that npm runs”. As you’ve probably already realized yarn goes the extra mile and passes any unknown flags into the script you’re running automatically

@BPScott thanks for looking into this and sorry for not testing this earlier. I tried your solution. It increases the amount of errors from 1 to 4. Error output:

path\to\nuxt\nuxt.config.js
  16:12  error  Replace `⏎······{·rel:·'icon',·type:·'image/x-icon',·href:·'/favicon.ico'·}⏎····` with `{·rel:·'icon',·type:·'image/x-icon',·href:·'/favicon.ico'·}`  prettier/prettier
  29:9   error  Delete `⏎··`                                                                                                                                          prettier/prettier
  35:13  error  Delete `⏎··`                                                                                                                                          prettier/prettier

path\to\nuxt\pages\index.vue
  36:1  error  Delete `⏎`  prettier/prettier

✖ 4 problems (4 errors, 0 warnings)
  4 errors and 0 warnings potentially fixable with the `--fix` option.

I have encountered this problem in the template section of the vue file and it has now been resolved. Let’s share how I used eslint and perttier in the vue project.

This is my .eslintrc.js

module.exports = {
  root: true,
  parserOptions: {
    parser: 'babel-eslint',
    sourceType: 'module',
    ecmaFeatures: {
      jsx: true
    }
  },
  env: {
    es6: true,
    node: true
  },
  extends: [
    'standard',
    'plugin:vue/recommended',
    'prettier',
    'prettier/standard',
    'prettier/vue'
  ],
  plugins: ['standard', 'vue', 'prettier'],
  rules: {
    'prettier/prettier': [
      'error',
      {
        htmlWhitespaceSensitivity: 'ignore',
        semi: false,
        singleQuote: true
      }
    ],
    'vue/html-self-closing': [
      'error',
      {
        html: {
          void: 'any'
        }
      }
    ],
    'vue/no-use-v-if-with-v-for': ['off'],
    'vue/component-name-in-template-casing': ['off'],
    'vue/no-unused-components': ['off'],
    eqeqeq: ['off'],
    'no-new': ['off']
  }
}

Because I didn’t configure the prettierrc file separately, I put the prettier configuration item in the eslint configuration file. The option to solve the error Delete ⏎ problem is htmlWhitespaceSensitivity: ‘ignore’.

This is my vetur and eslint configuration in vscode:

  "prettier.disableLanguages": [],
  "prettier.eslintIntegration": true,
  "eslint.enable": false,
  "eslint.autoFixOnSave": true,
  "eslint.alwaysShowStatus": true,
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    {
      "language": "vue",
      "autoFix": true
    }
  ],
  "vetur.format.defaultFormatter.html": "none",
  "vetur.format.defaultFormatter.css": "none",
  "vetur.format.defaultFormatter.js": "none",
  "vetur.format.defaultFormatter.less": "none",
  "vetur.format.defaultFormatter.postcss": "none",
  "vetur.format.defaultFormatter.scss": "none",
  "vetur.format.defaultFormatter.stylus": "none",
  "vetur.format.defaultFormatter.ts": "none",
  "vetur.validation.template": false,

This problem exists and has to do with the newlines inserted.

Take for example this error:

code/nodejs/nuxt.js/foo/pages/index.vue
  36:1  error  Delete `⏎`  prettier/prettier

Then, go to line 36. You will notice a newline between the style tag and the styles definitions. Remove that line and error is gone.

<style>

.container {

If you have this error in another file, just follow the same procedure.

Thank you for the trick!

@gentunian that did the trick for me ! 👍

@BPScott thanks for looking into this and sorry for not testing this earlier. I tried your solution. It increases the amount of errors from 1 to 4. Error output:

Yep that’s what I saw to on my initial run of yarn run lint. Does running yarn run lint --fix get rid of the errors?

Same issue here on a fresh setup with create-nuxt-app

? Project name foo ? Project description foobar ? Use a custom server framework Express ? Use a custom UI framework ElementUi ? Choose rendering mode Universal ? Use axios module yes ? Use eslint yes ? Use prettier yes ? Author name Baz ? Choose a package manager npm