@tofrankie/prettier

Shared Prettier configuration.

[!IMPORTANT] Before 1.0.0, releases may include breaking changes. Read the CHANGELOG before upgrading.

Quick Start

Install dependencies:

$ pnpm add prettier @tofrankie/prettier -D

ESM (prettier.config.mjs):

export default '@tofrankie/prettier'

CJS (prettier.config.cjs):

module.exports = require('@tofrankie/prettier').default

Base options:

{
  "printWidth": 120,
  "semi": false,
  "singleQuote": true,
  "arrowParens": "avoid",
  "trailingComma": "es5",
  "htmlWhitespaceSensitivity": "css"
}

Attribute Order

Attribute ordering is handled by prettier-plugin-organize-attributes.

Use overrides for HTML, Vue, WXML, or WeChat SVG files:

HTML

HTML preset with attribute ordering. Details

import { base, html } from '@tofrankie/prettier'

export default {
  ...base,
  overrides: [
    {
      files: ['*.html'],
      options: html,
    },
  ],
}

Vue

Vue preset with attribute ordering. Details

import { base, vue } from '@tofrankie/prettier'

export default {
  ...base,
  overrides: [
    {
      files: ['*.vue'],
      options: vue,
    },
  ],
}

WXML

WXML preset with attribute ordering. Details

WXML parsing is powered by @tofrankie/prettier-plugin-wxml.

import { base, wxml } from '@tofrankie/prettier'

export default {
  ...base,
  overrides: [
    {
      files: ['*.wxml'],
      options: wxml,
    },
  ],
}

If you don't need attribute ordering, import wxml-base:

import { base, wxmlBase } from '@tofrankie/prettier'

export default {
  ...base,
  overrides: [
    {
      files: ['*.wxml'],
      options: wxmlBase,
    },
  ],
}

WeChat SVG

WeChat SVG preset with attribute ordering. Details

import { base, wechatSvg } from '@tofrankie/prettier'

export default {
  ...base,
  overrides: [
    {
      files: ['path/to/your/wechat-svg/*.html'],
      options: wechatSvg,
    },
  ],
}

Acknowledgements

Thanks to these referenced packages:

• @tofrankie/prettier-plugin-wxml
• prettier-plugin-organize-attributes