Melhorando a Performance no Desenvolvimento: Usando Prettier Desacoplado do ESLint

No mundo do desenvolvimento web, ferramentas como Prettier e ESLint são essenciais para manter o código limpo e consistente. No entanto, você sabia que utilizar Prettier desacoplado do ESLint pode melhorar a performance durante a codificação? Vamos explorar por que isso faz sentido e como configurar seu ambiente de desenvolvimento para aproveitar essa vantagem.

Separação de Responsabilidades

Prettier: Formatação de Código

Prettier é uma ferramenta de formatação de código que garante que todo o código siga um estilo consistente, independente de quem o escreveu. Ele cuida da aparência do código, formatando-o de acordo com regras predefinidas.

ESLint: Linting de Código

ESLint é uma ferramenta de linting que ajuda a identificar e corrigir problemas de qualidade e padrões de código. Ele cuida da qualidade do código, garantindo que ele siga boas práticas e evitando bugs potenciais.

Quando usamos o Prettier desacoplado do ESLint, permitimos que cada ferramenta foque em suas responsabilidades específicas, sem sobrecarregar o processo de linting ou formatação. Isso pode resultar em uma experiência de desenvolvimento mais rápida e fluida.

Melhorando a Performance

Por que desacoplar Prettier do ESLint?

• Performance: Quando integrado ao ESLint, o Prettier adiciona uma sobrecarga ao processo de linting, pois o ESLint precisa aplicar as regras de linting e depois formatar o código. Usar o Prettier de forma independente permite que ele formate o código diretamente, sem passar pelo pipeline do ESLint.
• Simplicidade: Manter as responsabilidades separadas torna a configuração e o uso de cada ferramenta mais simples e direto.

Configuração Sugerida

Passo 1: Instale Prettier e ESLint

Comece instalando as duas ferramentas:

npm install --save-dev prettier eslint

Passo 2: Configure o Prettier

Crie um arquivo .prettierrc para configurar as opções do Prettier:

{
  "singleQuote": true,
  "trailingComma": "es5",
  "printWidth": 80,
  "tabWidth": 2,
  "semi": true
}

Crie também um arquivo .prettierignore para excluir arquivos que não devem ser formatados pelo Prettier:

node_modules
build
dist

Passo 3: Configure o ESLint

Crie um arquivo .eslintrc.json para configurar o ESLint:

{
  "env": {
    "browser": true,
    "es2021": true
  },
  "extends": [
    "eslint:recommended",
    "plugin:react/recommended"
  ],
  "parserOptions": {
    "ecmaFeatures": {
      "jsx": true
    },
    "ecmaVersion": 12,
    "sourceType": "module"
  },
  "plugins": ["react"],
  "rules": {
    "indent": ["error", 2],
    "linebreak-style": ["error", "unix"],
    "quotes": ["error", "single"],
    "semi": ["error", "always"]
  }
}

Passo 4: Adicione Scripts ao package.json

Adicione scripts no package.json para facilitar a execução do Prettier e ESLint:

{
  "scripts": {
    "format": "prettier --write .",
    "lint": "eslint . --ext .js,.jsx,.ts,.tsx"
  }
}

Passo 5: Integre com seu Editor

Para uma experiência de desenvolvimento mais fluida, configure seu editor (como VSCode) para executar o Prettier automaticamente ao salvar o arquivo. Isso pode ser feito adicionando as seguintes configurações no settings.json do VSCode:

{
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode"
}

Fluxo de Trabalho Sugerido

1. Formatar o Código: Use Prettier para formatar o código antes de realizar um commit ou durante o desenvolvimento.

npm run format

1. Linting: Use o ESLint para verificar problemas de qualidade e padrões de código.

npm run lint

Conclusão

Desacoplar Prettier do ESLint pode resultar em uma experiência de desenvolvimento mais rápida e eficiente, permitindo que cada ferramenta execute suas tarefas de forma otimizada. Essa abordagem é especialmente benéfica em projetos grandes, onde a performance pode ser um fator crucial.

Experimente essa configuração e veja como ela pode melhorar seu fluxo de trabalho. Se tiver dúvidas ou precisar de mais detalhes, sinta-se à vontade para deixar um comentário aqui abaixo!