Guia Completo: Configurando ESLint e Prettier para Linting

Aplicar linting em um projeto JavaScriptIntrodução ao JavaScript e Configuração do AmbienteDescubra neste tutorial narrativo como configurar seu ambiente de desenvolvimento e começar a programar em JavaScript de maneira prática e eficiente. é fundamental para manter um padrão de código consistente, legível e fácil de manter. Além disso, ao utilizar ferramentas como ESLint e Prettier, é possível detectar erros rapidamente e garantir uma formatação uniforme entre todos os desenvolvedores de uma equipe. Neste tutorial, exploraremos como configurar o ESLint e o Prettier em um projeto JavaScriptIntrodução ao JavaScript e Configuração do AmbienteDescubra neste tutorial narrativo como configurar seu ambiente de desenvolvimento e começar a programar em JavaScript de maneira prática e eficiente., bem como as principais vantagens de utilizá-los em conjunto.

Por que Linting é Importante?🔗

Linting envolve analisar o seu código e apontar potenciais problemas, sejam eles erros de sintaxe, uso indevido de variáveisPré-processadores (SASS/SCSS): Variáveis, Mixins, NestingAprenda a manter seu CSS de forma otimizada com SASS/SCSS utilizando variáveis, mixins e nesting para um código limpo e produtivo. ou violações de convenções. Alguns benefícios incluem:

• Detecção de erros logo no início do desenvolvimento.
• Consistência no estiloRelação entre HTML e CSSDescubra como HTML e CSS trabalham juntos para criar páginas web esteticamente agradáveis e bem estruturadas, facilitando a manutenção e o desempenho. de código, facilitando a colaboração.
• Melhoria na legibilidade e manutenibilidade do projeto.

Ao identificar problemas automaticamente, ferramentas de linting ajudam a manter a qualidade do código em um nível elevado, reduzindo a ocorrência de bugs no ambiente de produção.

O que é o ESLint?🔗

O ESLint é uma ferramenta amplamente utilizada para analisar seu código JavaScriptIntrodução ao JavaScript e Configuração do AmbienteDescubra neste tutorial narrativo como configurar seu ambiente de desenvolvimento e começar a programar em JavaScript de maneira prática e eficiente., aplicando regras que ajudam a evitar más práticas ou inconsistências. Ele fornece:

• Regras configuráveis que podem ser habilitadas ou desabilitadas conforme a necessidade.
• Integração com editores de textoEditores de Código e Ferramentas de DesenvolvimentoDescubra como escolher editores de código e utilizar DevTools para melhorar a criação e depuração de páginas HTML de forma prática e eficiente. e IDEs (Visual Studio CodeEditores de Código e Ferramentas de DesenvolvimentoDescubra como escolher editores de código e utilizar DevTools para melhorar a criação e depuração de páginas HTML de forma prática e eficiente., WebStorm, Sublime etc.).
• Plugins para adicionar regras extras específicas para certos frameworks ou bibliotecas.

Instalação do ESLint

Para iniciar, é necessário ter o Node.jsIntrodução ao Node.js: Servidor e FerramentasDescubra como dominar o Node.js e criar servidores HTTP. Aprenda a instalar, configurar e utilizar o NPM, além de aplicar práticas no desenvolvimento web. e npmIntrodução ao Node.js: Servidor e FerramentasDescubra como dominar o Node.js e criar servidores HTTP. Aprenda a instalar, configurar e utilizar o NPM, além de aplicar práticas no desenvolvimento web. (ou Yarn) instalados em sua máquina. Em seguida:

npm install --save-dev eslint

Configuração Inicial

Após instalar, utilize o comando abaixo para gerar um arquivo de configuração:

npx eslint --init

