[Solved] Prittier format code error: JSON Error in…

Error screenshot

[error] Invalid configuration file `src\index.js`: JSON Error in E:\202112\testPrettier\.prettierrc.json: 
[error]
[error] > 1 | ��
[error]     | ^
[error]
[error] Unexpected token "�" (0xFFFD) in JSON at position 0 while parsing "��"
[error]
[error] > 1 | ��
[error]     | ^
[error]

Installation process

Install prettier

yarn add --dev --exact prettier

Create .Prettier.json

echo {}> .prettierrc.json

Create .prettierignore

echo {}> .prettierignore
# write content
src/assets
**/*.md
**/*.svg
**/*.html
**/*.ejs
**/*.png
**/*.eot
**/*.woff
**/*.ttf
**/*.gif
**/*.jpg
**/*.jpeg
package.json

Execute yarn prettier --write ., an error will be report:

Check the index.js in prettier as following:

searchPlaces: ["package.json", ".prettierrc", ".prettierrc.json", ".prettierrc.yaml", ".prettierrc.yml", ".prettierrc.json5", ".prettierrc.js", ".prettierrc.cjs", "prettier.config.js", "prettier.config.cjs", ".prettierrc.toml"],
loaders: {
      ".toml": loadToml,
      ".json5": loadJson5
    }

More than one name was found prettierrc.JSON format file

Solution:

Replace  prettier.json file with pretierrc.config.js  file and write its internal contents in the following way:

module.exports = {
    trailingComma: "es5",
    tabWidth: 4,
    semi: false,
    singleQuote: true,
};

You can format the file. I don’t understand why.

Combined with husky, the project automatically formats the code before submitting GIT

Premise: the project must be git controlled, otherwise the following will report an error and install lint staged

npx [email protected] lint-staged

This is a relatively simple and fast way

Read More: