Prettier

Prettier is an opinionated code formatter.

Installation

npm install --save-dev prettier

Configuration

Prettier uses cosmiconfig for configuration file support. A .prettierrc file written in JSON or YAML.

{
    "printWidth": 120,
    "tabWidth": 2,
    "useTabs": false,
    "semi": true,
    "singleQuote": true,
    "quoteProps": "as-needed",
    "jsxSingleQuote": false,
    "trailingComma": "es5",
    "bracketSpacing": true,
    "bracketSameLine": false,
    "jsxBracketSameLine": false,
    "arrowParens": "always",
    "requirePragma": false,
    "insertPragma": false,
    "proseWrap": "preserve",
    "htmlWhitespaceSensitivity": "css",
    "vueIndentScriptAndStyle": false,
    "endOfLine": "lf",
    "embeddedLanguageFormatting": "auto",
    "singleAttributePerLine": false
}
  

To exclude files from formatting, create a .prettierignore file in the root of your project.

# By default prettier ignores files in version control systems directories
**/.git
**/.svn
**/.hg
**/node_modules

# Ignore all HTML files:
*.html

# Ignore minify files:
*.min.css
*.min.js

# Ignore specific files:
#...

Ignoring Code

HTML

<!-- prettier-ignore -->

CSS

/* prettier-ignore */

javascript

// prettier-ignore

JSX

{/* prettier-ignore */}
  

YAML

# prettier-ignore

Integration with Git Hooks

Javascript requires the husky and lint-staged packages to be installed.

npm -g install prettier

{
    "lint-staged": {
        "*.{css, scss, less, postcss}": [
            "prettier --write"
        ],
        "*.{js, jsx, ts, tsx}": [
            "prettier --write"
        ]
    }
}
  

To use Python, you need to install the pre-commit package.

repos:
  - repo: https://github.com/pre-commit/mirrors-prettier
    rev: v2.6.2
    hooks:
      - id: prettier
        additional_dependencies: ["prettier@2.6.2"]
        language: node
        files: \.(css|scss|sass|js|jsx)$
        args: ["--write"]
  