Configure create-react-app with prettier (https://itnext.io/how-to-setup-typescript-eslint-prettier-and-react-in-5-minutes-44cfe8af5081)

create-react-app-with-eslint-prettier

Long gone are the days to use Tslint with Typescript. 😰

The roadmap for Typescript is to move over to Eslint while the official TSLint project is being deprecated.

This is good news for us! Finally, we will get some consistency in the ECMAScript world as Eslint standard for both Typescript and Javascript! 🤩

Here is how you can easily get up and running with Eslint, Typescript, Prettier and React. I’m going to give you the setup first, then explain how it works together, and in the end, I’ll give you a working example.
Prerequisites

If you don’t have an existing typescript/react project you can use create-react-app with the typescript template:

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

Let’s get started

1. In the terminal, go to the root of your project and run:

npm i -D eslint prettier eslint-config-airbnb-typescript-prettier

2. In the root of your project, add a file .eslintrc.js:

// .eslintrc.jsmodule.exports = {
  extends: ["airbnb-typescript-prettier"],
};

3. In the root of your project, add a file: .prettierrc.js:

// .prettierrc.jsmodule.exports = {
  singleQuote: true,
  printWidth: 80,
};

4. To run and auto-fix all the formatting and lint problems, add the following scripts topackage.json. I assume you have your sources in a src subdirectory. If not please change so it fits your project.

"scripts": {
  "format": "prettier --write src/**/*.{js,jsx,ts,tsx}",
  "lint": "eslint --fix src/**/*.{js,jsx,ts,tsx}"
}

Done! 👏
What is happening under the hood? 🧐

First, we install Eslint and Prettier as dev-dependencies.

Thanks to the preset eslint-config-airbnb-typescript-prettier a lot of boilerplate configuration will be done for us.

Under the hood eslint-config-airbnb-typescript-prettier will use the following dependencies:

@typescript-eslint/parser and @typescript-eslint/eslint-plugin which are needed to get Eslint to work together with Typescript

eslint-config-airbnb-typescript is the preset used by Airbnb for Eslint and Typescript. It’s very strict but has sane default rules which can be opted out if needed.

eslint-plugin-import, eslint-plugin-jsx-a11y, eslint-plugin-react and eslint-plugin-react-hooks are required by the Airbnb preset.

eslint-config-prettier is needed to prevent formatting conflicts between eslint and prettier.
Is the Airbnb preset too strict? 😰

I love the Airbnb preset, but sometimes fast iterations are more important than perfect code, especially when you’re just starting out a new project.

You can exclude some rules you don’t like, (and maybe add them back later):

// eslintrc.jsmodule.exports = {
  extends: ['airbnb-typescript-prettier'],
  rules: {
    'react/prop-types': 0,
    'react/destructuring-assignment': 0,
    'react/static-property-placement': 0,
    'jsx-a11y/alt-text': 0,
    'react/jsx-props-no-spreading': 0,
  },
};

A working example

I’ve put up a working example for you. (Built on create-react-app). You can use it as a base if you like for new projects.
https://github.com/caki0915/typescript-react-eslint-prettier

Happy coding! 🥰