EditorConfig, ESLint e Prettier - A tríade dos projetos
Tags: projects, programming, beginners, productivity
Published: 2021-12-03 19:00:08

![A tríade](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rk0j5kjd7dxa93ffw4yr.png)

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](https://editorconfig.org/#download).

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
``` 
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](https://eslint.org/docs/user-guide/integrations).

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
```

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

```
yarn eslint --init
```

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
```
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)
```
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
```
Como estamos configurando um projeto **backend**, vamos selecionar a opção `None of these`.

```
4 - Does your project use TypeScript
* No
* Yes
```
Caso o seu projeto utilize TypeScript, selecione `Yes`. Do contrário, selecione `No`.

```
5 - Where does your code run?
* Browser
* Node
```

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
```

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 
```

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
```

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
```
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
```

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

```JSON
{
 "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": {}
	}
 }

}
```

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](https://eslint.org/docs/user-guide/getting-started) 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
```
Após finalizar a instalação, abra o arquivo `.eslintrc.json` e adicione no `extends` as seguintes regras:
 
```
"prettier/@typescript-eslint",
"plugin:prettier/recommended"
```

E, em `plugins`, adicione a seguinte linha:

```
"plugins": [..., "prettier"],
```

Por fim, nas `rules`, adicione a seguinte linha:

```
"prettier/prettier": "error"
```

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'
}
```

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](https://prettier.io/docs/en/index.html) do Prettier.


Fontes onde pesquisei esse conteúdo:

- https://eslint.org/docs/user-guide/getting-started
- https://eslint.org/docs/rules/
- https://eslint.org/docs/user-guide/configuring/
- https://eslint.org/demo
- https://prettier.io/docs/en/index.html
- https://prettier.io/playground/
- https://blog.matheuscastiglioni.com.br/padronizando-seus-editores-de-texto-com-editorconfig/
- https://editorconfig.org/