DevTools
Support us

Cheatsheet Prettier

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

Back to languages
Prettier
19 cards found
Categories:
Versions:

CLI

3 cards
Format Files 
npx prettier --write "src/**/*.js"
npx prettier --write .
npx prettier --check "src/**"
npx prettier --write "*.css"

Format or check.

Useful Flags 
--write      # format in-place
--check     # check only (CI)
--list-different # list different files
--ignore-path .gitignore
--config .prettierrc

CLI options.

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

Formatting scripts.

Settings

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

Configuration file.

Config Formats 
.prettierrc         (JSON)
.prettierrc.json
.prettierrc.yml
.prettierrc.js
prettier.config.js
"prettier": {} in package.json

Accepted formats.

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

Exclude files.

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

Rules per file type.

Editors

3 cards
VS Code 
Extension: esbenp.prettier-vscode

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

Format on save in VS Code.

Format on Save 
// Per language:
"[javascript]": {
  "editor.defaultFormatter":
    "esbenp.prettier-vscode"
},
"[json]": {
  "editor.formatOnSave": true
}

Per-language config.

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

Integration with other editors.

Options

3 cards
Main Options 
printWidth: 80     # max width
tabWidth: 2       # indentation
useTabs: false    # tabs vs spaces
semi: true        # semicolons
singleQuote: false # single quotes
quoteProps: "the-needed"

Formatting options.

Advanced Options 
trailingComma: "all"  # trailing comma
bracketSpacing: true  # { a: 1 }
arrowParens: "always"  # (x) =>
endOfLine: "lf"
jsxSingleQuote: false
proseWrap: "preserve"

Additional options.

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

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

Skip formatting locally.

Integration

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

// .eslintrc.js
extends: [
  "eslint:recommended",
  "prettier"  // turns off conflicts
]

Avoid ESLint/Prettier conflicts.

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

Format before committing.

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

# Fails if there are
# unformatted files

Verify in CI/CD.

Languages

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

Supported languages.

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

Extend with plugins.

Before/After Example 
// Before:
const x={a:1,b:2,c:[1,2,3,4,5,6,7,8,9,10,11,12]}

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

Formatting result.