Olá Pessoal! Neste artigo vamos configurar nosso editor para padronizar e formatar nosso código de forma automática, deixando-nos livres para pensar sobre a funcionalidade do nosso app.
Para isso, usaremos duas ferramentas. O ESLint que é um plugin utilizado para padronizar nosso código, como por exemplo a utilização de ponto e vírgula, tamanho máximo de caracteres em linhas dentre outros; e o Prettier que é utilizado para formatação do código deixando ele pretty, ou seja, 'bonito' 😀💅
⚙ Setup
Suponho que você já tenha o Visual Studio Code instalado e as extensões habilitadas ESLint e Prettier e um projeto GatsbyJS inicializado.
1. Instalando o ESLint como dependência do projeto
Execute comando abaixo para instalar osso package principal de linting o ESLint
$ yarn add eslint -D
Não precisaremos instalar o Prettier pois ele já vem empacotado junto com o projeto do Gatsby.
Depois de instalar o ESLint em nosso projeto vamos iniciar a configuração através do Wizard. Execute o comando abaixo e responda as perguntas:
$ yarn eslint --init
- How would you like to use ESLint? > To check syntax, find problems, and enforce code style - What type of modules does your project use? > JavaScript modules (import/export) - Which framework does your project use? > React - Does your project use TypeScript? > No - Where does your code run? > Browser - How would you like to define a style for your project? (Use arrow keys) > Use a popular style guide ? AirBnb - What format do you want your config file to be in? > JavaScript - Would you like to install them now with npm? (Y/n) > Y
🗒 Ao final do processo eu apago o arquivo
package-lock.jsone rodo o comandoyarn installpara atualizar oyarn.lock. Pois o Gatsby utiliza oyarncomo gerenciador de dependências do projeto.
Depois de terminado o processo será criado um arquivo .eslintrc.js na pasta raiz do nosso projeto, como também será instalado um série de dependências necessárias para o nosso guia de estilo escolhido.
Configurando o Prettier
Quando combinamos o ESLint e Prettier podemos enfrentar alguns problemas na formatação do nosso código, por que existem algumas regras comuns entre os pacotes, causando conflitos. Para contornamos essa situação, iremos instalar e configurar um pacote de configuração do Prettier para ESLint.
Vamos adicionar o seguinte pacote ao projeto que irá desabilitar todas as regras ESLint relacionadas à formatação.
$ yarn add eslint-config-prettier -D
Ao final do processo edite o arquivo .eslintrc.json para incluir essa configuração.
{
"extends": ["airbnb", "prettier", "prettier/react"]
}
Este pacote desabilita todas as regras do ESLint relacionadas à formatação.
O próximo passo é o pacote é o Plugin Prettier para ESLint. Este plugin faz com que o Prettier seja executado como uma regra ESLint.
$ yarn add eslint-plugin-prettier -D
Para utilizá-lo, adicione, o código a seguir, no arquivo .eslintrc.json
"plugins": [
"prettier"
],
"rules": {
"prettier/prettier": "error"
}
Regras adicionais
Embora a guia de estilo do Airbnb seja excelente em seu conjunto de regras, faremos um configuração adicional nas regras do ESlint.
Usaremos a configuração existente no arquivo .eslintrc.json como ponto de partida e vamos adicionar algumas regras específicas ao Prettier em nossa configuração ESLint.
// .eslintrc.json
module.exports = {
env: {
browser: true,
es6: true,
},
extends: [
'plugin:react/recommended',
'airbnb',
'prettier', 'prettier/react'
],
globals: {
Atomics: 'readonly',
SharedArrayBuffer: 'readonly',
},
parserOptions: {
ecmaFeatures: {
jsx: true,
},
ecmaVersion: 2018,
sourceType: 'module',
},
plugins: [
'react',
'prettier'
],
rules: {
"prettier/prettier": [
"error",
{
"singleQuote": true,
"printWidth": 120,
"trailingComma": "es5"
}
],
"react/jsx-filename-extension": [
1,
{
"extensions": [
".js",
".jsx"
]
}
],
"react/prop-types": 0,
"no-unused-vars": [
"error",
{
"vars": "local",
"args": "none"
}
],
"jsx-a11y/anchor-is-valid": [
"error",
{
"components": [
"Link"
],
"specialLink": [
"to",
"hrefLeft",
"hrefRight"
],
"aspects": [
"noHref",
"invalidHref",
"preferButton"
]
}
]
},
// Configuração para o Gatsby
settings: {
'import/core-modules': [
"react"
]
}
};
Configuração para o Gatsby
settings: {
'import/core-modules': [
"react"
]
}
Como iniciamos o projeto pelo Gatsby, iremos adicionar o pacote React para que o ESLint não nos avise sobre as importações não existentes.
2. Definindo as configurações do VSCode
Antes de prosseguir, vamos configurar o VSCode para executar o eslint e o prettier sempre que um arquivo for salvo.
Abra as configurações do usuário (em modo JSON) em pelo menu [File> Preferences > Settings] ou pelo atalho Ctrl+,.
// Eslint Prettier
"editor.formatOnSave": true,
"[javascript]": {
"editor.formatOnSave": false,
},
"[javascriptreact]": {
"editor.formatOnSave": false,
},
"prettier.disableLanguages": [
"js"
],
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
},
"eslint.alwaysShowStatus": true,
Explicando por partes:
- A entrada
editor.formatOnSavefaz com que o VSCode formate o documento sempre que salvar um arquivo.
"editor.formatOnSave": true,
- Desativa explicitamente a formatação para arquivos javascript, pois iremos formatar através do ESLint.
"[javascript]": {
"editor.formatOnSave": false,
},
"[javascriptreact]": {
"editor.formatOnSave": false,
},
- Executa o ESLint em cada salvamento (com o sinalizador --fix).
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
},
- Força o ESLint para sempre mostrar seu status na parte inferior do VSCode
"eslint.alwaysShowStatus": true,
Considerações
Por fim, configuramos com sucesso o ESLint para trabalhar em conjunto com o Prettier. Agora somos notificados pelo VSCode sobre problemas de lint e sobre problemas de formatação. Sempre que salvarmos um arquivo .js, esses dois pacotes trabalharão juntos em nosso favor e farão um fix de todos os problemas. Bons códigos!
Top comments (0)