Introdução à Configuração de ESLint e Prettier

O que você aprenderá neste tutorial

✓ Configuração do ESLint
✓ Configuração do Prettier
✓ Integração ESLint + Prettier
✓ Configuração do VS Code
✓ Git hooks

Step 1: Configuração do ESLint

npm init @eslint/config

# Configuração interativa
# - To check syntax and find problems
# - JavaScript modules (import/export)
# - React / Vue / None
# - TypeScript: Yes
# - Browser / Node

Step 2: eslint.config.js (Flat Config)

import js from '@eslint/js';
import typescript from '@typescript-eslint/eslint-plugin';
import tsParser from '@typescript-eslint/parser';

export default [
  js.configs.recommended,
  {
    files: ['**/*.ts', '**/*.tsx'],
    languageOptions: {
      parser: tsParser,
      parserOptions: {
        project: './tsconfig.json',
      },
    },
    plugins: {
      '@typescript-eslint': typescript,
    },
    rules: {
      '@typescript-eslint/no-unused-vars': 'error',
      '@typescript-eslint/no-explicit-any': 'warn',
    },
  },
];

Step 3: Configuração do Prettier

npm install -D prettier

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

# .prettierignore
node_modules
dist
.next

Step 4: Integração ESLint + Prettier

npm install -D eslint-config-prettier eslint-plugin-prettier

// eslint.config.js
import prettier from 'eslint-plugin-prettier';
import prettierConfig from 'eslint-config-prettier';

export default [
  // ... outras configurações
  prettierConfig,
  {
    plugins: { prettier },
    rules: {
      'prettier/prettier': 'error',
    },
  },
];

Step 5: Scripts no package.json

{
  "scripts": {
    "lint": "eslint .",
    "lint:fix": "eslint . --fix",
    "format": "prettier --write .",
    "format:check": "prettier --check ."
  }
}

Step 6: Configuração do VS Code

// .vscode/settings.json
{
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnSave": true,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": "explicit"
  },
  "eslint.validate": ["javascript", "typescript", "javascriptreact", "typescriptreact"]
}

// .vscode/extensions.json
{
  "recommendations": [
    "dbaeumer.vscode-eslint",
    "esbenp.prettier-vscode"
  ]
}

Step 7: Git hooks (lint-staged)

npm install -D husky lint-staged
npx husky init

// package.json
{
  "lint-staged": {
    "*.{ts,tsx,js,jsx}": ["eslint --fix", "prettier --write"],
    "*.{json,md,css}": ["prettier --write"]
  }
}

# .husky/pre-commit
npx lint-staged

Melhores Práticas

✓ Prettier para formatação
✓ ESLint para qualidade do código
✓ Use ambos em conjunto
✓ Verifique também no CI/CD

Resumo

Com ESLint e Prettier, você pode unificar o estilo do código e manter a qualidade. Automatize com Git hooks.