Prettier Configuration

Detailed guide for configuring Prettier with JS Style Kit

Overview

JS Style Kit provides a comprehensive Prettier configuration with support for various plugins, including:

• CSS order sorting
• JSON sorting
• Package.json sorting
• Tailwind CSS formatting

Basic Setup

Create a .prettierrc.js file in your project root:

import { prettierConfig } from "js-style-kit";

export default prettierConfig();

If your project doesn’t use ESM, create a .prettierrc.mjs file instead:

import { prettierConfig } from "js-style-kit";

export default prettierConfig();

Add the formatting scripts to your package.json:

{
  "scripts": {
    "format": "prettier --check .",
    "format:fix": "prettier --write ."
  }
}

Configuration Options

The prettierConfig() function accepts a configuration object with the following options:

import { prettierConfig } from "js-style-kit";

export default prettierConfig({
  // Plugin options with their default values
  cssOrderPlugin: true, // Enable CSS order sorting
  jsonSortPlugin: true, // Enable JSON sorting
  packageJsonPlugin: true, // Enable package.json sorting
  tailwindPlugin: false, // Enable Tailwind CSS support

  // Standard Prettier options can also be included
  printWidth: 80,
  tabWidth: 2,
  semi: true,
  singleQuote: false,
  // ...etc
});

Plugin Options

CSS Order Plugin

The CSS Order plugin (prettier-plugin-css-order) sorts CSS properties in a consistent order. It’s enabled by default.

To disable it:

export default prettierConfig({
  cssOrderPlugin: false,
});

JSON Sort Plugin

The JSON Sort plugin (prettier-plugin-sort-json) sorts JSON properties alphabetically. It’s enabled by default.

Basic configuration:

// Enable with default settings (recursive sorting)
jsonSortPlugin: true

// Disable JSON sorting
jsonSortPlugin: false

// Custom configuration
jsonSortPlugin: {
  jsonRecursiveSort: true,
  jsonSortOrder: ["name", "version", "description", "*"]
}

Package.json Plugin

The Package.json plugin (prettier-plugin-packagejson) sorts package.json fields according to a standard convention. It’s enabled by default.

To disable it:

export default prettierConfig({
  packageJsonPlugin: false,
});

Tailwind Plugin

The Tailwind plugin (prettier-plugin-tailwindcss) sorts Tailwind CSS classes according to Tailwind’s recommended order. It’s disabled by default.

Enable with default settings:

export default prettierConfig({
  tailwindPlugin: true,
});

This will apply to the standard tailwind functions (clsx, cva, cn).

Add custom tailwind functions:

export default prettierConfig({
  tailwindPlugin: ["myCustomFunction", "anotherFunction"],
});

Advanced configuration:

export default prettierConfig({
  tailwindPlugin: {
    tailwindFunctions: ["clsx", "cva", "cn", "myCustomFunction"],
    tailwindAttributes: ["className", "class", "myAttr"],
  },
});

Automatic Plugin Patching

When enabling the Tailwind plugin, JS Style Kit automatically patches the declaration file of prettier-plugin-tailwindcss to remove an unsafe declare module statement that can cause conflicts with other Prettier plugins. This happens automatically when the Tailwind plugin is enabled, so you don’t need to worry about manual fixes or compatibility issues.

The patch addresses a known issue where the Tailwind plugin’s TypeScript declarations include a global module declaration that can conflict with other Prettier plugins, leading to type errors or plugin compatibility problems.

Extending Standard Prettier Options

You can include any standard Prettier configuration option along with the plugin options:

export default prettierConfig({
  // Plugin options
  tailwindPlugin: true,

  // Standard Prettier options
  printWidth: 100,
  tabWidth: 2,
  useTabs: false,
  semi: true,
  singleQuote: true,
  quoteProps: "as-needed",
  jsxSingleQuote: false,
  trailingComma: "es5",
  bracketSpacing: true,
  bracketSameLine: false,
  arrowParens: "always",
  experimentalTernaries: true,
});

Note that experimentalTernaries is enabled by default in JS Style Kit’s Prettier configuration.

Integrating with VSCode

To integrate with Visual Studio Code, install the Prettier - Code formatter extension, and configure it to use your project’s Prettier configuration.

Add the following to your .vscode/settings.json file:

{
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnSave": true,
  "prettier.requireConfig": true
}

This will ensure VSCode uses your project’s Prettier configuration when formatting files.