Prettier configuration

Tailored for accessibility and readability purposes, which for some part is inherited from this reddit post.

Installation

npm install --save-dev @aureldvx/prettier
# or
yarn add --dev @aureldvx/prettier
# or
pnpm install --save-dev @aureldvx/prettier

Usage

To use the configuration, add the following to your prettier.config.js file:

import { defineConfig } from "@aureldvx/prettier";

export default defineConfig();

Built-in plugins

prettier-plugin-packagejson (documentation)

Format the package.json file in a more readable way, using sort-package-json under the hood. It is enabled by default and cannot be disabled.

prettier-plugin-astro (documentation)

Format all .astro files. You can customize the configuration more granularly :

import { defineConfig } from "@aureldvx/prettier";

// Enable the default astro config
export default defineConfig({
  astro: true,
});

// Or override it with your own
export default defineConfig({
  astro: {
    allowShorthand: true,
    skipFrontmatter: false,
  },
});

@prettier/plugin-xml (documentation)

Format XML files, uses primarly to format SVGs in your project. You can customize the configuration more granularly :

import { defineConfig } from "@aureldvx/prettier";

// Enable the default xml config
export default defineConfig({
  xml: true,
});

// Or override it with your own
export default defineConfig({
  xml: {
    bracketSameLine: false,
    printWidth: 80,
    singleAttributePerLine: false,
    tabWidth: 2,
    quoteAttributes: 'double',
    selfClosingSpace: true,
    sortAttributesByKey: true,
    whitespaceSensitivity: 'ignore',
  },
});

prettier-plugin-tailwindcss (documentation)

Reorder tailwindcss classes wherever they are referenced based on the recommended order from tailwind team.

import { defineConfig } from "@aureldvx/prettier";

// With Tailwind v4
export default defineConfig({
  tailwind: {
    // Required: specify the css entrypoint file.
    tailwindStylesheet: 'src/index.css',
    // All other ones are optional.
    tailwindAttributes: ['class', 'className'],
    tailwindFunctions: ['clsx', 'cva', 'cx', 'tw', 'twMerge', 'cw'],
    tailwindPreserveWhitespace: false,
    tailwindPreserveDuplicates: false,
  },
});

// With Tailwind v3
export default defineConfig({
  tailwind: {
    // If not specified, it will find a `tailwind.config.js`
    // in the same directory as the prettier config file.
    tailwindConfig: 'tailwind.config.js',
    tailwindAttributes: ['class', 'className'],
    tailwindFunctions: ['clsx', 'cva', 'cx', 'tw', 'twMerge', 'cw'],
    tailwindPreserveWhitespace: false,
    tailwindPreserveDuplicates: false,
  },
});

Extend configuration with your own settings

To edit the provided configuration, simply add the extends key in the definedConfig object parameter.

import {defineConfig} from "@aureldvx/prettier";

export default defineConfig({
  extends: {
    // Your additional configuration here
  },
});