GatsbyJS: Configurando Eslint e Prettier no Visual Studio Code

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.json e rodo o comando yarn install para atualizar o yarn.lock. Pois o Gatsby utiliza o yarn como 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.formatOnSave faz 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!