Introduccion a la configuracion de ESLint y Prettier

Lo que aprenderas en este tutorial

✓ Configuracion de ESLint
✓ Configuracion de Prettier
✓ Integracion ESLint + Prettier
✓ Configuracion de VS Code
✓ Git hooks

Step 1: Configuracion de ESLint

npm init @eslint/config

# Configuracion interactiva
# - 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: Configuracion de Prettier

npm install -D prettier

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

# .prettierignore
node_modules
dist
.next

Step 4: Integracion 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 [
  // ... otras configuraciones
  prettierConfig,
  {
    plugins: { prettier },
    rules: {
      'prettier/prettier': 'error',
    },
  },
];

Step 5: Scripts en package.json

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

Step 6: Configuracion de 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

Mejores practicas

✓ Prettier para el formateo
✓ ESLint para la calidad del codigo
✓ Usar ambos en combinacion
✓ Verificar tambien en CI/CD

Resumen

Con ESLint y Prettier puedes unificar el estilo de codigo y mantener la calidad. Automatizalo con Git hooks.