mikaela.github.io/n/prettier.md

5.9 KiB
Raw Permalink Blame History

{{ page.excerpt }}

Automaattinen sisällysluettelo / Automatically generated Table of Contents

The packages

Installation

  1. corepack pnpm install -D -E prettier@latest prettier-plugin-nginx@latest @prettier/plugin-ruby@latest prettier-plugin-toml@latest @prettier/plugin-xml@latest prettier-plugin-sh@latest or probably just corepack pnpm install -D if its not your project.
  2. If they dont exist already echo "{}" > .prettierrc && touch .prettierignore
  3. corepack pnpm exec prettier . --write or corepack pnpm exec prettier . --check

Configuration

I do with .editorconfig what I can, but for example my template .prettierrc.json looks like this. I use pre-commits pretty-format-json, while the one included on this page gets managed by prettier.

{
  "bracketSameLine": true,
  "endOfLine": "auto",
  "insertPragma": true,
  "overrides": [
    {
      "files": ".prettierrc",
      "options": {
        "parser": "json"
      }
    },
    {
      "files": "conf/librewolf.overrides.cfg",
      "options": {
        "parser": "babel"
      }
    },
    {
      "files": "conf/autoconfig.js.online",
      "options": {
        "parser": "babel"
      }
    }
  ],
  "plugins": [
    "@prettier/plugin-ruby",
    "@prettier/plugin-xml",
    "prettier-plugin-nginx",
    "prettier-plugin-sh",
    "prettier-plugin-toml"
  ],
  "proseWrap": "always",
  "quoteProps": "consistent",
  "requirePragma": false,
  "singleAttributePerLine": true
}

See the documentation linked on the bottom, but here are some explanations anyway:

  • bracketSameLine: true - HTML tags closing on the same line as something else just looks so much better for my eyes.
  • endOfLine: auto - The default is lf line-endings, which I support in general, but I think prettier is the wrong place to configure it. I have it in .gitattributes which will take priority on check-in and .editorconfig.
  • insertPragma: true - adds a comment on files formatted
  • overrides and plugins - self-explanatory, but if not see the documentation (bottom of the page). I know I dont actually have .prettierrc as its .prettierrc.json, but it doesnt seem to hurt and babel seems to be used for JavaScript by default, which those two are regardless of the name.
  • proseWrap: always - wraps long markdown lines as individual newlines dont matter (two begin a new paragraph).
  • quoteProps: consistent - quotes things if anything is quoted.
  • requirePragma: false - the other side of insertPragma: true, its here as a note to self.
  • singleAttributePerLine: true - I just think it looks better.

.pre-commit-config.yaml

This is the file that controls pre-commits behaviour.

Offline

I accidentally wrote this while updating this page to reflect me using prettier outside of pre-commit too nowadays. This has the advantage that the same local environment gets reused and dependencies are managed centrally, but assumes everyone uses pnpm, wont work in pre-commit ci and may have other issues I am not thinking of as a not-coder myself.

ci:
  skip: [pnpm-install-dev, prettier]

repos:
  - repo: local
    hooks:
      - id: pnpm-install-dev
        name: Install pnpm dev dependencies
        entry: corepack pnpm install -D
        language: system
        always_run: true
        #verbose: true
        pass_filenames: false
      - id: prettier
        name: prettier
        entry: corepack pnpm exec prettier --cache --ignore-unknown --write
        language: system
        # Better handled by pretty-format-json from pre-commit-hooks.
        # Remember to have *.json in .prettierignore!
        #exclude_types: [json]

Further information