██FR█████ █INTELL███████████

Configurando ESLint + Prettier + Husky no Angular(20)


This content originally appeared on DEV Community and was authored by Gustavo Machado

O que são cada item e para que serve?

Confira a definição e função básica de cada item presente neste artigo, que compõe a arquitetura de um projeto Frontend.

1. ESLint

Definição
  • É um linter (ou seja, um analisador de código) que percorre o código procurando por problemas.
  • Baseia-se em regras configuráveis, que podem ser habilitadas ou desativadas conforme a necessidade do projeto.
Função
  • Garantir qualidade do código
  • Manter consistência
  • Prevenir bugs
  • Melhorar a manutenção
  • Integração com o fluxo de trabalho

2. Prettier

Definição
  • O Prettier é um formatador de código opinativo.
  • Ele não analisa regras de qualidade ou possíveis bugs como o ESLint.
  • O foco dele é padronizar a formatação do código automaticamente, sem precisar discutir estilo no time.
Função
  • Formatação consistente
    • Decide automaticamente coisas como:
    • Tamanho da indentação (2 ou 4 espaços)
    • Uso de ponto e vírgula no final de linhas
    • Aspas simples ou duplas
    • Quebra de linha em funções longas
    • Espaços em branco e vírgulas finais
  • Economizar tempo
  • Integração automática

3. Husky

Definição
  • O Husky é uma ferramenta que permite configurar Git hooks facilmente.
  • Git hooks são scripts que o Git executa automaticamente em momentos específicos, como antes de um commit (pre-commit) ou antes de um push (pre-push).
Função
  • Garantir qualidade no commit
    • Rodar o ESLint e o Prettier antes de permitir o commit.
  • Rodar testes automaticamente
    • Impedir que alguém faça commit/push se os testes quebraram.
  • Aplicar verificações personalizadas
    • Conferir mensagens de commit.
    • Rodar ferramentas de segurança ou de build.

Passos para instalação das ferramentas no Angular:

  1. Adicionar e Configurar o ESLint
  2. Adicionar e configurar o Prettier
  3. Configuração da integração do ESLint
  4. Configuração de scripts no package.json
  5. Instalar e configurar o husky

1. Adicionar e Configurar o ESLint

Começamos instalando o ESLint no projeto Angular. Isso irá criar um arquivo eslint.config.js no seu diretório raiz.

ng add @angular-eslint/schematics

2. Adicionar e configurar o Prettier

Agora, vamos instalar o Prettier junto com as recomendadas integrações com o ESLint.

Instale o prettier:

npm install --save-dev prettier

Também instale o pretty-quick:

npm install --save-dev pretty-quick

👉 pretty-quick é bem útil porque ele roda só nos arquivos staged, e não no projeto inteiro.

Depois instale os plugins para compatibilidade com o ESLint:

npm install --save-dev eslint-config-prettier eslint-plugin-prettier

Crie um arquivo chamado .prettierrc no diretório raiz do seu projeto:

{
  "printWidth": 100,
  "tabWidth": 2,
  "useTabs": false,
  "singleQuote": true,
  "trailingComma": "all",
  "semi": true,
  "bracketSpacing": true,
  "arrowParens": "always",
  "endOfLine": "auto",
  "htmlWhitespaceSensitivity": "ignore",
  "embeddedLanguageFormatting": "auto"
}

Crie um arquivo chamado .prettierignore para que o prettier os ignore e não os formate:

package.json
package-lock.json
dist
node_modules

3. Configuração da integração do ESLint 

// @ts-nocheck
const eslint = require("@eslint/js");
const tseslint = require("typescript-eslint");
const angular = require("angular-eslint");
const prettierPlugin = require("eslint-plugin-prettier");
const prettierConfig = require("eslint-config-prettier");

module.exports = tseslint.config(
  {
    files: ["**/*.ts"],
    extends: [
      eslint.configs.recommended,
      ...tseslint.configs.recommended,
      ...tseslint.configs.stylistic,
      ...angular.configs.tsRecommended,
      prettierConfig,
    ],
    plugins: {
      prettier: prettierPlugin,
    },
    processor: angular.processInlineTemplates,
    rules: {
      "@angular-eslint/directive-selector": [
        "error",
        {
          type: "attribute",
          prefix: "app",
          style: "camelCase",
        },
      ],
      "@angular-eslint/component-selector": [
        "error",
        {
          type: "element",
          prefix: "app",
          style: "kebab-case",
        },
      ],
      "prettier/prettier": [
        "error",
        {
          endOfLine: "auto",
        },
      ],
      "@typescript-eslint/no-explicit-any": "error", // Forbid usage of 'any'
    },
  },
  {
    files: ["**/*.html"],
    extends: [
      ...angular.configs.templateRecommended,
      ...angular.configs.templateAccessibility,
    ],
    rules: {},
  },
);

4. Configuração de scripts no package.json

Nesta etapas vamos automatizar alguns comandos da aplicação para serem executadas através de scripts no package.json.

"lint": "ng lint",
"pretty-quick": "pretty-quick --staged",
"lint:fix": "ng lint --fix",
"format": "prettier --write .",
"format:staged": "pretty-quick --staged",

Agora tente rodar o comando do lint:

npm run lint

Caso erros de formatação aparecer do Prettier, rode o comando:

npm run format

5. Instalar e configurar o husky

No passo 5, vamos instalar e configurar o husky para podermos executar as ferramentas anteriores ao fazer commits e pushes.

npx husky-init && npm install

#ou

npx husky-init; npm install

Isso cria um arquivo .husky e um arquivo de hook (gancho) para pre-commit.

Agora edite o arquivo de pre-commit:

#!/usr/bin/env sh
. "$(dirname -- "$0")/_/husky.sh"

npm run format:staged
npm run lint

Além do pre-commit, adicionaremos também um pre-push:

npx husky add .husky/pre-push "npm run test"

O arquivo irá ter as seguintes configurações (este arquivo executará testes unitários nos pushes do GIT):

#!/usr/bin/env sh
. "$(dirname -- "$0")/_/husky.sh"

npm run test

Desde já agradeço a todos e espero que tenham gostado!

Att.
Gustavo Machado Pontes

linktr linkedin github instagram twitter


This content originally appeared on DEV Community and was authored by Gustavo Machado