¿Cómo ejecuto Prettier solo en los archivos que quiero confirmar?

4 minutos de lectura

Avatar de usuario de Patrick Hund
Patricio Hund

Usando Fornidohe configurado mi package.json con un gancho de confirmación previa para que mi código JavaScript se formatee usando más bonita antes de cada compromiso:

{
  "name": "prettier-demo",
  "scripts": {
    "precommit": "prettier --write **/*.js && git add ."
  },
  "devDependencies": {
    "husky": "^0.14.3",
    "prettier": "^1.8.2"
  }
}

Esto funciona bien, pero hay dos inconvenientes:

  1. Si tengo un proyecto grande con miles de archivos JavaScript, tengo que esperar a que Prettier los procese todos, incluso si solo unos pocos han cambiado; esto puede tomar mucho tiempo y me pone nervioso rápidamente cuando se hace con cada compromiso

  2. A veces quiero preparar solo un par de archivos para confirmar, dejando otros cambios fuera de la confirmación; porque hago un git add . después de ejecutar Prettier, todos mis cambios siempre terminarán en la confirmación

¿Cómo puedo ejecutar Prettier antes de cada confirmación? solo en los archivos que han sido preparadosignorando archivos no preparados o sin cambios?

avatar de usuario de str
calle

Puedes hacer eso usando pelusa puesta en escena:

Linting tiene más sentido cuando se ejecuta antes de confirmar su código. Al hacerlo, puede asegurarse de que no ingresen errores al repositorio y hacer cumplir el estilo del código. Pero ejecutar un proceso de lint en un proyecto completo es lento y los resultados de lint pueden ser irrelevantes. En última instancia, solo desea eliminar los archivos que se confirmarán.

Este proyecto contiene un script que ejecutará tareas de shell y npm arbitrarias con una lista de archivos preparados como argumento, filtrados por un patrón global específico.

Instalar pelusa puesta en escena y fornidoque se requiere para ganchos de confirmación previa, con este comando:

npm install --save-dev lint-staged husky

Cambie su paquete.json de la siguiente manera:

{
  "scripts": {
    "precommit": "lint-staged"
  },
  "lint-staged": {
    "*.js": [
      "prettier --write",
      "git add"
    ]
  }
}

  • @PatrickHund Estoy de acuerdo, pero también me gusta tu actitud práctica 🙂 Todavía puedes recuperar tu respuesta si quieres.

    – calle

    2 de diciembre de 2017 a las 17:53


  • No, esta bien. Otro desarrollador de mi equipo había configurado la confirmación previa con lint-staged, pero no funcionó correctamente porque puso “git add”. en la configuración en lugar de “git add”. Así que escribí ese script de bash, podría haber quitado el punto y terminar con eso 😀

    – Patrick Hund

    2 de diciembre de 2017 a las 17:55

  • Hice esto con prettier-eslint, la misma sintaxis exacta que la respuesta. "lint-staged": { "*.{js,less,json}": [ "prettier-eslint --write", "git add" ] },

    – jazzy

    3 de agosto de 2018 a las 22:55


  • También he visto un repositorio de ‘compromisos precisos’, que indica que solo embellece las partes del archivo preparadas, es decir, partes preparadas y no el archivo completo. ¿Qué piensas sobre esto? Todavía no lo he probado. github.com/nrwl/precise-commits

    – Amir Eldor

    1 de noviembre de 2018 a las 8:04

  • @AmirEldor Creo que es una mala idea, ya que esto podría generar un formato inconsistente dentro de un solo archivo.

    – calle

    1 de noviembre de 2018 a las 8:12

avatar de usuario de kigiri
kigiri

Encontré que simplemente ejecutando:

prettier --write $(git diff --name-only --diff-filter d | grep '\.js$' | xargs)

fue suficiente para mis necesidades, solo hice un alias y lo usé.

  • que en realidad devolvió algunos resultados que tenían .js en la ruta. esto funcionó mejor para mí: git diff –name-only | grep ‘\.ts$’

    -Nitsan Baleli

    2 de noviembre de 2020 a las 13:22


  • También acabo de enterarme de que esto fallará cuando se elimine un archivo. Prettier intentará formatear el archivo eliminado. Para que funcione usa prettier --write $(git diff --name-only --diff-filter d | grep '\.ts$' | xargs)

    – Seega

    12 de agosto de 2021 a las 14:49


  • Gracias, @NitsanBaleli, actualicé el mensaje para incluir la corrección de la coincidencia de grep y las correcciones eliminadas del filtro.

    – kigiri

    21 de agosto de 2021 a las 9:43

  • Si está trabajando en un proyecto TypeScript, esto coincidirá con .js, .ts, .jsx y .tsx: prettier --write $(git diff --name-only --diff-filter d | grep -e '\.[tj]sx\?$' | xargs)

    – odinho – Velmont

    30 de mayo a las 17:42

Avatar de usuario de Max Ogden
max ogden

Si no desea agregar devDependency lint-staged también puede hacer lo mismo con un script Bash:

#!/usr/bin/env bash
# chmod +x this and save in your PATH. Assumes `prettier` is in your `devDependencies` already
BASE=$(git merge-base master HEAD) # change master to whatever your trunk branch is
FILES=$(git diff --name-only $BASE HEAD | xargs)

npx prettier --list-different $FILES

# Want eslint too?
# npx eslint --ignore-path=.prettierignore $FILES

yo uso este paquete bastante rápido

agregar agregar un script en mi package.json

"pretty-quick": "pretty-quick" 

por debajo scripts {}

Entonces en mi pre-commit gancho debajo .husky/pre-commit

añado

npm run pretty-quick

Los documentos más bonitos tienen un sección en este.

Yo uso bastante rápido

npx husky-init
npm install --save-dev pretty-quick
npx husky set .husky/pre-commit "npx pretty-quick --staged"

¿Ha sido útil esta solución?