Nesse guia vamos te ajudar a configurar algumas bibliotecas e estrenções que vão te ajudar na hora de padronizar e organizar o codigo dos seus projeto.

Como referencia, utilizamos o Visual Studio Code como IDE e o Yarn para instalar as dependencia.

Ferramentas

ESLint ESLint

ESLint , é um programa que percorre seu código e o analisa quanto a possíveis erros. A extensão é altamente configurável, com uma variedade de opções internas para combinar com o guia de estilo da sua empresa. Ele pode destacar erros enquanto você digita seu editor, além de exibir uma lista detalhada de erros no seu console.

Prettier Prettier

Muitas vezes não escrevemos o código mais bonito, mas com o Prettier não é preciso mais se preocupar com isso. Após uma longa sessão de desenvolvimento, é só salvar seu arquivo e depois puf ele formata magicamente o código automaticamente!

dif

EditorConfig EditorConfig

O EditorConfig ajuda a manter estilos de codificação consistentes para vários desenvolvedores que trabalham no mesmo projeto em vários editores e IDEs. O projeto EditorConfig consiste em um formato de arquivo para definir estilos de codificação e uma coleção de plugins de editor de texto que permitem aos editores ler o formato do arquivo e aderir aos estilos definidos. Os arquivos EditorConfig são facilmente legíveis e funcionam bem com os sistemas de controle de versão.

Configurando no VSCode

  1. No VSCode, baixe as extensões: ESLint, Prettier e EditorConfig.
  2. Instale as bibliotecas ESLint e Prettier no seu projeto. Para isso, no diretório raiz do seu projeto, execute:

> yarn add --dev eslint prettier

  1. Instale a configuração do Airbnb. Se você estiver usando o npm 5+, poderá executar este atalho para instalar a configuração e todas as suas dependências:

> npx install-peerdeps --dev eslint-config-airbnb

  1. Instale eslint-config-prettier (desativa a formatação para ESLint) e eslint-plugin-prettier (permite que o ESLint mostre erros de formatação enquanto digitamos)

> yarn add --dev eslint-config-prettier eslint-plugin-prettier

  1. Crie um arquivo .eslintrc.json no diretório raiz do seu projeto:
{
  "extends": ["airbnb", "prettier"],
  "plugins": ["prettier"],
  "rules": {
    "prettier/prettier": ["error"]
  },
}
  1. O proximo passo é garantir que a formatação do Prettier seja feita ao falvar um arquiivo. Insira “editor.formatOnSave”: true nas configurações do usuário no VSCode.

Para abrir as configurações de usuario, use o atalho Ctrl + Shift + P e busque por: “Preferences: Open Settings (JSON)”

  1. Crie um arquivo .editorconfig no diretório raiz do seu projeto:
root = true

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

Parabéns, você conseguiu!

Seguindo todos esse passos, o seu VSCode deve esta pronto para detectar erros mais cedo, e junto com os formatadores ajudará a manter a consistência em todo o codigo fonte. Com essas extensões trabalhando lado a lado, será possivel criar um código limpo e sustentável. Seu chefe e seus colegas vão te agradecer.

Referencias

Integrating Prettier + ESLint + Airbnb Style Guide in VSCode. (20180). Disponivel em: https://blog.echobind.com/integrating-prettier-eslint-airbnb-style-guide-in-vscode-47f07b5d7d6a.