Create-React-App with TypeScript, ESLint, Prettier, and Github Actions

Here is my current development configuration for a React application. I use TypeScript with ESLint + Airbnb + Prettier.

2 min readMay 21, 2020

Update Feb. 2021

Since this setup was published, there are new versions of all the major pieces. If you run into issues, let me know in the comments and I’ll get the steps updated. Thanks!

Create React App with TypeScript

Start a new project with create-react-app and the typescript flag.

npx create-react-app my-app --template typescript

NPM Packages

We’ll be adding the following packages:

ESLint

Install the ESLint packages for TypeScript and Jest support. Note, ESLint is installed with create-react-app, so you don’t need to explicitly install it.

yarn add -D @typescript-eslint/eslint-plugin @typescript-eslint/parser eslint-config-airbnb-typescript eslint-plugin-jest

Then install the packages for Airbnb config. This command will work for Yarn or NPM.

npx install-peerdeps --dev eslint-config-airbnb

Update on the above command:

See comment here on the latest Eslint version vs create-react-app version. Thanks Magluf for the clarification.

For anyone having issues regarding the eslint version, it's due to the fact that the…

You can install the needed packages for this article with the following command, which won't mess with your dependency…

medium.com

Prettier

Next, add the packages to integrate ESLint with Prettier rules.

yarn add -D prettier eslint-config-prettier eslint-plugin-prettier

ESLint Config

The ESLint config will look something like this:

Scripts

Lint and format with these scripts:

"scripts": {
  "format": "prettier --write src/**/*.ts{,x}",
  "lint": "tsc --noEmit && eslint src/**/*.ts{,x}"
}

Update on Prettier command:

I have not had this issue, but per Hunter Miller you may need to adjust the glob syntax.

For that glob in format script to work you probably need to surround the glob in single quotes…