Create React App with TypeScript, Prettier, and ESLint

Mon, 4 Mar 2019

Setup

# Start a new Create React App project that uses TypeScript:
yarn create react-app crats-app --typescript

# Add all the dependencies required for Prettier:
yarn add -D eslint-config-prettier eslint-plugin-prettier prettier

ESLint Config

Add the Prettier configuration to the eslintConfig object in package.json:

{
  "eslintConfig": {
    "extends": [
      "react-app", // CRA's eslint config
      "prettier/@typescript-eslint", // Disables ESLint rules that might conflict with prettier.
      "plugin:prettier/recommended" // Runs prettier as an ESLint rule.
    ],
    "rules": {
      "prettier/prettier": [
        "error",
        {
          // Your Prettier rules
          "proseWrap": "always",
          "semi": false,
          "singleQuote": true,
          "trailingComma": "all",
          "printWidth": 100
        }
      ]
    }
  }
}

VSCode Config

{
  "eslint.validate": [
    {
      "language": "javascript",
      "autoFix": true
    },
    {
      "language": "javascriptreact",
      "autoFix": true
    },
    {
      "language": "typescript",
      "autoFix": true
    },
    {
      "language": "typescriptreact",
      "autoFix": true
    }
  ],
  "eslint.autoFixOnSave": true,
  "eslint.options": {
    "rules": {
      "prettier/prettier": "warn" // Locally report Prettier formatting as warnings.
    }
  },
  "prettier.eslintIntegration": true // Use eslintrc's prettier rules when running format.
}