How to install Prettier and ESLint in a CRA project

These steps assume you have already set up a project with CRA (create react app).

First, open the terminal in vsCode and type npm install -D prettier. The -D here means the package is used only in the development environment.

Second, type npm i -D eslint-config-prettier. This prevents conflicts between prettier and the eslint settings related to formatting.

Third, create a .eslintrc.json file at the top level of the folder.

Then add the following to the .eslintrc.json file.

1
2
3{
  "extends": ["react-app", "prettier"]
}

Fourth, click the puzzle-shaped button on the left side of vsCode and install eslint and prettier.

Fifth, click the gear icon on the left, search for formatOnSave, and uncheck the box if it is checked.

Sixth, click the file icon next to the play button in the top right and open settings.json.

1
2
3
4
5
6
7
8
9
10
11
12 "[javascript]": {
    "editor.formatOnSave": true
  },
  "[javascriptreact]": {
    "editor.formatOnSave": true
  },

  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },

  "editor.defaultFormatter": "esbenp.prettier-vscode"

I set the values shown above.

Seventh, create a .prettierrc file and set it up to your own preferences.