React - Starting a New Project

For my own benefit ;) React app with typescript, aslant, and prettier, through yarn.

yarn create react-app my-app --template typescript
cd my-app
yarn add eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin prettier eslint-config-prettier eslint-plugin-prettier --dev

Create a .eslint.rc file:

module.exports = {
  parser: "@typescript-eslint/parser",
  parserOptions: {
    ecmaVersion: 2020,
    sourceType: "module",
    ecmaFeatures: {
      jsx: true
    }
  },
  settings: {
    react: {
      version: "detect"
    }
  },
  extends: [
    "plugin:react/recommended",
    "plugin:@typescript-eslint/recommended",
    "plugin:prettier/recommended" // Should be last
  ],
  rules: {
    // Specify ESLint rules
  },
};

Create a .prettierrc.js file:

module.exports = {
  semi: true,
  trailingComma: "all",
  singleQuote: true,
  printWidth: 120,
  tabWidth: 4
};

If you get the error:

Error while loading rule 'prettier/prettier': context.getPhysicalFilename is not a function

Run the following command to update eslint:

yarn upgrade -R eslint