Configurando ESLint e Prettier em projetos React com TypeScript

Fala dev, este é mais um artigo sobre ReactJS, e hoje nós vamos mostrar, como você pode configurar o ESLint e o Prettier, para seguir uma padronização de código, usando ReactJS com TypeScript. Fique atento, as configurações que vamos mostrar aqui, pode mudar muito rápido, portanto recomendamos que consulte as documentações oficiais das tecnologias apresentadas, quando surgir dúvidas que não estiver explicados por aqui.

Construindo aplicação ReactJS

Para iniciar a configuração, primeiro vamos iniciar um projeto ReactJS com um template TypeScript, este ponto é muito importante, pois vamos aproveitar da própria CLI do React, para configurar o projeto.

yarn create react-app react-com-eslint --template=typescript

#or

npx create-react-app react-com-eslint --template=typescript

Note que estamos criando um projeto com o nome react-com-eslint, o comando que vem depois do nome do projecto, informa a CLI que iremos adicionar um template TypeScript. agora já podemos entrar dentro do diretório do projeto, para instalar as dependências do ESLint, entretanto antes de iniciarmos essa parte, precisamos remover a configuração padrão do ESLint que já vem instalado no ReactJS.

Acesse o arquivo package.json e remova o trecho de código abaixo, não esqueça de salvar as alterações.

"eslintConfig": {
  "extends": "react-app"
},

Depois das Linhas removidas, já estamos pronto para instalar as dependências do ESLint, abra o terminal na raiz do projeto e execute o seguinte comando.

yarn add eslint -D

#or

npm install eslint -D

Note que estamos usando o -D para instalar o ESLint como dependência de desenvolvimento, pois iremos usar ele apenas quando estivermos escrevendo nossos códigos.

Iniciando o ESLint

Agora que o ESLint já está instalado, vamos iniciar as configurações, ainda na raiz do projeto execute o seguinte comando.

yarn eslint --init

#or

 npm eslint --init

Em seguida você deve selecionar exatamente as mesmas configurações abaixo.

How would you like to use ESLint? …

  To check syntax only
  To check syntax and find problems
▸ To check syntax, find problems, and enforce code style

What type of modules does your project use? …

▸ JavaScript modules (import/export)
  CommonJS (require/exports)
  None of these

Which framework does your project use? …

▸ React
  Vue.js
  None of these

Does your project use TypeScript? ‣ No / Yes

‣ Yes

Where does your code run? …

‣ ✔ Browser
✔ Node

How would you like to define a style for your project? …

▸ Use a popular style guide
  Answer questions about your style
  Inspect your JavaScript file(s)

Which style guide do you want to follow? …

▸ Airbnb: https://github.com/airbnb/javascript
  Standard: https://github.com/standard/standard
  Google: https://github.com/google/eslint-config-google

What format do you want your config file to be in? …

  JavaScript
  YAML
▸ JSON

Este ponto é um dos mais importantes, o próprio ESLint vai sugerir a instalação de algumas dependências de configuração, independentemente se você estiver usando yarn ou npm simplesmente aceite a instalação nesta opção.

Would you like to install them now with npm? ‣ No / Yes

▸ Yes

No caso do yarn, depois de instalar as dependências, será necessário remover o arquivo package-lock.json, em seguida execute apenas yarn, para que o nosso arquivo yarn.lock seja atualizada com as devidas dependências.

Alterando o arquivo .eslintrc.json

Agora precisamos adicionar algumas alterações no arquivo .eslintrc.json, essas alterações serão necessárias para que o ESLint trabalha em conjunto com TypeScript, certifique-se de que esses trecho de códigos tenha exatamente a mesma estrutura ou algo parecido.

"extends": [
  "plugin:react/recommended",
  "airbnb",
  "plugin:@typescript-eslint/recommended",
  "prettier/@typescript-eslint",
  "plugin:prettier/recommended"
],

"plugins": [
  "react",
  "react-hooks",
  "@typescript-eslint",
  "prettier"
],

"rules": {
  "prettier/prettier": "error",
  "react-hooks/rules-of-hooks": "error",
  "react-hooks/exhaustive-deps": "warn",
  "react/jsx-filename-extension": [ 1, {"extensions": [".tsx"]} ],
  "import/prefer-default-export": "off",
  "@typescript-eslint/explicit-function-return-type": [
    "error",
    {
      "allowExpressions": true
    }
  ],
  "import/extensions": [
    "error",
    "ignorePackages",
    {
      "ts": "never",
      "tsx": "never"
    }
  ]
},
"settings": {
  "import/resolver": {
    "typescript": {}
  }
}

Observe que apesar de termos adicionar algumas configurações do Prettier, ainda não fizemos a instalação das dependências, isso é o que vamos fazer agora.

yarn add prettier eslint-config-prettier eslint-plugin-prettier eslint-import-resolver-typescript -D

#or

npm install prettier eslint-config-prettier eslint-plugin-prettier eslint-import-resolver-typescript -D

Observe que além do Prettier, estamos adicionando mais uma dependência do typescript eslint-import-resolver-typescript, por padrão o ESlint não entende arquivos .ts e .tsx, por isso se faz necessário adicionar essa dependência que já deixamos configurada no nosso arquivo .eslintrc.json na sessão settings.

Corrigindo configuração do Prettier

Por padrão algumas configurações do Prettier, consegue subscrever algumas regras do ESLint, por esse motivo iremos criar um novo arquivo da raiz do nosso projeto chamado prettier.config.js, com o arquivo criado adicione as seguintes configurações.

module.exports = {
  singleQuote: true,
  trailingComa: "all",
  allowParens: "avoid"
}

Pronto, agora só falta uma coisinha, o ESLint fica ouvindo todos os nossos diretórios e arquivos dentro do projeto, porém alguns arquivos não serão necessário que ele verifique, por isso vamos ignorar alguns deles, ainda na raiz do projeto crie um novo arquivo chamado .eslintignore, em seguida adicione as seguintes configurações.

**/*.js
node_modules
build

Agora sim, todas as configurações estão concluídas.

Conclusão

Lembrando que não precisamos decorar todos essas regras, pois isso não faz muito sentido, pensando que essas configurações mudam constantemente de projeto para projeto, neste caso recomendamos que faça anotações, para usar posteriormente como base de novas configurações.

Bom eu vou ficando por aqui, eu espero que todos vocês tenham gostado deste artigo, qualquer dúvida pode deixar nos comentários, e não esqueça de compartilhar nas redes sociais com seus amigos.