"error Delete ⏎ prettier/prettier" in .vue files

[pieterwouda]

I get a "Delete ⏎ prettier/prettier" error within the script tags of my .vue files.

I'm using VS Code with ESLint.
When I save the .vue file, it auto-'fixes' the file using prettier, only not in the preferred way.

There might be something wrong with my .eslintrc.json file, but I'm not sure what it is.

.eslintrc.json

{
  "root": true,
  "parser": "babel-eslint",
  "env": {
    "browser": true
  },
  "extends": [
    "standard",
    "eslint:recommended",
    "prettier"
  ],
  "plugins": [
    "html",
    "prettier"
  ],
  "rules": {
    "prettier/prettier": [
      "error",
      {
        "singleQuote": true
      }
    ]
  }
}

.babelrc

{
  "presets": [
    "env",
    "stage-2"
  ]
}

.vscode/settings.json

{
  "eslint.autoFixOnSave": true,
  "eslint.validate": [
    "javascript",
    {
      "language": "vue",
      "autoFix": true
    }
  ]
}

[not-an-aardvark]

Thanks for reporting. Does this issue also occur when you use prettier directly? If so, then it's a bug in prettier, not eslint-plugin-prettier.

[pieterwouda]

I'm not sure how to use prettier directly on a .vue file.

When I run prettier "src/views/Test.vue", I get another error.

SyntaxError: Adjacent JSX elements must be wrapped in an enclosing tag (7:1)

[not-an-aardvark]

This seems like it might be an issue with the html parser you're using (possibly eslint-plugin-html).

eslint-plugin-prettier works as part of a larger stack:

1. ESLint reads a file
2. A preprocessor preprocesses the .vue source text into JavaScript text
3. babel-eslint parses the JavaScript text into an AST
4. eslint runs eslint-plugin-prettier and gives it the AST and the text
5. eslint-plugin-prettier runs prettier on the text, and reports problems to eslint based on a diff with prettier's output
6. eslint reports the problems

I'm not quite sure where the issue is occurring here, but I'm think it's in step 2. I'm fairly certain it's not an issue with eslint-plugin-prettier itself, because it just takes the text that ESLint gives it and passes it to prettier.

[BenoitZugmeyer]

For those interested, it will be fixed in eslint-plugin-html BenoitZugmeyer/eslint-plugin-html#76

🥂

[wahengchang]

it is still existed, there is not way to fix the error 38:2 error Delete ⏎ prettier/prettier

[CharlesKumar]

Hi @wahengchang
you can fix that error by running the command
npx prettier --write "src/**/*.vue"

check whether there are any pending errors by using the command
npx prettier --check "src/**/*.vue"

see here for more details

NOTE: you can install prettier globally with npm i -g prettier and be sure to use the version you need. (usually the latest version)

[AlexBrohshtut]

Another fix that worked for me is to switch default html formatter to 'prettier' (it was prettyhtml for some reason):

[PVautour]

I fixed it by changing my .prettierrc to use tabs instead of spaces:

just add "useTabs": true to the file.

ex:

{
"semi": false,
"arrowParens": "always",
"singleQuote": true,
"useTabs": true
}

[gldraphael]

Possibly related if everyone having this issue is on Windows:

The project npm run builds without errors on a Mac, but throws the following on a Windows CI machine:

warning Delete ␍ prettier/prettier

The fix (in my case) was to make sure line-endings for .vue files aren't changed by git on checkout, by adding the following to .gitattributes:

* text=auto
*.vue text eol=lf

(If it doesn't work, do try re-cloning after pushing changes to the .gitattributes file.)

((You could also set end_of_line = lf in your .editorconfig if you use VS Code's editorconfig plugin but that'll only fix it for editorconfig users.))