React create-react-app v3.4.1 typescript: ESLint & Prettier with Airbnb style guides and VSCode WebStorm setup 2020

CRA Typescript ESLint Prettier VSCode WebStorm

Why do I need to Lint & make it pretty?

Lint is a tool for “linting” your code. It is a static code analysis tool created to identify problematic patterns found in code. Prettier is an opinionated code formatter.

Lint tools can analyze your code and warn you of potential errors. In order for it to work, we need to configure it with specific rules.

“All code in any code-base should look like a single person typed it, no matter how many people contributed.”

Running these scripts is pretty much the standard to ensure our code is consistency between different developers working on the same project

Even if you are a one-man show this can help mature your code and be consistent with the standard.

There are two main options to choose from. ESLint and TSLint. ESLint is already installed on Create-React-App (CRA), so we’ll go with that, however, the CRA is not opinionated enough for TypeScript and optimized to specific style guides sets for larger enterprise…