Adding prettier to a CRA project

gistfile1.md

Adding prettier to a CRA project

Previously, I've had some problem to reliaby configure code formatting with Prettier in VSCode, in the context of a create-react-app proejct. Today, it worked like a charm, and this is what I did.

Preconditions:

• react-scripts: "3.1.1"
• react: "^16.9.0"
• react-dom: "^16.9.0"
• Dirk Baeumer's ESLint VSCode extension installed and running

Steps:

First install dependencies - yarn add -D prettier eslint-plugin-prettier

Then, wire up Prettier into the CRA toolchain by creating a file .eslintrc.json in the project root (upstream from the src directory) with the below content

{
    "extends": "react-app",
    "plugins": ["prettier"],
    "rules": {
      "prettier/prettier": "error"
    }
  }

Finally, add a file .prettierrc.json in the project root where you can override some of prettiers default formatting rules. The below contents works for me:

{
    "singleQuote": true,
    "trailingComma": "es5",
    "arrowParens": "always"
  }

Now restart VSCode to force a restart of the ESLint server, and all previously hidden problems should be visible under the Problems tab in VSCode.