<h2>O que são ESLint e Prettier?</h2>
<p>ESLint é um analisador estático de código JavaScript que identifica e reporta padrões problemáticos, enquanto Prettier é um formatador de código opinionado que padroniza automaticamente a estrutura do seu código. A diferença fundamental: ESLint encontra problemas (variáveis não usadas, comparações perigosas), Prettier ajusta a aparência (espaçamento, aspas, ponto e vírgula).</p>
<p>Trabalhar com ambas as ferramentas juntas é a prática profissional atual. ESLint garante qualidade e boas práticas; Prettier elimina debates sobre estilo. Juntas, elas formam uma pipeline robusta que melhora a manutenibilidade e reduz bugs em projetos colaborativos.</p>
<h2>Instalação e Configuração</h2>
<h3>ESLint</h3>
<p>Instale o ESLint em seu projeto:</p>
<pre><code class="language-bash">npm install --save-dev eslint
npx eslint --init</code></pre>
<p>O comando <code>--init</code> cria um arquivo <code>.eslintrc.json</code>. Aqui está uma configuração moderna:</p>
<pre><code class="language-json">{
"env": {
"browser": true,
"es2021": true,
"node": true
},
"extends": ["eslint:recommended"],
"parserOptions": {
"ecmaVersion": "latest",
"sourceType": "module"
},
"rules": {
"no-unused-vars": ["error", { "argsIgnorePattern": "^_" }],
"no-console": "warn",
"eqeqeq": ["error", "always"],
"semi": ["error", "always"],
"quotes": ["error", "double"]
}
}</code></pre>
<h3>Prettier</h3>
<p>Instale o Prettier:</p>
<pre><code class="language-bash">npm install --save-dev prettier eslint-config-prettier eslint-plugin-prettier</code></pre>
<p>Crie um arquivo <code>.prettierrc.json</code>:</p>
<pre><code class="language-json">{
"semi": true,
"singleQuote": false,
"tabWidth": 2,
"trailingComma": "es5",
"bracketSpacing": true,
"arrowParens": "always"
}</code></pre>
<p>Atualize <code>.eslintrc.json</code> para integrar Prettier:</p>
<pre><code class="language-json">{
"extends": ["eslint:recommended", "plugin:prettier/recommended"],
"plugins": ["prettier"],
"rules": {
"prettier/prettier": "error"
}
}</code></pre>
<h2>Regras Práticas do ESLint</h2>
<h3>Configurando Regras Essenciais</h3>
<p>As regras do ESLint controlam comportamentos. Há três níveis: <code>off</code> (desabilitado), <code>warn</code> (aviso) e <code>error</code> (erro). Para um projeto profissional, configure as regras mais importantes:</p>
<pre><code class="language-json">{
"rules": {
"no-var": "error",
"prefer-const": "error",
"no-implicit-globals": "error",
"no-eval": "error",
"no-throw-literal": "error",
"no-param-reassign": "warn",
"consistent-return": "error"
}
}</code></pre>
<h3>Exemplo Prático</h3>
<p>Dado este código problemático:</p>
<pre><code class="language-javascript">var x = 10;
function calcular(num) {
if (num > 5) {
return num * 2;
}
// falta return aqui
}
var resultado = eval("5 + 5");
obj.props = "novo valor"; // reatribuição de parâmetro</code></pre>
<p>ESLint reportaria:</p>
<ul>
<li><code>no-var</code>: Use <code>const</code> ou <code>let</code>, não <code>var</code></li>
<li><code>prefer-const</code>: <code>x</code> nunca muda, use <code>const</code></li>
<li><code>consistent-return</code>: Nem todos os caminhos retornam valor</li>
<li><code>no-eval</code>: Nunca use <code>eval</code></li>
</ul>
<p>O código corrigido:</p>
<pre><code class="language-javascript">const x = 10;
function calcular(num) {
if (num > 5) {
return num * 2;
}
return null;
}
const resultado = 5 + 5;</code></pre>
<h2>Formatação com Prettier e Integração</h2>
<h3>Por que Prettier Importa</h3>
<p>Prettier resolve conflitos de estilo automaticamente. Não há discussões sobre aspas simples vs. duplas ou espaçamento. Ele formata o código inteiro consistentemente, economizando tempo em code reviews.</p>
<p>Execute Prettier para formatar:</p>
<pre><code class="language-bash">npx prettier --write .</code></pre>
<p>Exemplo antes e depois:</p>
<pre><code class="language-javascript">// ANTES (desorganizado)
const obj={name:"João",age:25,skills:["JS","React"]}
function saudacao(nome,idade){
console.log(Olá, ${nome}! Você tem ${idade} anos)
}
// DEPOIS (após prettier)
const obj = {
name: "João",
age: 25,
skills: ["JS", "React"],
};
function saudacao(nome, idade) {
console.log(Olá, ${nome}! Você tem ${idade} anos);
}</code></pre>
<h3>Integração no Workflow</h3>
<p>Adicione scripts ao <code>package.json</code>:</p>
<pre><code class="language-json">{
"scripts": {
"lint": "eslint . --ext .js,.jsx",
"lint:fix": "eslint . --ext .js,.jsx --fix",
"format": "prettier --write .",
"check": "prettier --check ."
}
}</code></pre>
<p>Configure um hook pré-commit com <code>husky</code>:</p>
<pre><code class="language-bash">npm install --save-dev husky lint-staged
npx husky install
npx husky add .husky/pre-commit "npm run lint && npm run format"</code></pre>
<p>Arquivo <code>.lintstagedrc.json</code>:</p>
<pre><code class="language-json">{
"*.{js,jsx}": ["eslint --fix", "prettier --write"],
"*.{json,md}": ["prettier --write"]
}</code></pre>
<p>Agora, a cada commit, seu código será automaticamente verificado e formatado.</p>
<h2>Conclusão</h2>
<p>ESLint e Prettier são ferramentas complementares essenciais para desenvolvimento JavaScript profissional. ESLint garante qualidade, detectando padrões perigosos e erros lógicos; Prettier padroniza a formatação, eliminando debates estéreis. Juntos, eles criam um ambiente onde o código é consistente, seguro e fácil de manter. A configuração inicial leva minutos, mas o retorno em qualidade e produtividade justifica amplamente o investimento.</p>
<h2>Referências</h2>
<ul>
<li><a href="https://eslint.org/docs/latest/" target="_blank" rel="noopener noreferrer">ESLint Official Documentation</a></li>
<li><a href="https://prettier.io/docs/" target="_blank" rel="noopener noreferrer">Prettier Documentation</a></li>
<li><a href="https://www.digitalocean.com/community/tutorials/how-to-use-eslint-to-improve-code-quality" target="_blank" rel="noopener noreferrer">Setting up ESLint and Prettier</a></li>
<li><a href="https://typicode.github.io/husky/" target="_blank" rel="noopener noreferrer">Husky - Git Hooks Made Easy</a></li>
<li><a href="https://github.com/airbnb/javascript" target="_blank" rel="noopener noreferrer">JavaScript Best Practices Guide</a></li>
</ul>