@brlt/prettier

  pnpm add @brlt/prettier@1.8.2

An opinionated Prettier configuration to scaffold my projects. Rulesets included for Bash, JSX/TSX, React, Svelte, and Vue.

Install

This package is a shared configuration for Prettier - not a replacement for it. Make sure you install prettier too!

pnpm add -D @brlt/prettier@1.8.2 # overrides may change w/o notice. pin the version!

yarn add --dev @brlt/prettier@1.8.2

npm i -D @brlt/prettier@1.8.2

Add to package.json

diff --git a/package.json b/package.json

  "main": "index.js",
  "types": "index.d.ts",
+ "prettier": "@brlt/prettier",

.prettierrc.json

If you don’t want to use package.json, you can use any of the supported extensions to export a string. So .prettierrc.json would just contain "@brlt/prettier", or "@brlt/prettier/svelte", etc.

.prettierrc.js

The above method does not offer a way to extend the configuration to override certain properties from the shared config. To customize the properties, .prettierrc.js and merge @brlt/prettier with your options.

Example .prettierrc.js for a Vue project

module.exports = {
	...(require('@brlt/prettier/vue') || {}),
	semi: false,
	trailingComma: 'none',
};

See the Prettier Docs for more info on shared config ›

---

Using Rulesets and Overrides

Included in the package are several different rulesets that I use interchangeably depending on the project's needs.

1. @brlt/prettier - the base ruleset with no overrides.
2. @brlt/prettier/all - base + all overrides below. For islands-style projects.
3. @brlt/prettier/vue - base + Vue overrides
4. @brlt/prettier/bash - base + Bash overrides
5. @brlt/prettier/react - base + React overrides
6. @brlt/prettier/svelte - base + Svelte overrides

Base Ruleset

/** @type {PrettierConfig} */
module.exports = {
	arrowParens: 'avoid',
	bracketSpacing: false,
	bracketSameLine: true,
	embeddedLanguageFormatting: 'auto',
	htmlWhitespaceSensitivity: 'css',
	printWidth: 120,
	quoteProps: 'preserve',
	semi: true,
	singleQuote: true,
	proseWrap: 'always',
	useTabs: false,
	tabWidth: 2,
	endOfLine: 'lf',
	trailingComma: 'all',
}

TypeScript Definitions

/**
 * Opinionated shareable Prettier configuration rules.
 * @package {@brlt/prettier}
 * @version {1.8.2}
 * @license {MIT}
 * @author Nicholas Berlette <https://github.com/nberlette>
 */
declare module '@brlt/prettier' {
	declare const options: PrettierOptions;
	export = options as PrettierOptions;
}

Bash Overrides

{
   files: [
      // dotfiles - see https://github.com/nberlette/dotfiles
      '.*aliases',
      '*.bash*',
      '.{dircolors,inputrc}',
      '.{exports,extras,functions,path,prompt,profile,aliases}',
      '*.*sh',
      '.*.*sh',
      '.*shrc',
      '.*rc',
      '.env',
      '.env.*',
      // miscellaneous
      'Dockerfile',
      // files like .gitpod.Dockerfile
      '.*.Dockerfile',
      // .gitignore, .prettierignore, .vercelignore, ...
      '.*ignore'
   ],
   options: {
      plugins: ['prettier-plugin-sh'],
      tabWidth: 4,
      printWidth: 80,
      parser: 'sh',
   },
   excludeFiles: [
      '.bash_history'
   ]
}

Using @brlt/prettier/bash in package.json

diff --git base/package.json bash/package.json

-  "prettier": "@brlt/prettier",
+  "prettier": "@brlt/prettier/bash",

React Overrides

{
   files: ['*.jsx', '*.tsx', '*.mdx'],
   options: {
      // no parser override, allows JSX/TSX/MDX
      semi: false,
      jsxSingleQuote: false,
      singleAttributePerLine: true,
      bracketSameLine: true,
      vueIndentScriptAndStyle: true,
   },
}

Using @brlt/prettier/react in package.json

diff --git base/package.json react/package.json

-  "prettier": "@brlt/prettier",
+  "prettier": "@brlt/prettier/react",

Svelte Overrides

{
   files: ['*.svelte'],
   options: {
      semi: false,
      tabWidth: 2,
      printWidth: 100,
      singleQuote: false,
      trailingComma: 'es5',
      bracketSameLine: true,
      bracketSpacing: false,
      jsxSingleQuote: false,
      singleAttributePerLine: true,
      htmlWhitespaceSensitivity: 'strict',
      arrowParens: 'avoid',
      parser: 'svelte',
      plugins: ['prettier-plugin-svelte'],
      /** @see prettier-plugin-svelte */
      svelteStrictMode: true,
      svelteAllowShorthand: true,
      svelteBracketNewLine: false,
      svelteIndentScriptAndStyle: true,
      svelteSortOrder: 'scripts-options-markup-styles',
   }
}

Using @brlt/prettier/svelte in package.json

diff --git base/package.json svelte/package.json

-  "prettier": "@brlt/prettier",
+  "prettier": "@brlt/prettier/svelte",

Vue Overrides

{
   files: ['*.vue'],
   options: {
      parser: 'vue',
      trailingComma: 'all',
      semi: false,
      proseWrap: 'always',
      singleQuote: true,
      jsxSingleQuote: false,
      bracketSameLine: true,
      bracketSpacing: true,
      singleAttributePerLine: true,
      vueIndentScriptAndStyle: true,
   }
}

Using @brlt/prettier/vue in package.json

diff --git base/package.json vue/package.json

-  "prettier": "@brlt/prettier",
+  "prettier": "@brlt/prettier/vue",

---

MIT © Nicholas Berlette