Este comando irá guiá-lo em algumas perguntas, como o estilo de código preferido, se deseja utilizar suporte a módulos ES6Tratamento de Módulos e BundlersDescubra como módulos e bundlers revolucionaram o desenvolvimento JavaScript, promovendo organização, performance e escalabilidade em aplicações modernas. e se deseja habilitar regras para React, Vue ou Node.js. Ao final, será criado um arquivo .eslintrc.json ou .eslintrc.js.

Um exemplo de .eslintrc.json simplificado pode ser:

{
  "env": {
    "browser": true,
    "es2021": true
  },
  "extends": [
    "eslint:recommended"
  ],
  "rules": {
    "no-unused-vars": "warn",
    "eqeqeq": "error"
  }
}

Neste arquivo, definimos:

• env: informa que o código roda no navegador (browser) e permite recursos do ES2021.
• extendsClasses e Herança em ES6+Aprenda a dominar classes e herança em ES6+: escreva códigos JavaScript claros e eficientes com métodos, getters e setters.: utiliza a configuração recomendada do ESLint.
• rules: especifica que no-unused-vars deve exibir um aviso (warn) e eqeqeq deve ser tratado como erro (error).

O que é o Prettier?🔗

O Prettier é uma ferramenta de formatação de código. Diferente do ESLint, que se concentra em analisar e impor boas práticasCobertura de Testes e Práticas de QualidadeDescubra como a cobertura de testes assegura qualidade e confiabilidade em projetos JavaScript. Aprenda a aplicar métricas e ferramentas essenciais., o foco do Prettier é:

• Formatação automática de código (quebras de linhaQuebras de Linha e Entidades HTML: Caracteres EspeciaisDescubra neste tutorial completo como utilizar quebras de linha com a tag <br> e aplicar entidades HTML, garantindo a exibição correta de caracteres., indentação, aspas etc.).
• Minimizar bikeshedding (discussões sobre estiloRelação entre HTML e CSSDescubra como HTML e CSS trabalham juntos para criar páginas web esteticamente agradáveis e bem estruturadas, facilitando a manutenção e o desempenho.) dentro de equipes de desenvolvimento.

Instalação do Prettier

Semelhante ao ESLint, você instala o Prettier em seu projeto via:

npm install --save-dev prettier

Configuração do Prettier

É comum criar um arquivo .prettierrc (ou .prettierrc.json) para especificar suas preferências de formatação. Por exemplo:

{
  "singleQuote": true,
  "semi": false,
  "tabWidth": 2
}

• singleQuote: define o uso de aspas simples.
• semi: define se o ponto-e-vírgula é utilizado ao final de cada instrução.
• tabWidth: define o número de espaços para cada nível de indentação.

Caso deseje, você também pode deixar o Prettier sem configuração – ele possui valores padrão que funcionam bem para grande parte dos projetos.

ESLint x Prettier🔗

É importante!important e Boas PráticasDescubra como o !important afeta a cascata do CSS e aprenda boas práticas para evitar conflitos, facilitando a manutenção e depuração do código. entender que ESLint e Prettier têm funções complementares, porém, podem ocorrer conflitos entre as regras de estilo do ESLint e as definições do Prettier. Para resolver esse impasse, recomenda-se integrar os dois com plugins específicos.

Integrando ESLint e Prettier

Instale os pacotes necessários:

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

• eslint-config-prettier: desabilita as regras de formatação do ESLint que possam conflitar com o Prettier.
• eslint-plugin-prettier: faz o ESLint exibir erros apontados pelo Prettier.

Em seguida, ajuste seu arquivo de configuração do ESLint para incluir essas extensões:

{
  "extends": [
    "eslint:recommended",
    "plugin:prettier/recommended"
  ],
  "plugins": ["prettier"],
  "rules": {
    "prettier/prettier": "error"
  }
}

Assim, o ESLint sabe que o Prettier cuida das regras de formatação, eliminando conflitos e permitindo que você use somente o comando eslint --fix para corrigir formatação e linting de uma só vez.

Exemplos de Uso🔗

