Para ejecutar automáticamente el comando "pint" de Laravel en VS Code al guardar archivos PHP, sigue estos pasos:

1. Instala la extensión "Run on Save" de "emeraldwalk" desde el [Marketplace de Extensiones de VS Code](https://marketplace.visualstudio.com/items?itemName=emeraldwalk.RunOnSave).

2. Configura la extensión para correr el comando `pint` cada vez que guardas un archivo php en  `settings.json`:

```json
   "emeraldwalk.runonsave": {
	  "commands": [
		{
		  "match": "\\.php$",
		  "cmd": "${workspaceFolder}/vendor/bin/pint ${file}"
		}
	  ]
	}
```

3. Abre un archivo PHP en tu proyecto de Laravel, realiza un cambio y guárdalo (`Ctrl+S`).

4. Observa la salida del comando `php artisan pint` en la terminal en la parte inferior de la ventana de VS Code.

Corre Laravel Ping al guardar un archivo PHP con VS Code

En este breve tutorial, te mostraré cómo listar las ramas recientes de GitHub en tu terminal utilizando un comando sencillo, y cómo crear un alias para ese comando que te permitirá ahorrar tiempo y optimizar tu flujo de trabajo.

### Listar las ramas recientes de GitHub

Para listar las 20 ramas más recientes en tu repositorio local, ingresa el siguiente comando en tu terminal:

```console
git for-each-ref --count=20 --sort=-committerdate refs/heads/ --format='%(refname:short)'
```
*Este comando mostrará las 20 ramas más recientes, ordenadas por la fecha del commit en orden descendente.*


### Crear un alias para el comando

Para hacer el proceso aún más eficiente, puedes crear un alias para el comando. Agrega la siguiente línea a tu archivo de configuración de shell `.bashrc`, `.zshrc` u otro archivo relevante:

```console
alias rb="git for-each-ref --count=20 --sort=-committerdate refs/heads/ --format='%(refname:short)'"
```

Después de guardar los cambios en el archivo de configuración, reinicia tu terminal o ejecuta el comando `source ~/.bashrc`. A partir de ahora, podrás listar tus ramas recientes utilizando el alias `rb`.

Listar ramas recientes de Git en la terminal.

Cuando trabajas con componentes de React, es importante definir las props que un componente puede aceptar. Sin embargo, definir cada prop individualmente para un componente puede volverse tedioso y resultar en mucho código repetitivo.

Una forma de reducir la cantidad de código necesario para definir las props es heredar las props del elemento HTML dentro del componente. Por ejemplo, en lugar de definir todas las props para un elemento `<button>`, puedes heredar las props del elemento HTML y solo definir las "props" personalizadas.

Echemos un vistazo a un componente de ejemplo:

```typescript
interface Props {
  onClick: () => void;
  customProp: boolean;
}

function SomeButton({ customProp = false, onClick }: Props): JSX.Element {
  if (customProp) {
    // hacer algo
  }

  return <button onClick={onClick} />;
}
```

En este ejemplo, el componente `SomeButton` tiene dos props: `onClick` y `customProp`. Si queremos agregar una prop className al botón, no podemos hacerlo porque no la hemos definido en la interfaz Props.

```typescript
// esto no es válido porque no tenemos una prop `className`
<SomeButton customProp onClick={doSomething} className="p-3" />
```

Para resolver este problema, podemos definir las props extendiendo `React.ButtonHTMLAttributes<HTMLButtonElement>`. Esto significa que podemos agregar cualquier prop que acepte un botón regular.

```typescript
interface Props extends React.ButtonHTMLAttributes<HTMLButtonElement> {
  customProp?: boolean;
}

function SomeButton({ customProp = false, ...props }: Props): JSX.Element {
  if (customProp) {
    // hacer algo
  }

  return <button {...props} />;
}
```

Con esta implementación actualizada de `SomeButton`, ahora podemos agregar la prop `className`, junto con cualquier otra prop que acepte un botón regular.

```typescript
// esto funciona
<SomeButton customProp onClick={doSomething} className="p-3" {...anyOtherProp} />
```

Esta técnica se puede aplicar a cualquier elemento HTML en el que se base un componente. Por ejemplo, si el componente se basa en un elemento `<div>`, podemos heredar las props de `React.HTMLAttributes<HTMLDivElement>` en su lugar.

```typescript
interface Props extends React.HTMLAttributes<HTMLDivElement> {
  customProp?: boolean;
}
```

Al heredar props del elemento HTML dentro de un componente, podemos reducir la cantidad de código repetitivo necesario para definir las props, al tiempo que nos permite agregar cualquier prop que acepte el elemento HTML.

Últimas publicaciones

Corre Laravel Ping al guardar un archivo PHP con VS Code

Listar ramas recientes de Git en la terminal.

Declaraciones eficientes de props en componentes de React.