CRA - Post-Install Setup

Things I like to do after a fresh install of create-react-app

Configure Prettier

Create a .prettierrc config file at the project root with the following:

{
  "endOfLine": "lf",
  "printWidth": 100,
  "semi": true,
  "singleQuote": true,
  "tabWidth": 2,
  "trailingComma": "all"
}

Install eslint plugins

$ yarn add eslint-plugin-import eslint-plugin-react --dev

Configure ESLint

Create a .eslintrc config file at the project root with the following:

{
  "extends": [
    "react-app",
    "eslint:recommended",
    "plugin:import/errors",
    "plugin:import/warnings",
    "plugin:react/recommended"
  ]
}

Set up absolute import paths

Create a jsconfig.json config file at the project root with the following and update .eslintrc

{
  "compilerOptions": {
    "baseUrl": "src"
  },
  "include": ["src"]
}

{
  // ...
  "settings": {
    "import/resolver": {
      "node": {
        "paths": ["src"]
      }
    }
  }
}

Set up new-component CLI to generate new components

Be sure to have a components directory at ./src/components/. This is required by the tool and can be configured if your file structure is different.

Create a .new-component-config.json config file at the project root with the following. This will generate functional components by default as opposed to class-based components.

{
  "type": "functional"
}

Generate a new component like this:

$ new-component Layout

Install sanitize.css to reset CSS

$ yarn add sanitize.css

Install React Helmet

$ yarn add react-helmet