Depois de configurar, você pode rodar o ESLint em seus arquivos JavaScriptIntrodução ao JavaScript e Configuração do AmbienteDescubra neste tutorial narrativo como configurar seu ambiente de desenvolvimento e começar a programar em JavaScript de maneira prática e eficiente. assim:

npx eslint src/**/*.js

Para corrigir formatações e erros relacionados a estiloRelação entre HTML e CSSDescubra como HTML e CSS trabalham juntos para criar páginas web esteticamente agradáveis e bem estruturadas, facilitando a manutenção e o desempenho. de código, utilize:

npx eslint src/**/*.js --fix

Ou, se preferir, você também pode usar o Prettier diretamente:

npx prettier src/**/*.js --write

A recomendação é centralizar tudo através do comando de lint do ESLint, que já executa as correções do Prettier, garantindo que ambas as ferramentas sejam aplicadas de forma consistente.

Automatizando com Scripts🔗

Para facilitar o processo, no arquivo package.json, você pode criar scripts de linha de comando. Dessa forma, basta rodar npmIntrodução ao Node.js: Servidor e FerramentasDescubra como dominar o Node.js e criar servidores HTTP. Aprenda a instalar, configurar e utilizar o NPM, além de aplicar práticas no desenvolvimento web. run lint ou npmIntrodução ao Node.js: Servidor e FerramentasDescubra como dominar o Node.js e criar servidores HTTP. Aprenda a instalar, configurar e utilizar o NPM, além de aplicar práticas no desenvolvimento web. run format para aplicar as ferramentas:

{
  "scripts": {
    "lint": "eslint src/**/*.js",
    "format": "prettier src/**/*.js --write"
  }
}

Isso é especialmente útil para equipes, pois padroniza como todos aplicam as ferramentas.

Boas Práticas e Dicas🔗

• Integração com o Editor: Muitos editores oferecem suporte integrado ao ESLint e ao Prettier. Ative essas extensões para visualizar erros e correções em tempo real.
• Commit Hooks: É comum usar bibliotecas como o Husky para rodar o ESLint e o Prettier antes de cada commit, garantindo que somente código formatado adequadamente seja enviado para o repositório.
• Discussões de EstiloRelação entre HTML e CSSDescubra como HTML e CSS trabalham juntos para criar páginas web esteticamente agradáveis e bem estruturadas, facilitando a manutenção e o desempenho.: Antes de configurar essas ferramentas, alinhe as preferências de estiloRelação entre HTML e CSSDescubra como HTML e CSS trabalham juntos para criar páginas web esteticamente agradáveis e bem estruturadas, facilitando a manutenção e o desempenho. com a equipe para evitar conflitos.
• Manutenção de Dependências: Mantenha o ESLint, o Prettier e seus plugins sempre atualizados para aproveitar as últimas regras, correções e melhorias de performanceDebugging e Ferramentas de Desenvolvimento do NavegadorAprenda a depurar código JavaScript com as Ferramentas do Navegador. Use console, breakpoints e debugger para solucionar bugs de forma prática..

Conclusão🔗

A adoção de ESLint e Prettier em um projeto JavaScriptIntrodução ao JavaScript e Configuração do AmbienteDescubra neste tutorial narrativo como configurar seu ambiente de desenvolvimento e começar a programar em JavaScript de maneira prática e eficiente. impacta diretamente a qualidade do código, promovendo confiabilidade, consistência e manutenibilidade. Com o linting, os erros são detectados rapidamente e, com uma formatação padronizada, todos na equipe podem se concentrar na lógica do projeto, em vez de discutir estiloRelação entre HTML e CSSDescubra como HTML e CSS trabalham juntos para criar páginas web esteticamente agradáveis e bem estruturadas, facilitando a manutenção e o desempenho. de código.

Por meio da configuração adequada e da integração de ambas as ferramentas, você terá um workflow automatizado e eficiente, que colabora para um desenvolvimento escalável e de fácil colaboração.