ESLint + Prettier

O que é lint?

Lint é o termo utilizado para análise estática de código e seu objetivo é encontrar problemas no código antes mesmo dele ser executado. É uma das etapas mais importantes da construção de um software.

O que é ESLint?

ESLint é uma ferramenta de linting desenvolvida especificamente para JavaScript. Possui uma grande quantidade de regras pré-definidas e é completamente customizável através de plugins.

Para mais informações, acesse o site oficial do ESLint.

O que é Prettier?

Prettier é um formatador de códigos com suporte a muitas linguagens e possui integração com a maioria dos editores de código. Seu objetivo é fazer com que o código seja formatado de maneira sólida e consistente.

O Prettier pode ser integrado ao ESLint para sobrescrever as regras definidas pelo ESLint.

Para mais informações, acesse o site oficial do Prettier.

Conflito

Tanto o ESLint quanto o Prettier possuem extensões para o VS Code. Quando as duas extensões estão habilitadas no VS Code, as duas extensões vão tentar formatar o código e isso irá gerar conflito.

Para resolver esse problema, é necessário alterar as configurações do VS Code para que apenas uma das extensões formate o código.

Solução

1. Instalar as dependências do ESLint

$ npm i -D eslint

2. Instalar as dependências do Prettier

$ npm i -D prettier eslint-config-prettier eslint-plugin-prettier

3. Criar o arquivo de configuração do ESLint (.eslintrc.json) e adicionar as regras do Prettier

{
  "extends": ["prettier"],
  "plugins": ["prettier"],
  "rules": {
    "prettier/prettier": [
      "error",
      {
        "singleQuote": true
      }
    ]
  }
}

4. Configurar o VS Code para que apenas a extensão do ESLint formate o código.

{
  // habilitar o format on save (formatar ao salvar)
  "editor.formatOnSave": true,
  // configurar as ações que devem ser executadas ao salvar um arquivo
  "editor.codeActionsOnSave": {
    // executar o ESLint
    "source.fixAll.eslint": true
  },
  // desabilitar o plugin do Prettier para arquivos .js e .jsx
  "prettier.disableLanguages": ["javascript", "javascriptreact"]
}

Conclusão

Essa é a maneira que encontrei para que as duas extensões possam conviver juntas e não haja conflito na hora de salvar/formatar os arquivos. Eu adiciono as configurações do Prettier dentro do arquivo de configurações do ESLint e desabilito a extensão do Prettier para arquivos dos tipos .js e .jsx.