TheLazy.Dev
Portfolio GitHub

Blog

projects |programming |beginners |productivity

EditorConfig, ESLint e Prettier - A tríade dos projetos

jhonywalkeer

Jhony Walker

Posted on December 3, 2021

EditorConfig, ESLint e Prettier - A tríade dos projetos

A tríade

Manter a qualidade e a organização do código em que se trabalha é um dos maiores desafios de um time de programadores, uma vez que cada desenvolvedor tem um jeito próprio de programar, sua forma de organização e sua IDE preferida.

Trabalhar em um código sem uma estrutura de projeto bem definida, em que cada classe é escrita de uma forma diferente, sem limites de caracteres por linha, com diferentes padrões para nomear variáveis, alguns usando ponto vírgula e outros nada, alguns indentando o código com espaços enquanto outros usam tab, pode se tornar um pesadelo e para solucionar esse problema, foram criadas algumas ferramentas que auxiliam na hora de manter o código padronizado.

Entendendo o EditorConfig

Não é incomum ter programadores que utilizam as mais diferentes IDEs em uma mesma equipe. Para solucionar os problemas de padronização por conta da forma como as diferentes IDEs trabalham um mesmo código em vários sistemas operacionais, nasceu o EditorConfig. Para configurar a ferramenta é importante, antes de tudo, instalar a extensão do EditorConfig para a sua IDE. O link para download do plugin pode ser encontrado no site oficial do EditorConfig que se encontra neste link.

Em seguida, após instalar o plugin, crie um arquivo .editorconfig na raiz do seu projeto, com a seguinte configuração:

root = true

[*]
indent_style = space
indent_size = 2
end_of_line = lf
charset = utf-8
trim_trailing_whitespace = true
insert_final_newline = true
Enter fullscreen mode Exit fullscreen mode

Esta configuração acima garante que a indentação das linhas será feita usando dois espaços, que o charset será UTF-8, que os espaços em branco serão removidos e que será inserida uma linha em branco no final de todos os artigos, além de garantir que as quebras de linhas sejam padronizadas, uma vez que no Windows e no Linux a quebra de linha é diferente.

Para garantir que a configuração está funcionando, abra os arquivos do projeto e salve-os novamente.

Entendendo o ESLint

O ESLint talvez seja a ferramenta mais importante para manter a padronização do código. Com seu auxílio, podemos definir se desejamos adicionar ponto vírgula no final das linhas, utilizar aspas duplas ou simples, ou ainda, utilizar vírgula após o último item do objeto. Para começar a configuração, é preciso instalar o plugin do ESLint para o seu editor favorito. Você pode conferir a lista de todos os editores compatíveis no site do plugin acessando este link.

Para começar, vamos instalar o Eslint como uma dependência de desenvolvimento (neste tutorial estou utilizando o Yarn), já que ele nunca será utilizado em produção:

yarn add eslint -D
Enter fullscreen mode Exit fullscreen mode

Após o término da instalação, vamos inicializar o Eslint através da sua CLI rodando o seguinte comando:

yarn eslint --init
Enter fullscreen mode Exit fullscreen mode

Ao rodar o comando acima, ele fará algumas perguntas. São elas:

1 - How would you like do use Eslint?
* To check syntax only
* To check syntax and find problems
* To check syntax, find problems and enforce code style
Enter fullscreen mode Exit fullscreen mode

Selecione a opção To check syntax, find problems and enforce code style utilizando as setas do seu teclado e pressionando a tecla enter posteriormente, feito isso será apresentado a seguinte pergunta:

2 - What type of modules does your project use?
* JavaScript modules (import/export) 
* CommonsJS (require/exports)
Enter fullscreen mode Exit fullscreen mode

Nessa pergunta, você deve escolher a opção que mais se adapta ao seu projeto. Caso você utilize Typescript ou Sucrase, selecione a opção JavaScript modules. As versões mais antigas do Node ainda utilizam o padrão CommonsJS.

Vamos agora para próxima pergunta....

3 - Which framework does your project use? 
* React 
* Vue.JS
* None of these
Enter fullscreen mode Exit fullscreen mode

Como estamos configurando um projeto backend, vamos selecionar a opção None of these.

4 - Does your project use TypeScript
* No
* Yes
Enter fullscreen mode Exit fullscreen mode

Caso o seu projeto utilize TypeScript, selecione Yes. Do contrário, selecione No.

5 - Where does your code run?
* Browser
* Node
Enter fullscreen mode Exit fullscreen mode

Vamos selecionar a opção Node

6 - How would you like to define a style for your project?
* Use a popular style guide
* Answer questions about your style
Enter fullscreen mode Exit fullscreen mode

Aqui você pode escolher o que melhor se encaixa na sua necessidade. Entretanto, recomendo escolher Use a popular style guide.

