Melhorando a Performance no Desenvolvimento: Usando Prettier Desacoplado do ESLint
Tags: webdev, javascript, programming, performance
Published: 2024-05-24 11:19:26

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:

```bash
npm install --save-dev prettier eslint
```

### Passo 2: Configure o Prettier

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

```json
{
  "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:

```json
{
  "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:

```json
{
  "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:

```json
{
  "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.

```bash
npm run format
```

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

```bash
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!