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:
If your project doesn’t use ESM, create a .prettierrc.mjs
file instead:
Add the formatting scripts to your package.json
:
Configuration Options
The prettierConfig()
function accepts a configuration object with the following options:
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:
JSON Sort Plugin
The JSON Sort plugin (prettier-plugin-sort-json
) sorts JSON properties alphabetically. It’s enabled by default.
Basic configuration:
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:
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:
This will apply to the standard tailwind functions (clsx
, cva
, cn
).
Add custom tailwind functions:
Advanced configuration:
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:
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:
This will ensure VSCode uses your project’s Prettier configuration when formatting files.