DevTools
Ajude-nos

Cheatsheet Prettier

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

Voltar às linguagens
Prettier
19 cards encontrados
Categorias:
Versões:

CLI

3 cards
Formatar ficheiros 
npx prettier --write "src/**/*.js"
npx prettier --write .
npx prettier --check "src/**"
npx prettier --write "*.css"

Formatar ou verificar.

Flags úteis 
--write      # formatar in-place
--check     # só verificar (CI)
--list-different # listar diferentes
--ignore-path .gitignore
--config .prettierrc

Opções de CLI.

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

Scripts de formatação.

Configuração

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

Ficheiro de configuração.

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

Formatos aceites.

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

Excluir ficheiros.

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

Regras por tipo de ficheiro.

Editores

3 cards
VS Code 
Extensão: esbenp.prettier-vscode

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

Format on save no VS Code.

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

Config por linguagem.

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

Integração noutros editores.

Opções

3 cards
Opções principais 
printWidth: 80     # largura máx
tabWidth: 2       # indentação
useTabs: false    # tabs vs spaces
semi: true        # ponto e vírgula
singleQuote: false # aspas simples
quoteProps: "as-needed"

Opções de formatação.

Opções avançadas 
trailingComma: "all"  # vírgula final
bracketSpacing: true  # { a: 1 }
arrowParens: "always"  # (x) =>
endOfLine: "lf"
jsxSingleQuote: false
proseWrap: "preserve"

Opções adicionais.

Comentários especiais 
// prettier-ignore
const x = {a:1,b:2};

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

Ignorar formatação pontual.

Integração

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

// .eslintrc.js
extends: [
  "eslint:recommended",
  "prettier"  // desliga conflitos
]

Evitar conflitos 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

Formatar antes de commit.

CI (verificação) 
# GitHub Actions
- name: Check formatting
  run: npx prettier --check .

# Falha se houver ficheiros
# não formatados

Verificar em CI/CD.

Linguagens

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

Linguagens suportadas.

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

Estender com plugins.

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

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

Resultado da formatação.