Prettier ask me to replace ⏎↹↹ with ·

Question

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

Looks like it just wants you to fix the non-standard whitespace issues, tabs or whatever into spaces, and also remove the unnecessary parentheses. — Drew Reese, May 26 '21 at 09:32
@DrewReese is there a way to just disable it? I don't really need all this perfection right now — Pepe, May 26 '21 at 09:38
Sure, search in the VSCode settings (cmd + shift + P), or more likely, look for a `.prettierrc.json` (or similar) file in the root of the project. Probably about as much effort to search the settings and enable the format on save. — Drew Reese, May 26 '21 at 09:41
@DrewReese I'm sorry but I really can't do it, I disable it from the setting and it keeps going, I tried from the .prettierrc.json but it keep going, it just keep giving me errors for formatting stuff (Not that I can't fix them, I just want to be free from this cancer of prettier) — Pepe, May 26 '21 at 10:38
Can you do a global search (cmd + shift + f) for "prettier" and see what results you have, there may be some some settings your eslint configs. Can you update your question to include your `.prettierrc.json` and `eslintrc.json` configuration files if available? — Drew Reese, May 26 '21 at 15:46

score 16 · Answer 1 · edited Dec 05 '22 at 13:42

Let's see why we are getting this error.

If you have installed the prettier extension in your VSCode then the default values are set as mentioned here which can be seen by searching prettier in the settings of VSCode as well.
Now if you have enabled formatOnSave in your VSCode the prettier formats your code based on configs from the VSCode.
This error would occur when the configs from the VSCode conflicts from the configs mentioned in .prettierrc.json or .eslintrc.json.

Ex: Let's say your project is using a printWidth of 100 but the default printWidth is 80. ( Search prettier printwidth in VSCode settings )

In general the spacing errors will be autoCleared ( autoFormatted ) on save by prettier. But in this case that won't work.

Reason: Prettier is sticking to the config ( printWidth: 80 ) which is an error according to Repo's eslintrc/ prettierrc ( printWidth: 100 )

Fix here

Change default VSCode Prettier configs. ❌ -> This would be a bad idea as it will effect all your projects opened in VSCode.
Better way to fix this issue is by adding a .vscode/settings.json in the root directory of the repo.

Add these lines in the settings.json

{
  "editor.codeActionsOnSave": { "source.fixAll": true },
  "editor.formatOnSave": false,
}

Now go to files with errors and save the files to format. Files will be formatted according to the configs mentioned in project's eslintrc/ prettierrc
Instead of going to each file you can fix all autofixable problems from the command line as below.
Go to package.json and add this line to your scripts.

"lint-fix": "eslint --fix 'src/**/*.{js,jsx,ts,tsx,json,css,scss,md}'",
Now in the terminal run npm run lint-fix.

Thanks! It worked for me. I understand the difference between codeActionsOnSave and formatOnSave as explained in 'https://stackoverflow.com/questions/60718493/difference-between-codeactionsonsave-and-formatonsave-in-vs-code'. — taoliujun, Feb 27 '23 at 03:44

score 10 · Accepted Answer · answered Jun 15 '21 at 02:21

10

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

answered Jun 15 '21 at 02:21

Xavier Maldonado

172
1
9

2

This is not the proper solution. – manojadams Feb 21 '23 at 06:41

score 4 · Answer 3 · edited Dec 05 '22 at 13:35

4

This is usually 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 .

edited Dec 05 '22 at 13:35

cottontail

10,268
18
50
51

answered Sep 19 '21 at 18:22

Tony Marfo O

184
1
2

score 4 · Answer 4 · answered May 14 '22 at 01:24

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.

Chukwualuka Chiama · Answer 5 · 2021-12-03T11:19:07.147

2

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
}

edited Dec 03 '21 at 11:19

answered Dec 03 '21 at 10:54

Chukwualuka Chiama

306
2
9

score 0 · Answer 6 · answered Sep 02 '21 at 19:24

0

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

answered Sep 02 '21 at 19:24

tomstan11

1,047
7
9

score 0 · Answer 7 · answered Nov 12 '21 at 18:00

0

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

answered Nov 12 '21 at 18:00

Max Sychov

1
1

score 0 · Answer 8 · answered May 07 '22 at 13:34

I figured the formatting issue (VS Code):

settings.json:

"editor.codeActionsOnSave": { "source.fixAll.eslint": true }, "editor.defaultFormatter": "dbaeumer.vscode-eslint", "editor.formatOnSave": true
.eslintrc.json: "useTabs": false}
.editorconfig: indent_style = space
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

score 0 · Answer 9 · answered Jul 06 '22 at 11:56

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.

score 0 · Answer 10 · edited Dec 05 '22 at 13:33

0

Select all, right click, and select format selection

edited Dec 05 '22 at 13:33

General Grievance

4,555
31
31
45

answered Dec 05 '22 at 09:07

Dulanjana Abeyrathna

31
5

manojadams · Answer 11 · 2023-02-21T06:46:36.600

0

Try using the following settings:

.editorconfig file

indent_style = tab
indent_size = 2

.pretteierrc file

"tabWidth": 2

Note: reopen vscode after updating this setting. Also if you have .eslintrc file, make sure that prettier is included in the extends array like this:

"extends": ["standard",..,"prettier"]

edited Feb 21 '23 at 06:46

answered Feb 21 '23 at 06:41

manojadams

2,314
3
26
30

score -1 · Answer 12 · answered Jan 18 '22 at 20:19

-1

For me I had to remove

"extends": "eslint:recommended",

from the .eslintrc.js file in the project.

answered Jan 18 '22 at 20:19

jakobinn

1,832
1
20
20

Prettier ask me to replace ⏎↹↹ with ·

12 Answers12

Let's see why we are getting this error.

Fix here