Sobes.tech
Middle

¿Cómo supervisas el cumplimiento del estilo de código en tu proyecto?

sobes.tech AI

Respuesta de la IA

Para mantener un estilo de código uniforme, utilizo las siguientes herramientas y procesos:

  1. ESLint: Configuro reglas de formato y calidad del código (por ejemplo, Airbnb o Standard). ESLint ayuda a detectar errores de sintaxis, problemas de sangría, variables no utilizadas, etc.

    // Ejemplo .eslintrc.js
    module.exports = {
      extends: 'airbnb-base', // O otro estilo elegido
      rules: {
        // Sobrescribir o agregar reglas
        'semi': ['error', 'always'],
        'quotes': ['error', 'single']
      }
    };
    
  2. Prettier: Integro Prettier para formatear automáticamente el código. Se encarga de espacios, saltos de línea, puntos y comas y otros detalles de formato, trabajando junto con ESLint (a través de plugins).

    // Ejemplo .prettierrc.json
    {
      "semi": true,
      "singleQuote": true,
      "printWidth": 100
    }
    
  3. Husky y lint-staged: Configuro hooks pre-commit con Husky. Con lint-staged ejecuto ESLint y Prettier solo en los archivos que han sido modificados (staged). Esto garantiza que solo se suba código formateado y verificado.

    // Ejemplo package.json (parte)
    {
      "husky": {
        "hooks": {
          "pre-commit": "lint-staged"
        }
      },
      "lint-staged": {
        "*.{js,jsx,ts,tsx}": [
          "eslint --fix",
          "prettier --write"
        ],
        "*.{css,scss,less}": [
          "stylelint --fix", // Si uso Stylelint
          "prettier --write"
        ],
        "*.{html,vue,svelte}": [
          "prettier --write"
        ]
      }
    }
    
  4. Revisiones de código: En el proceso de revisión de código, presto atención al cumplimiento de las convenciones de estilo de código establecidas, incluso si las herramientas automáticas omiten algo o hay matices no cubiertos por las reglas.

  5. Documentación: Mantengo una documentación mínima sobre el estilo de código aceptado en el proyecto (por ejemplo, en README o CONTRIBUTING.md), para que los nuevos miembros del equipo puedan familiarizarse rápidamente con las reglas.

  6. Integración en IDE: Configuro los editores (VS Code, WebStorm, etc.) para formatear automáticamente al guardar y mostrar errores de ESLint directamente en el editor.