Configurando o EsLint e Prettier - Parte 02 - Primeiros Passos no Javascript

Neste tutorial, vamos configurar o Prettier para formatação automática de código e integrá-lo com o ESLint para um fluxo de desenvolvimento mais eficiente.

Instalando o Prettier

1. Instale a extensão Prettier no VS Code
2. Adicione como dependência do projeto: npm install --save-dev prettier
3. Instale o pacote de integração com ESLint: npm install --save-dev eslint-config-prettier

Configuração do Prettier

Crie um arquivo .prettierrc.json na raiz do projeto:

1{
2 "singleQuote": false,
3 "semi": false,
4 "tabWidth": 2,
5 "trailingComma": "none"
6}

Principais opções:

• singleQuote: usa aspas simples (true/false)
• semi: adiciona ponto e vírgula (true/false)
• tabWidth: tamanho da indentação
• trailingComma: vírgula no final de objetos/arrays

Integrando com ESLint

No arquivo .eslintrc.json, adicione:

1"extends": ["standard","prettier"]

Isso evita conflitos entre as regras do ESLint e Prettier.

Configuração do VS Code

1. Abra as configurações (Ctrl+,)
2. Pesquise por "format on save" e marque a opção
3. Adicione ao settings.json:

   1"editor.codeActionsOnSave": {"source.fixAll.eslint": true

4. Defina o Prettier como formatador padrão para JavaScript

Considerações Finais

Com essa configuração você terá:

• Formatação automática ao salvar
• Correção de problemas do ESLint
• Padronização consistente no código
• Produtividade aumentada

Lembre-se de definir o formatador padrão para cada tipo de arquivo e ajustar as configurações conforme o padrão do seu projeto.