4. Herramientas de Calidad

 

Configuración de Quality Tools para Laravel y JavaScript

1. Introducción a las Herramientas de Calidad

1.1. ¿Por qué usar Quality Tools?

Cuando desarrollamos, es común olvidar detalles de formato como:

• Posición de llaves de apertura

• Comas al final de arrays

• Indentación consistente

• Orden de clases CSS

Beneficios:

• ✅ Código más legible y consistente

• ✅ Menos tiempo en revisiones de código

• ✅ Estándares uniformes en equipos

• ✅ Enfoque en funcionalidades, no en formato

---

2. Configuración de Laravel Pint (PHP)

2.1. ¿Qué es Laravel Pint?

Laravel Pint es una herramienta de formateo de código diseñada específicamente para proyectos Laravel. Utiliza PHP CS Fixer internamente y sigue los estándares:

• PSR-2 - Estándar de codificación

• PSR-4 - Estándar de autoloading

2.2. Verificación en composer.json

Laravel Pint ya viene incluido por defecto en las dependencias de desarrollo:

json

"require-dev": {

    "laravel/pint": "^1.0"

}

2.3. Uso Básico de Laravel Pint

Ejecutar Pint desde la terminal:

bash

./vendor/bin/pint

Resultado:

• Escanea todos los archivos PHP

• Corrige automáticamente los que no siguen los estándares

• Muestra qué archivos fueron modificados

Ejemplo de correcciones:

• Coloca llaves de apertura en la posición correcta

• Agrega comas al final de arrays

• Formatea constructores vacíos en una sola línea

2.4. Configuración en PhpStorm

Paso 1: Habilitar Laravel Pint

1. Presiona Cmd + , (Mac) o Ctrl + Alt + S (Windows)

2. Busca "Laravel Pint"

3. Habilita la opción

Paso 2: Usar Pint en el Editor

Cuando el código no cumple con los estándares:

1. Aparecerá subrayado en el editor

2. Coloca el cursor sobre el error

3. Presiona Option + Enter (Mac) o Alt + Enter (Windows)

4. Selecciona "Arreglar todo el archivo con Laravel Pint"

Paso 3: Automatizar el Formateo

1. Ve a Settings → Quality Tools → Laravel Pint

2. Configura las opciones según prefieras

3. Ve a Settings → Tools → Actions on Save

4. Activa "Reformat code on save"

Ahora: Cada vez que guardes un archivo PHP, se formateará automáticamente.

---

3. Configuración de Prettier (JavaScript/Vue)

3.1. Instalación de Dependencias

Ejecutamos el siguiente comando para instalar Prettier y plugins:

bash

npm install --save-dev prettier prettier-plugin-tailwindcss @trivago/prettier-plugin-sort-imports

Paquetes instalados:

• prettier - Formateador de código

• prettier-plugin-tailwindcss - Ordena clases de Tailwind CSS

• @trivago/prettier-plugin-sort-imports - Organiza imports

3.2. Configuración de Prettier

Crear archivo .prettierrc en la raíz del proyecto:

json

{

  "plugins": [

    "prettier-plugin-tailwindcss",

    "@trivago/prettier-plugin-sort-imports"

  ],

  "printWidth": 80,

  "tabWidth": 2,

  "useTabs": false,

  "semi": false,

  "singleQuote": true,

  "trailingComma": "es5",

  "bracketSpacing": true,

  "arrowParens": "avoid",

  "tailwindConfig": "./tailwind.config.js",

  "importOrder": [

    "^@core/(.*)$",

    "^@server/(.*)$",

    "^@ui/(.*)$",

    "^[./]"

  ],

  "importOrderSeparation": true,

  "importOrderSortSpecifiers": true

}

3.3. Configuración en PhpStorm

Paso 1: Configurar Prettier

1. Ve a Settings → Languages & Frameworks → JavaScript → Prettier

2. Selecciona "Manual configuration"

3. Navega a la carpeta del proyecto

4. Busca en node_modules/prettier

5. Selecciona la carpeta de Prettier

Paso 2: Habilitar Formateo Automático

1. Activa las casillas:

• ✅ "Run on save for files"

• ✅ "On code reformat"

2. Verifica que los archivos .vue estén incluidos

Ahora: Al guardar archivos .js, .vue y .css, se formatearán automáticamente.

3.4. Uso desde Terminal

Instalación global (opcional):