7 - 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
Enter fullscreen mode Exit fullscreen mode

Cada uma das style guides tem regras específicas. Vamos escolher Airbnb. Dessa forma, garantimos que o nosso projeto utilizará ponto e vírgula ao final das linhas, além de aspas simples. Lembrando que não há o “melhor padrão”, vai das necessidades de cada projeto.

8 - What format do you want your config file to be in?
* Javascript 
* YAML
* JSON
Enter fullscreen mode Exit fullscreen mode

Aqui vamos escolher a opção JSON. Em seguida, o ESLint perguntará se vocẽ quer que ele instale as dependências automaticamente. Caso você utilize o NPM, selecione YES e ele iniciará o processo de instalação, mas caso contrario, selecione NO e instale as dependências listadas manualmente copiando seus respectivos nomes. (⚠ confira certinho para não deixar de instalar nenhuma)

Após instalar as dependências, criaremos na raiz do projeto um arquivo chamado .eslintignore para garantir que os arquivos desnecessários não serão alterados pelo ESlint. Basta adicionar o seguinte código:

/*.js
node_modules
dist
Enter fullscreen mode Exit fullscreen mode

Por fim, caso você use Typescript, é necessário instalar uma dependência só para que o ESLint entenda as importações dos arquivos. Portanto, basta rodar o comando:

yarn add eslit-import-resolver-tyescript -D
Enter fullscreen mode Exit fullscreen mode

Por fim, o seu arquivo .eslintrc.json deve estar semelhante a esse:

{
 "env": {
    "es2021": true,
    "node": true
 },
 "extends": [
    "airbnb-base",
    "plugin:@typescript-eslint/recommended",
 ],
 "parser": "@typescript-eslint/parser",
 "parserOptions": {
    "ecmaVersion": 12,
    "sourceType": "module"
 },
 "plugins": ["@typescript-eslint"],
 "rules": {
    "no-use-before-define": "off",
    "@typescript-eslint/no-use-before-define": ["error"],
    "import/extensions": [
    "error",
    "ignorePackages",
    {
      "ts": "never"
    }
    ]
 },
 "settings": {
    " import/resolver": {
        "typscript": {}
    }
 }

}
Enter fullscreen mode Exit fullscreen mode

Não considere isso como regra Absoluta, tente montar seu padrão do ESLint para projetos Back-end e Front-end assim como eu fiz o meu (que por a caso não é esse), para você criar o seu basta acessar a documentação do ESLint e realizar a sua configuração padrão.

E por último mas não menos importante, o Prettier

O Prettier é mais uma das ferramentas que utilizaremos para garantir que as padronizações serão seguidas. Ele permite que você faça diversas configurações para que o código seja formatado da forma desejada. Antes de começarmos a configuração, é importante que você instale o plugin. Para chegar quais IDEs são compatíveis, verifique no site da ferramenta.

A primeira coisa que faremos é a instalação dos pacotes necessários. Rode o seguinte comando:

yarn add eslit-config-prettier eslit-plugin-prettier -D
Enter fullscreen mode Exit fullscreen mode

Após finalizar a instalação, abra o arquivo .eslintrc.json e adicione no extends as seguintes regras:

"prettier/@typescript-eslint",
"plugin:prettier/recommended"
Enter fullscreen mode Exit fullscreen mode

E, em plugins, adicione a seguinte linha:

"plugins": [..., "prettier"],
Enter fullscreen mode Exit fullscreen mode

Por fim, nas rules, adicione a seguinte linha:

"prettier/prettier": "error"
Enter fullscreen mode Exit fullscreen mode

Agora, crie o arquivo prettier.config.js na raiz do seu projeto, e nela adicionaremos três regras:

  • singleQuote - para garantir que será utilizado aspas simples.
  • trailingComma - para adicionar virgula sempre ao final de um objeto.
  • arrowParens - para que não seja adicionado parênteses quando uma arrow function tiver apenas um parâmetro.

O arquivo, no final, ficará da seguinte forma:

module.exports = {
  singleQuote: true,
  trailingComma: 'all',
  arrowParens: 'avoid'
}
Enter fullscreen mode Exit fullscreen mode

Dá mesma forma que o ESLint, não considere essas configuração do Prettier como regra absoluta tente criar seu padrão de configuração, no qual represente seu padrão de codificar, para isso basta acessar a documentação do Prettier.

Fontes onde pesquisei esse conteúdo:

💖 💪 🙅 🚩
jhonywalkeer
Jhony Walker

Posted on December 3, 2021

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related

EditorConfig, ESLint e Prettier - A tríade dos projetos
projects EditorConfig, ESLint e Prettier - A tríade dos projetos

December 3, 2021