Easy start of a Typescript/React project (w/ Yarn, ESlint and Prettier)
Tags: typescript, react, eslint, prettier
Published: 2020-08-14 00:21:05

Hello everyone, in this super fast tutorial, I'll teach you how to start an application with ESlint and Prettier to standardize your code and improve your productivity, let's go?

## **Create project**
- Create project with create-react-app:

```bash
yarn create react-app *your-application-name* --template=typescript
```

## **ESlint**

- Add ESlint to the project on the development mode:
```bash
yarn add eslint -D
```
- Start a new eslint file:
```bash
yarn eslint --init
```
- Choose these answers for the above command:
```bash
1. To check syntax, find problems, and enforce code style
2. JavaScript modules (import/export)
3. React
4. Yes
5. Browser
6. Use a popular style guide
7. Airbnb
8. JSON
9. No
```
- Install with Yarn the list of required dependencies that appear after denying `intall with npm` in the last choice of above command (Remove eslint and additional versions of react hooks). The command should look something like this:
```bash
yarn add eslint-plugin-react@^7.20.0 @typescript-eslint/eslint-plugin@latest eslint-config-airbnb@latest eslint@^7.2.0 eslint-plugin-import@^2.21.2 eslint-plugin-jsx-a11y@^6.3.0 eslint-plugin-react-hooks@^4 @typescript-eslint/parser@latest -D
```
>be careful the dependencies can change.

- Create a file `.eslintignore` in the root of the project.

`.eslintignore` :
```javascript
**/*.js
node_modules
build
```

- Add the following library in the development mode, to import typescript by default:
```bash
yarn add eslint-import-resolver-typescript -D 
```

- Add some configurations in file `eslintrc.json`.

`eslintrc.json` :
```javascript
{
  ...
  "extends": [
    ...
    "plugin:@typescript-eslint/recommended"
  ],
  ...
  "plugins": [
    ...
    "react-hooks"
  ],
  "rules": {
        "react-hooks/rules-of-hooks": "error",
        "react-hooks/exhaustive-deps": "warn",
        "react/jsx-filename-extension": [
          1,
          {
            "extensions": [
              ".tsx"
            ]
          }
        ],
        "import/prefer-default-export": "off",
        "import/extensions": [
          "error",
          "ignorePackages",
          {
            "ts": "never",
            "tsx": "never"
          }
        ]
      },
    "settings": {
        "import/resolver": {
            "typescript": {}
        }
    }
}
```
>`...` represents the code already in the file.

## **Prettier**

- Add Prettier to the project on the development mode:

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

- Integrate the prettier with eslint by adding a few more settings to the file `eslintrc.json`.

`eslintrc.json` :
```javascript
{
  ...
  "extends": [
    ...
    "plugin:prettier/recommended"
  ],
  ...
  "plugins": [
    ...
    "prettier"
  ],
  "rules": {
    ...
    "prettier/prettier": "error",
    "@typescript-eslint/explicit-module-boundary-types": "off",
    "react/jsx-one-expression-per-line": "off",
    "no-use-before-define":"off"
        
   },
  ...
}
```

- Create a file `prettier.config.js` in the root of the project.

`prettier.config.js` :
```javascript
module.exports = {
	singleQuote: true,
	trailingComma: 'all',
	allowParens: 'avoid',
}
```

- Go to the `.src/index.tsx` and `./src/reportWebVitals.ts` files and save the files for them to be formatted by Prettier.

- Start the project in the development mode:
```bash
yarn start
```

------
Both configuration files for Prettier and ESLint can be adjusted to your needs. If you need to add rules, you can do it with both files. 

That's it for today, guys, I hope you enjoyed the article and that it can help you and your team in some way.

Enjoy!

[Follow me on Twitter](https://twitter.com/vinidiasdev)