Photo by Jess Bailey on Unsplash

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.

Bryan Grill
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:


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.


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:


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.

Github Actions

As a bonus, add a Github Action to run your lint, test, and build scripts:



Bryan Grill

Software Developer — frontend, backend, devops. Mostly React these days.