Prettier: invalid configuration file even though the file is straight from the docs

Question

So I tried installing the prettier today, I followed the instructions straight from the docs.

npm install --save-dev --save-exact prettier
echo {}> .prettierrc.json

then I create a .prettierignore and copy-pasted what's written in my .gitignore in there. Meanwhile, this is what I wrote in the .prettierrc.json:

{
   "singleQuote": true
}

Now when I run the prettier in the command line:

npx prettier --write src/index.js

I get this error:

PS C:\file-directory> npx prettier --write src/index.js
[error] Invalid configuration file `src\index.js`: JSON Error in C:\file-directory\.prettierrc.json:
[error]
[error] > 1 | ��{
[error]     | ^
[error]   2 |
[error]   3 |    "singleQuote": true
[error]   4 |
[error]
[error] Unexpected token "�" (0xFFFD) in JSON at position 0 while parsing near "��{\u0000\r\u0000\n\u0000 \u0000 \u0000 \u0000\"\u0000s\u0000i\u0000..."
[error]
[error] > 1 | ��{
[error]     | ^
[error]   2 |
[error]   3 |    "singleQuote": true
[error]   4 |
[error]

My json file is not showing any errors in vscode... I have the prettier extension disabled since I want to try it out in the CLI but if I enabled it, it will not work, it shows the same error if I click the "Prettier" in the bottom-right of the vscode so this is definitely a config file problem...

Ran into the same issue. Deleted the .prettierrc.json then made the file through the Visual Studio IDE, and everything worked. Must not work when making the file through the command line? — mthrasher33, Dec 17 '21 at 14:47
I agree, this worked for me..., please post this as answer @mthrasher33 — jove0610, Feb 18 '22 at 07:11

score 26 · Accepted Answer · answered Feb 25 '22 at 08:40

26

Answered by mthrasher33 in the comment section:

Ran into the same issue. Deleted the .prettierrc.json then made the file through the Visual Studio IDE, and everything worked. Must not work when making the file through the command line?

answered Feb 25 '22 at 08:40

jove0610

664
1
8
16

you are my hero – Lueton Aug 19 '23 at 17:43

score 9 · Answer 2 · edited Mar 12 '22 at 19:35

9

The configuration file that I created through the command "echo .prettierrc.json" created with file format UTF16 and that caused an error while trying to run it. So I changed the file format physically to be of format UTF8 and it works fine.

edited Mar 12 '22 at 19:35

ouflak

2,458
10
44
49

answered Mar 12 '22 at 12:38

Yasser Haggag

91
1
1

Thank you, bugs like this are absurdly hard to find especially since vscode was opening it as utf8 – Conrad Kay Aug 24 '22 at 05:17

score 1 · Answer 3 · edited Sep 24 '22 at 21:08

1

Changing the UTF16 to UTF8 using Notepad++ worked well for me.

edited Sep 24 '22 at 21:08

desertnaut

57,590
26
140
166

answered Sep 14 '22 at 13:07

Endi Monan

11
1

score 0 · Answer 4 · answered May 06 '23 at 01:26

For anyone who is still facing this annoying problem, If your configuration file ends with .js, please check the syntax. You may have forgotten a comma or made any other misspellings.

I had this problem after I had updated my prettier configuration file, I forgot a comma and VScode didn't highlight any syntax errors. Fortunately, I noticed this after some tries.

score 0 · Answer 5 · answered Aug 03 '23 at 14:22

0

Add prettierrc file extension in the package.json command:

    "prettier-format": "prettier --config .prettierrc.js 'src/**/*.ts' --write"

answered Aug 03 '23 at 14:22

Serhii Harbovskyi

309
1
7

Prettier: invalid configuration file even though the file is straight from the docs

5 Answers5

Linked