Prettier ask me to replace ⏎↹↹ with ·

user_11874471 0
Viewed 16338

I have no clue what's going on,

I cloned a github repo and literally just tried to change like one line but I got hit by this prettier error which makes no sense to me (I've never used prettier).

Replace ↹return·(⏎↹↹<img·alt='logo'·src='./Logo.png'·/>⏎↹); with ··return·<img·alt="logo"·src="./Logo.png"·/> prettier/prettier

Anything could be helpful at this point, I'm using MacOS and working on VSCode

prettier reactjs
9 Answers

I had the same issue, in the eslinrc.json file under "prettier/prettier", I removed printWidth.

user_76133750

This is usally due to some configuration with eslint preventing you from making errors and introducing unwanted characters in your code. I fixed this by running one line eslint --fix . . Make sure you install eslint globally first npm i -g eslint .

user_50256170

I think this is caused by Prettier being configured to use spaces instead of tabs to indent and then your code editor using tabs. So Prettier wants you to replace those tabs with spaces.

Alternatively, you can set your code editor to use tabs.

What worked for me was adding this to the rules object in .prettierrc:

{
  "useTabs": false
}
user_103141510

I had the same issue, I changed the tab width inside the prettier formatter extension to the configured size.

user_113050950

I added in the .prettierc props "endOfline".

{
  "endOfLine": "lf",
}

By default Windows uses CRLF line separator, so you can cahnge it through a global config of IDE to use LF instad of CRLF

user_143744420

For me I had to remove

"extends": "eslint:recommended",

from the .eslintrc.js file in the project.

user_49351400

I figured the formatting issue (VS Code):

  1. settings.json:

    "editor.codeActionsOnSave": { "source.fixAll.eslint": true }, "editor.defaultFormatter": "dbaeumer.vscode-eslint", "editor.formatOnSave": true

  2. .eslintrc.json: "useTabs": false}

  3. .editorconfig: indent_style = space

  4. if esbenp.prettier-vscode is enabled in VSCode - please disable it.

See my complete eslint + prettier setup for this repo: https://github.com/Sgryts/ng2-feature-toggle

user_82419920

You can just set/update this rule in your .eslintrc.js

rules: {
  ...,
  'prettier/prettier': ['error', { printWidth: 120 }],
}

By default, printWidth is 80. ESLint wants to break down the line to match this length requirement that can be overwitten.

user_102713990

In my case eslint was preventing Prettier to format the file while saving (I have set my VSCode to format the document upon saving).

Due that, Prettier was complaining about tabs / spaces being added when it was not required.

To fix I had to first fix eslint by using the below command(make sure to install the package globally):

eslint --fix

and then I had to Save the files again so Prettier could format them correctly.

user_65628230
Related