bash

npm install -g prettier

Verificar archivos sin modificar:

bash

prettier --check resources/js/**/*.{js,vue}

Corregir archivos:

bash

prettier --write resources/js/**/*.{js,vue}

Opciones útiles:

• --check - Solo verifica, no modifica

• --write - Modifica los archivos

---

4. Ejemplos de Formateo Automático

4.1. PHP (Laravel Pint)

Antes:

php

public function create(array $data)

{

    return User::create([

        'name' => $data['name'],

        'email' => $data['email'],

        'password' => Hash::make($data['password'])

    ]);

}

Después:

php

public function create(array $data)

{

    return User::create([

        'name' => $data['name'],

        'email' => $data['email'],

        'password' => Hash::make($data['password']),

    ]);

}

4.2. JavaScript/Vue (Prettier)

Antes:

javascript

import { ref } from 'vue'

import { useForm } from '@inertiajs/vue3'

import Button from '@/Components/Button.vue'

const form = useForm({

    name: '',

    email: '',

})

Después:

javascript

import { useForm } from '@inertiajs/vue3'

import { ref } from 'vue'

import Button from '@/Components/Button.vue'

const form = useForm({

    name: '',

    email: '',

})

Clases Tailwind ordenadas:

html

<!-- Antes -->

<div class="p-4 bg-white rounded shadow-lg text-center">

<!-- Después -->

<div class="rounded bg-white p-4 text-center shadow-lg">

---

5. Buenas Prácticas con Git

5.1. Commits Separados

Regla de oro: No mezclar cambios de estilo con cambios funcionales.

Ejemplo de flujo correcto:

bash

# Commit 1: Solo cambios de estilo

git add .

git commit -m "style: apply code formatting with Pint and Prettier"

# Commit 2: Cambios funcionales

git add .

git commit -m "feat: add chatbot creation feature"

5.2. Beneficios

• ✅ Revisiones de código más claras

• ✅ Facilidad para revertir cambios

• ✅ Historial más limpio y profesional

---

6. Resumen de Configuración

6.1. Herramientas Instaladas

Herramienta	Lenguaje	Propósito
Laravel Pint	PHP	Formateo de código PHP
Prettier	JS/Vue	Formateo de código JavaScript/Vue
Prettier Tailwind Plugin	CSS	Ordenar clases Tailwind
Prettier Import Plugin	JS	Ordenar imports

6.2. Comandos Útiles

bash

# PHP

./vendor/bin/pint                    # Corregir todo PHP

./vendor/bin/pint --test             # Solo verificar

# JavaScript (global)

prettier --check resources/js/**/*.{js,vue}  # Verificar

prettier --write resources/js/**/*.{js,vue}   # Corregir

# JavaScript (local)

npx prettier --write resources/js/**/*.{js,vue}

6.3. Configuraciones en PhpStorm

1. Laravel Pint: Settings → Laravel Pint → Habilitar

2. Prettier: Settings → JavaScript → Prettier → Manual configuration

3. Actions on Save: Settings → Tools → Actions on Save → Reformat code

---

7. Verificación Final

Checklist de configuración:

• □ Laravel Pint instalado en composer.json

• □ Prettier y plugins instalados con npm

• □ Archivo .prettierrc creado

• □ PhpStorm configurado con Pint

• □ PhpStorm configurado con Prettier

• □ Actions on Save activado

• □ Commit separado para cambios de estilo

---

8. Solución de Problemas Comunes

8.1. Laravel Pint no encuentra archivos

bash

# Ejecutar desde la raíz del proyecto

./vendor/bin/pint

8.2. Prettier no formatea archivos Vue

Verificar configuración en PhpStorm:

1. Settings → JavaScript → Prettier

2. Asegurar que *.vue está en la lista de extensiones

8.3. Conflictos con otros formateadores

Deshabilitar formateadores integrados de PhpStorm:

1. Settings → Editor → Code Style

2. Desmarcar "Enable formatter"

---

9. Conclusión

Con estas herramientas configuradas:

• ✅ Código PHP consistentemente formateado

• ✅ Código JavaScript/Vue con estilo uniforme

• ✅ Clases Tailwind ordenadas automáticamente

• ✅ Menos tiempo en revisiones de código

• ✅ Equipos con estándares unificados

¡Ahora podemos enfocarnos en construir funcionalidades increíbles para nuestros chatbots!