Code Formatter Expert System Prompt

# Configuración de Formateo de Código ## Contexto - **Stack tecnológico del proyecto**: JavaScript/TypeScript con React, Node.js, y archivos de configuración JSON/YAML/Markdown. - **Herramientas existentes**: ESLint 8.x con configuración básica, Prettier 2.x sin configuración personalizada, sin hooks de pre-commit. - **Equipo**: 5 desarrolladores con experiencia mixta en estándares de formateo. - **Puntos de dolor conocidos**: Inconsistencia en comillas, punto y coma, orden de imports, y formateo manual antes de cada commit. ## Plan de Configuración - [ ] **CF-PLAN-1.1 [Configuración de ESLint y Prettier]**: - **Herramienta**: ESLint 8.x con flat config, Prettier 3.x. - **Alcance**: Archivos .js, .jsx, .ts, .tsx en src/ y directorios de configuración. - **Justificación**: Combinación estándar para proyectos React/TypeScript con separación clara de responsabilidades (ESLint para calidad, Prettier para formato). - [ ] **CF-PLAN-1.2 [Configuración de Husky y lint-staged]**: - **Herramienta**: Husky 9.x, lint-staged 15.x. - **Alcance**: Hooks de pre-commit y pre-push. - **Justificación**: Automatización del formateo en el flujo de trabajo sin intervención manual. - [ ] **CF-PLAN-1.3 [Configuración de orden de imports]**: - **Herramienta**: eslint-plugin-import con reglas personalizadas. - **Alcance**: Todos los archivos JavaScript/TypeScript. - **Justificación**: Consistencia en la organización de imports por tipo y alcance. ## Elementos de Configuración - [ ] **CF-ITEM-1.1 [eslint.config.js]**: - **Archivo**: eslint.config.js (raíz del proyecto). - **Reglas**: - `import/order`: grupos en orden [builtin, external, internal, parent, sibling, index] con líneas en blanco entre grupos. - `import/no-unused-modules`: eliminar imports no utilizados. - `@typescript-eslint/no-unused-vars`: error para variables no utilizadas. - `no-console`: warning para console.log en código de producción. - `react/react-in-jsx-scope`: off (React 17+ con JSX transform). - `prettier/prettier`: error para forzar consistencia con Prettier. - **Dependencias**: eslint, eslint-plugin-react, @typescript-eslint/parser, @typescript-eslint/eslint-plugin, eslint-plugin-import, eslint-config-prettier, eslint-plugin-prettier. - [ ] **CF-ITEM-1.2 [.prettierrc.json]**: - **Archivo**: .prettierrc.json (raíz del proyecto). - **Reglas**: - `printWidth`: 100. - `tabWidth`: 2. - `useTabs`: false. - `semi`: true. - `singleQuote`: true. - `trailingComma`: "all". - `bracketSpacing`: true. - `arrowParens`: "always". - `endOfLine`: "lf". - **Dependencias**: prettier. - [ ] **CF-ITEM-1.3 [.prettierignore]**: - **Archivo**: .prettierignore (raíz del proyecto). - **Reglas**: Excluir node_modules/, dist/, build/, coverage/, package-lock.json, *.min.js. - [ ] **CF-ITEM-1.4 [.editorconfig]**: - **Archivo**: .editorconfig (raíz del proyecto). - **Reglas**: - `indent_style`: space. - `indent_size`: 2. - `end_of_line`: lf. - `charset`: utf-8. - `trim_trailing_whitespace`: true. - `insert_final_newline`: true. - **Dependencias**: Ninguna (soporte nativo en editores). - [ ] **CF-ITEM-1.5 [.husky/pre-commit]**: - **Archivo**: .husky/pre-commit. - **Reglas**: Ejecutar `npx lint-staged` para formatear solo archivos staged. - **Dependencias**: husky, lint-staged. - [ ] **CF-ITEM-1.6 [.husky/pre-push]**: - **Archivo**: .husky/pre-push. - **Reglas**: Ejecutar `npm run lint` y `npm run format:check` para validación completa. - **Dependencias**: husky. - [ ] **CF-ITEM-1.7 [package.json scripts]**: - **Archivo**: package.json (sección scripts). - **Reglas**: - `"format": "prettier --write ."`. - `"format:check": "prettier --check ."`. - `"lint": "eslint . --max-warnings 0"`. - `"lint:fix": "eslint . --fix"`. - `"prepare": "husky"`. - **Dependencias**: prettier, eslint, husky. - [ ] **CF-ITEM-1.8 [.vscode/settings.json]**: - **Archivo**: .vscode/settings.json. - **Reglas**: - `"editor.formatOnSave": true`. - `"editor.defaultFormatter": "esbenp.prettier-vscode"`. - `"eslint.validate": ["javascript", "javascriptreact", "typescript", "typescriptreact"]`. - `"editor.codeActionsOnSave": { "source.fixAll.eslint": "explicit" }`. - **Dependencias**: Ninguna (configuración de editor). ## Cambios de Código Propuestos ### eslint.config.js ```javascript import js from '@eslint/js'; import react from 'eslint-plugin-react'; import typescript from '@typescript-eslint/eslint-plugin'; import tsParser from '@typescript-eslint/parser'; import importPlugin from 'eslint-plugin-import'; import prettier from 'eslint-plugin-prettier'; import prettierConfig from 'eslint-config-prettier'; export default [ js.configs.recommended, { files: ['**/*.{js,jsx,ts,tsx}'], languageOptions: { parser: tsParser, parserOptions: { ecmaVersion: 'latest', sourceType: 'module', ecmaFeatures: { jsx: true }, }, }, plugins: { react, '@typescript-eslint': typescript, import: importPlugin, prettier, }, rules: { ...prettierConfig.rules, 'prettier/prettier': 'error', 'import/order': [ 'error', { groups: ['builtin', 'external', 'internal', 'parent', 'sibling', 'index'], 'newlines-between': 'always', alphabetize: { order: 'asc', caseInsensitive: true }, }, ], 'import/no-unused-modules': ['error', { unusedExports: true }], '@typescript-eslint/no-unused-vars': ['error', { argsIgnorePattern: '^_' }], 'no-console': ['warn', { allow: ['warn', 'error'] }], 'react/react-in-jsx-scope': 'off', }, }, { files: ['**/*.test.{js,jsx,ts,tsx}', '**/*.spec.{js,jsx,ts,tsx}'], rules: { 'no-console': 'off', '@typescript-eslint/no-unused-vars': 'off', }, }, { ignores: ['node_modules/**', 'dist/**', 'build/**', 'coverage/**'], }, ]; ``` ### .prettierrc.json ```json { "printWidth": 100, "tabWidth": 2, "useTabs": false, "semi": true, "singleQuote": true, "trailingComma": "all", "bracketSpacing": true, "arrowParens": "always", "endOfLine": "lf" } ``` ### .prettierignore ``` node_modules/ dist/ build/ coverage/ package-lock.json *.min.js ``` ### .editorconfig ```ini root = true [*] indent_style = space indent_size = 2 end_of_line = lf charset = utf-8 trim_trailing_whitespace = true insert_final_newline = true [*.md] trim_trailing_whitespace = false ``` ### .husky/pre-commit ```bash #!/usr/bin/env sh . "$(dirname -- "$0")/_/husky.sh" npx lint-staged ``` ### .husky/pre-push ```bash #!/usr/bin/env sh . "$(dirname -- "$0")/_/husky.sh" npm run lint npm run format:check ``` ### package.json (scripts y lint-staged) ```json { "scripts": { "format": "prettier --write .", "format:check": "prettier --check .", "lint": "eslint . --max-warnings 0", "lint:fix": "eslint . --fix", "prepare": "husky" }, "lint-staged": { "*.{js,jsx,ts,tsx}": ["prettier --write", "eslint --fix"], "*.{json,md,yaml,yml}": ["prettier --write"] } } ``` ### .vscode/settings.json ```json { "editor.formatOnSave": true, "editor.defaultFormatter": "esbenp.prettier-vscode", "eslint.validate": ["javascript", "javascriptreact", "typescript", "typescriptreact"], "editor.codeActionsOnSave": { "source.fixAll.eslint": "explicit" } } ``` ## Comandos ### Configuración inicial local ```bash # Instalar dependencias de desarrollo npm install --save-dev eslint prettier eslint-plugin-react @typescript-eslint/parser @typescript-eslint/eslint-plugin eslint-plugin-import eslint-config-prettier eslint-plugin-prettier husky lint-staged # Inicializar Husky npx husky init # Crear hooks echo "npx lint-staged" > .husky/pre-commit echo "npm run lint && npm run format:check" > .husky/pre-push chmod +x .husky/pre-commit .husky/pre-push # Formateo inicial de todo el código base npm run format # Verificar que todo pasa npm run lint npm run format:check ``` ### CI (GitHub Actions - .github/workflows/format-check.yml) ```yaml name: Format Check on: pull_request: branches: [main, develop] jobs: format-check: runs-on: ubuntu-latest steps: - uses: actions/checkout@v4 - uses: actions/setup-node@v4 with: node-version: '20' cache: 'npm' - run: npm ci - run: npm run lint - run: npm run format:check ``` ## Lista de Verificación de Aseguramiento de Calidad - [ ] Todas las herramientas de formateo se ejecutan sin conflictos ni reglas contradictorias. - [ ] Los hooks de pre-commit están configurados y probados de extremo a extremo. - [ ] El pipeline de CI incluye una verificación de formato como compuerta de estado obligatoria. - [ ] Los archivos de configuración del editor están incluidos para auto-formateo consistente al guardar. - [ ] Los archivos de configuración incluyen comentarios que explican reglas no predeterminadas. - [ ] La ordenación de imports está configurada y produce un orden determinista. - [ ] La documentación del equipo cubre configuración, uso y proceso de cambio de reglas. ## Recordatorios de Ejecución - [ ] **CF-EXEC-1.1**: Aplicar el formateo inicial en un commit dedicado para minimizar ruido en el diff. - [ ] **CF-EXEC-1.2**: Configurar git blame para ignorar el commit de formateo usando .git-blame-ignore-revs. - [ ] **CF-EXEC-1.3**: Comunicar el plan de migración de formateo al equipo antes de la ejecución. - [ ] **CF-EXEC-1.4**: Verificar que no ocurran cambios funcionales durante la migración con ejecuciones de la suite de pruebas. - [ ] **CF-EXEC-1.5**: Documentar el proceso de bypass con `--no-verify` solo para emergencias.