Por diversas vezes, passei pelo termo padronização de código e ele estava ligado a projetos de empresas com alguns desenvolvedores trabalhando. Com isso, em um primeiro momento, me perguntei: se trabalho sozinho em um projeto, pra que me preocupar em padronizar o código ou os commits (

Inclusive, li um artigo muito bacana sobre isso no IMasters, voltado para a padronização de código em equipes, vou deixar ele 

Ao começar a estudar mais padronização de código, me deparei com diversas bibliotecas e configurações que poderia utilizar. Nesse momento, comecei a testar e entender o que é interessante usar em um projeto pessoal e o que pode ficar para outros projetos maiores.

Hoje, estou configurando o ESLint em todos os meus projetos, pois ele acaba ajudando muito na produtividade e com isso consigo manter uma padronização de código entre os meus próprios projetos, o que ajuda muito quando preciso fazer alguma manutenção ou desenvolver novas funcionalidades.

Nesse artigo, falarei sobre as ferramentas e configurações que utilizo atualmente em meus projetos. Deixarei também algumas dicas de configurações que faria para projetos com mais devs.

Primeiramente, contextualizarei sobre as ferramentas que usaremos e depois mostrarei o passo a passo para se fazer as configurações. Dessa maneira, será prático revisitar esse artigo quando precisar criar um projeto e seguir o passo a passo da configuração.

Existem várias configurações que os editores trazem por padrão, por exemplo:

Se a indentação vai ser feita com espaços ou tabs

O tamanho da indentação, se vai ser de 2 ou 4 espaços por exemplo

Em alguns casos, pode acontecer de você utilizar uma indentação de 2 espaços e uma nova página ser criada com 4 espaços ou vice-versa. Esse problema se torna um pouco maior caso haja mais devs no projeto, pois cada um pode preferir uma configuração ou estar utilizando outro editor com configurações diferentes, o que pode bagunçar um pouco o código.

E é aí que entra o EditorConfig. Com ele podemos criar um arquivo de configuração que vai padronizar as configurações entre os editores. Com isso, no projeto em que ele estiver configurado as configurações padrões do editor vão ser substituídas, fazendo com que em qualquer situação tenhamos arquivos padronizados independentemente de gostos ou editores diferentes.

O ESLint implementa o processo de Linting, que é responsável por aplicar regras a uma base de código e destacar padrões ou códigos problemáticos, sem a necessidade do código ser executado. No site dele encontramos a descrição "Encontre e corrija problemas em seu código JavaScript", mas ele pode ser usado também com Typescript.

Para podermos usufruir de todo o poder do ESLint é importante seguirmos algum guia de estilo para o nosso código. Dentre os vários guias existentes, um dos mais famosos é o do 

 e um que gosto bastante de usar que é o 

Um guia de estilo define regras e padrões que seu código deve seguir. Por exemplo, o guia do Airbnb usa aspas duplas e ponto e vírgula no final da linha. Particularmente, gosto de usar aspas simples e não finalizo a linha com o ponto e vírgula (o código fica muito feio com eles e é totalmente opcional), o que se adequa mais às regras do Standard.

Não existe muito isso de qual é certo ou errado, o importante é você escolher um e seguir. Podemos modificar as regras que vêm por padrão em um guia ou até mesmo criar novas regras, vamos ver isso mais pra frente na seção de configurações.

A coisa que é mais legal depois de configurar o ESLint, motivo por qual eu estou configurando ele em todos os projetos que trabalho, é o fato de conseguimos automatizar boa parte dos ajustes no código, o que agiliza muito na hora de codar.

Uma coisa que me incomodava no auto-import do VS Code, é que às vezes ele faz o import com aspas duplas e ponto e vírgula, quando isso acontecia eu tinha que mudar manualmente as aspas e apagar o ponto e vírgula. Com o ESLint devidamente configurado, basta salvar o arquivo e o código vai ser ajustado automaticamente (isso ajuda muito).

Uma outra ferramenta muito utilizada na padronização do código é o Prettier. Ele complementa o ESLint e faz ajustes que ele não faria sozinho. Por exemplo, se você tem uma linha com 100 caracteres ele vai quebrar e indentar a linha automaticamente, trabalhando mais na estrutura do código do que se preocupando com um guia de estilos que ele tenha que seguir.

O Prettier é uma ferramenta fantástica, vou deixar o link da documentação dele 

 para mais informações. Não vamos configurar ele nesse artigo, geralmente não configuro ele em meus projetos e vou explicar o porque.

Automatizar a organização do código é muito legal e pode ser uma ótima ferramenta, mas isso tira um pouco da sua liberdade e engessa um pouco o código. O Prettier acaba fazendo várias formatações no código e às vezes eu não queria o código com o formato que ele sugeria. Gosto do processo de formatar o código e o Prettier acaba passando um pouco por cima disso. Em projetos que estou trabalhando sozinho, o ESLint é o suficiente para me ajudar, já o trabalho que o Prettier faz, gosto de fazer manualmente.

Então em qual momento eu adicionaria o Prettier em um projeto?

Em projetos Open Source que eu sei que as chances de receber Pull Requests são grandes e se estivesse em uma equipe com outros devs, caso percebesse que nem todos tem a mesma preocupação que eu de deixar o código bonito e organizado. Nesses casos, acho que faz total sentido o uso do Prettier, dessa forma garantimos que todos estão respeitando a organização do código.

Será necessário um projeto para fazer a configuração do EditorConfig e ESLint. Você pode seguir esse meu outro artigo para aprender a criar um projeto com Next e Typescript: 

Iniciando um Projeto com NextJS e Typescript

Ou pode criar um projeto simples abrindo uma pasta no seu editor e rodando o comando 

Com o projeto iniciado, podemos começar as configurações.

Para configurar essa ferramenta, iremos precisar de uma extensão do VS Code chamada 

, ela também existe para outros editores.

Com a extensão instalada, podemos clicar com o botão direito sobre o explorador de arquivos do projeto e selecionar a opção 

 e então um arquivo de configuração vai ser criado.

O arquivo vai ser gerado com as seguintes configurações:

root = true

[*]
indent_style = space
indent_size = 2
charset = utf-8
trim_trailing_whitespace = false
insert_final_newline = false

Nesse arquivo podemos ver algumas opções como o tipo de indentação, o tamanho da indentação, qual o charset que está sendo utilizado e algumas outras configurações. Pode ser que o seu 

 esteja com 4 e não com 2, fica a seu critério modificar essa opção, mas por convenção usamos 2.

Vamos começar modificando as 2 últimas opções, 

. Trim_trailing_whitespace vai retirar os espaços desnecessários que às vezes deixamos no final da linha ou em uma linha em branco e insert
_final_newline vai adicionar sempre uma linha em branco no final do arquivo, o que deixa o diff do git mais bonito e facilita a inserção de uma nova linha.

Por fim, caso não exista no arquivo, adicionaremos mais uma configuração, a 

, para garantir que as quebras de linha sejam padronizadas. No Windows o final das linhas são representadas por 

 , então para evitar que isso gere algum tipo de problema adicionamos essa configuração.

No final, o seu arquivo deve estar assim:

root = true

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

Podemos também fazer a configuração do 

 direto no VS Code. O EditorConfig busca as configurações do editor para criar o arquivo, dessa maneira não vamos precisar fazer essas modificações quando criamos o próximo arquivo.

Para acessar as configurações do VS Code, digite 

, clique na opção e irá abrir um arquivo JSON com as configurações do editor.

Basta colocar as seguintes configurações no arquivo e salvar:

"files.insertFinalNewline": true,
"files.trimTrailingWhitespace": true,
// Opcional
"editor.tabSize": 2,
"editor.rulers": [100],

Antes de iniciar de fato a instalação e configuração do ESLint no nosso projeto, precisamos instalar a 

. Ela vai ajudar a fazer com que o código seja ajustado automaticamente e vai destacar os erros que encontrar no nosso código.

Agora, precisamos inserir mais algumas propriedades no arquivo de configuração do editor.

"editor.formatOnSave": true,
"editor.codeActionsOnSave": {
  "source.fixAll": true,
},


Por padrão, o VS Code já tem uma funcionalidade que te ajuda a indentar o código, basta clicar com o botão direito em cima do código e ir na opção 

Com essas configurações, sempre que salvar um arquivo ele será formatado automaticamente, mesmo não tendo o ESLint instalado. Isso vai te ajudar a manter o código sempre indentado e quando o ESLint estiver configurado, ele já irá formatar seguindo as regras dele.

Agora, vamos para a instalação. As instruções utilizarão o 

# O -D indica que vamos instalar a lib como uma dependência de desenvolvimento
yarn add eslint -D

# Comando para inicializar o ESLint
yarn eslint --init


O ESLint traz um guia que vai nos ajudar a fazer a instalação, só precisamos responder as perguntas.

 ⇒ Checar a sintaxe e encontrar problemas

To check syntax, find problems and enforce code style

 ⇒ Checar a sintaxe, encontrar problemas e forçar um padrão de código

2 - What type of modules does your project use?

Geralmente vamos utilizar a primeira opção 

, a menos que esteja trabalhando em um projeto de Back-end com uma versão do Node que não suporta os Modules, ou em alguma outra situação que demande o uso do CommonsJS.

3 - Which framework does your project use?

 (Qual framework seu projeto está utilizando?)

Se for um projeto Back-end escolha a opção 

. Se estiver criado o projeto seguindo meu artigo de Next.js, escolha React.

 (Seu projeto está utilizando Typescript?)

Se estiver seguindo meu artigo de Next.js, selecionar a opção 

Se for um projeto com o Next.js, utilize a tecla 

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

 (Qual guia de estilo queremos utilizar?)

 Padrões de projetos já criados anteriormente por outra empresa

Utilizando ferramentas que irão aumentar sua produtividade e te proteger de você mesmo.