ESLint

Biblioteca

yarn add eslint -D

Configuração do ESLint

yarn eslint --init

How would you like to use ESLint? Como você gostaria de usar o ESLint? Escolha a terceira opção:

To check syntax, find problems, and enforce code style.

What type of modules does your project use? Qual tipo de modulo você usa no seu projeto? Escolha a primeira opção:

JavaScript modules (import/export)

Which framework does your project use? Qual framework você usa no projeto? Escolha a primeira opção:

React

Does your project use TypeScript? Você usa TypeScript no projeto? Escolha a primeira opção:

No

Where does your code run? Onde seu código vai executar? Escolha a primeira opção.

Browser

How would you like to define a style for your project? Como você gostaria de definir um estilo para seu projeto? Vamos escolher a primeira opção:

Use a popular style guide

Which style guide do you want to follow? Qual guia de estilo você deseja seguir?

Airbnb.

What format do you want your config file to be in? Em que formato você deseja que o arquivo de configuração esteja?

Escolha a primeira.

JSON

Por fim, o ESLint vai verificar as dependências do setup que você escolheu e perguntar:

Would you like to install them now with npm? Você gostaria de instalá-los agora com o NPM?

Escolha não, faremos isso depois com o Yarn.

Com estas perguntas respondidas, agora temos o básico do ESLint instalado, falta ainda instalar algumas dependências extras para o projeto React.js.

Execute o seguinte comando:

yarn add eslint-plugin-react eslint-config-airbnb eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-react-hooks -D

Criando os scripts para rodar o ESLint

{
  "scripts": {
     "lint": "eslint ./",
    "lint:fix": "eslint ./ --fix"
  },
}

Para corrigir alguns destes erros, você pode executar yarn run lint:fix. Neste exemplo de projeto, precisamos adicionar algumas regras extras, para isso abra o arquivo .eslintrc.json e atualize conforme o exemplo:

{
    "ignorePatterns": [ "*.test.js", "*.test.tsx" ],
    "rules": {
        "react/jsx-filename-extension": [ 1, { "extensions": [".js", ".jsx"] }],
        "react/react-in-jsx-scope": "off"
    }
}

Prettier

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

Agora vamos configurar o ESLint para trabalhar junto com Prettier e não ter conflitos. Abra o arquivo .eslintrc.json e adicione o Prettier nas extensões e plugins:

{
    "extends": [
        "prettier"
    ],
    "plugins": [
        "prettier"
    ],
}

O próximo passo e criar o arquivo .prettierrc na raiz do projeto, ele vai conter as configurações que o Prettier deve aplicar. Adicione no arquivo as seguintes propriedades:
```json
{
    "singleQuote": true,
    "trailingComma": "es5"
}

Script para formatar pelo terminal

{
    "scripts": {
        "format": "prettier --write \"**/*.{js,jsx,json,md}\""
    }
}