DevTools
Ayúdanos

Cheatsheet Prettier

Formatador de código opinativo para JavaScript, CSS e mais

Volver a los lenguajes
Prettier
19 tarjetas encontradas
Categorías:
Versiones:

CLI

3 cards
Formatear archivos 
npx prettier --write "src/**/*.js"
npx prettier --write .
npx prettier --check "src/**"
npx prettier --write "*.css"

Formatear o verificar.

Flags útiles 
--write      # formatear in-place
--check     # solo verificar (CI)
--list-different # listar diferentes
--ignore-path .gitignore
--config .prettierrc

Opciones de CLI.

Scripts npm 
"scripts": {
  "format": "prettier --write .",
  "format:check": "prettier --check .",
  "format:src": "prettier --write src/"
}

Scripts de formateo.

Configuração

4 cards
.prettierrc 
{
  "semi": true,
  "singleQuote": true,
  "tabWidth": 2,
  "trailingComma": "es5",
  "printWidth": 80,
  "bracketSpacing": true
}

Archivo de configuración.

Formatos de config 
.prettierrc         (JSON)
.prettierrc.json
.prettierrc.yml
.prettierrc.js
prettier.config.js
"prettier": {} en package.json

Formatos aceptados.

.prettierignore 
node_modules
dist
build
coverage
package-lock.json
*.min.js

Excluir archivos.

Overrides 
{
  "overrides": [
    {
      "files": "*.md",
      "options": { "proseWrap": "always" }
    },
    {
      "files": "*.css",
      "options": { "singleQuote": false }
    }
  ]
}

Reglas por tipo de archivo.

Editores

3 cards
VS Code 
Extensión: esbenp.prettier-vscode

settings.json:
"editor.defaultFormatter":
  "esbenp.prettier-vscode",
"editor.formatOnSave": true,
"prettier.requireConfig": true

Format on save en VS Code.

Format on save 
// Por lenguaje:
"[javascript]": {
  "editor.defaultFormatter":
    "esbenp.prettier-vscode"
},
"[json]": {
  "editor.formatOnSave": true
}

Config por lenguaje.

Otros editores 
WebStorm: Settings → Prettier
Vim: prettier --write %:p
Neovim: null-ls / conform.nvim
Sublime: JsPrettier package

Integración en otros editores.

Opções

3 cards
Opciones principales 
printWidth: 80     # ancho máx
tabWidth: 2       # indentación
useTabs: false    # tabs vs spaces
semi: true        # punto y coma
singleQuote: false # comillas simples
quoteProps: "as-needed"

Opciones de formateo.

Opciones avanzadas 
trailingComma: "all"  # coma final
bracketSpacing: true  # { a: 1 }
arrowParens: "always"  # (x) =>
endOfLine: "lf"
jsxSingleQuote: false
proseWrap: "preserve"

Opciones adicionales.

Comentarios especiales 
// prettier-ignore
const x = {a:1,b:2};

/* prettier-ignore */
.foo { display: flex; }

Ignorar formateo puntual.

Integração

3 cards
Prettier + ESLint 
npm i -D eslint-config-prettier

// .eslintrc.js
extends: [
  "eslint:recommended",
  "prettier"  // desactiva conflictos
]

Evitar conflictos ESLint/Prettier.

Git hooks (lint-staged) 
npm i -D lint-staged husky

// package.json
"lint-staged": {
  "*.{js,css,md}": "prettier --write"
}

// .husky/pre-commit
npx lint-staged

Formatear antes del commit.

CI (verificación) 
# GitHub Actions
- name: Check formatting
  run: npx prettier --check .

# Falla si hay archivos
# sin formatear

Verificar en CI/CD.

Linguagens

3 cards
Formatos soportados 
JavaScript / TypeScript / JSX
CSS / SCSS / Less
HTML / Vue / Angular
JSON / YAML / TOML
Markdown / GraphQL
Flow

Lenguajes soportados.

Plugins 
prettier-plugin-tailwindcss
prettier-plugin-organize-imports
prettier-plugin-sort-json
prettier-plugin-java
prettier-plugin-php
@prettier/plugin-xml

Extender con plugins.

Ejemplo antes/después 
// Antes:
const x={a:1,b:2,c:[1,2,3,4,5,6,7,8,9,10,11,12]}

// Después (Prettier):
const x = {
  a: 1,
  b: 2,
  c: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
};

Resultado del formateo.