@tcd-devkit/prettier-config-react v0.1.1
@tcd-devkit/prettier-config-react
Shareable Prettier configuration for React projects within the @tcd-devkit ecosystem, with added support for Tailwind CSS.
This package extends the base @tcd-devkit/prettier-config
and comes pre-configured with the following Prettier plugins:
prettier-plugin-tailwindcss
for automatically sorting Tailwind CSS classes
Features
- Inherits Base Configuration: Includes all formatting rules and plugins from
@tcd-devkit/prettier-config
(import sorting,package.json
formatting, TOML formatting). - Tailwind CSS Support: Automatically sorts Tailwind CSS utility classes, improving readability and consistency in your JSX/TSX components.
- React Focused: Optimized for projects using React, JSX, and TSX.
Installation
# Using npm
npm install -D @tcd-devkit/prettier-config-react prettier
# Using yarn
yarn add -D @tcd-devkit/prettier-config-react prettier
# Using pnpm
pnpm add -D @tcd-devkit/prettier-config-react prettier
The base configuration (@tcd-devkit/prettier-config
) and the Tailwind CSS plugin (prettier-plugin-tailwindcss
) are direct dependencies of this package and will be installed automatically.
Usage
To use this Prettier configuration, reference it in your package.json
:
{
"name": "your-project",
"version": "1.0.0",
"prettier": "@tcd-devkit/prettier-config-react"
}
Alternatively, you can create a Prettier configuration file (e.g., .prettierrc.js
, .prettierrc.json
, prettier.config.js
) and extend this configuration:
.prettierrc.js
(or prettier.config.js
)
This package exports both CommonJS (CJS) and ES Module (ESM) formats. Choose the appropriate example based on your project's module system:
Note: You can also use
prettier.config.cjs
to force CommonJS format even in projects with"type": "module"
in package.json.
For CommonJS (.js
files without "type": "module"
in package.json):
const prettierConfigReact = require('@tcd-devkit/prettier-config-react');
module.exports = {
...prettierConfigReact,
// Your custom overrides can be added here
// For example, if you have custom Tailwind settings:
// tailwindConfig: './tailwind.config.js',
};
For ES Modules (.mjs
files or .js
files with "type": "module"
in package.json):
import prettierConfigReact from '@tcd-devkit/prettier-config-react';
export default {
...prettierConfigReact,
// Your custom overrides can be added here
// For example, if you have custom Tailwind settings:
// tailwindConfig: './tailwind.config.js',
};
.prettierrc.json
"@tcd-devkit/prettier-config-react"
Refer to the Prettier documentation for more ways to configure Prettier and the prettier-plugin-tailwindcss
documentation for specific plugin options.
Overriding Configuration
You can override specific rules from this preset or the base preset in your project's Prettier configuration file as shown in the .prettierrc.js
example above.
License
MIT © Nace Logar