@harshalkatakiya/prettier-config

v1.0.29

Published

18 days ago

Harshal Katakiya's Prettier config

🎨 @harshalkatakiya/prettier-config

A shareable Prettier configuration by Harshal Katakiya, with built-in support for Tailwind CSS and a simple CLI setup command to quickly integrate Prettier into your projects.

📑 Table of Contents

📖 Introduction

@harshalkatakiya/prettier-config is a shareable Prettier configuration designed to provide consistent code formatting across projects.

✅ Opinionated rules for clean, readable, and maintainable code.
🌀 Built-in Tailwind CSS support via prettier-plugin-tailwindcss.
⚡ Easy CLI setup – installs dependencies, creates configs, and updates package.json. 📜 Prettier scripts for easy formatting and validation.

Whether you’re starting a new project or integrating Prettier into an existing one, this package streamlines your setup process.

🌟 Features

✔ Pre-configured Prettier Rules – Opinionated defaults for better readability.
🎨 Tailwind CSS Support – Formats Tailwind classes with prettier-plugin-tailwindcss.
⚡ Automatic Setup – One command sets up everything in seconds.
📂 Project Type Detection – Generates prettier.config.ts (TypeScript) or prettier.config.js (JavaScript).
🛠 Customizable – Extend or override the base configuration.
🚀 Modern & Up-to-Date – Works with the latest Prettier and Tailwind CSS versions.

🚀 Installation & Usage

⚡ Automatic CLI Setup

The simplest way to set up Prettier with this configuration is to use the CLI command. Run the following in your project root:

npx @harshalkatakiya/prettier-config add

✅ Prompts for Tailwind CSS support and applies the appropriate configuration.
🔄 Installs dependencies (prettier, @harshalkatakiya/prettier-config, and prettier-plugin-tailwindcss if needed).
📂 Generates configuration files (prettier.config.js and .prettierignore).
📜 Updates package.json scripts to include prettier commands.

After setup:
Check your generated prettier.config.js. Update paths if needed.

🔧 Manual Setup

If you prefer manual installation, follow these steps:

1️⃣ Install Dependencies

npm install --save-dev prettier @harshalkatakiya/prettier-config prettier-plugin-tailwindcss

2️⃣ Create Configuration File

Without Tailwind CSS:

import baseConfig from '@harshalkatakiya/prettier-config';

export default { ...baseConfig };

With Tailwind CSS (v3):

import baseConfig from '@harshalkatakiya/prettier-config';

export default {
  ...baseConfig,
  plugins: ['prettier-plugin-tailwindcss'],
  tailwindConfig: './tailwind.config.js',
  tailwindFunctions: ['cn']
};

With Tailwind CSS (v4):

import baseConfig from '@harshalkatakiya/prettier-config';

export default {
  ...baseConfig,
  plugins: ['prettier-plugin-tailwindcss'],
  tailwindStylesheet: './src/app/globals.css', // update this path yo your main CSS file
  tailwindFunctions: ['cn']
};

3️⃣ Create a `.prettierignore` File

node_modules
dist
build

4️⃣ Update `package.json` Scripts

{
  "scripts": {
    "prettier:check": "prettier -c .",
    "prettier": "prettier -w -u ."
  }
}

📜 Scripts

The following scripts are added to your package.json:

| Command | Description | | ------------------------ | --------------------------------- | | npm run prettier | Formats all files in the project. | | npm run prettier:check | Checks for unformatted code. |

⚙️ Configuration Options

This package comes with the following Prettier rules pre-configured:

| Option | Value | Description | | ---------------------------- | ----------- | ----------------------------------------------------------- | | experimentalTernaries | true | Enables experimental ternary formatting. | | printWidth | 80 | The maximum line width. | | tabWidth | 2 | Number of spaces per indentation level. | | useTabs | false | Use spaces for indentation. | | semi | true | Add semicolons at the end of statements. | | singleQuote | true | Use single quotes instead of double quotes. | | quoteProps | as-needed | Quote object properties only when required. | | jsxSingleQuote | true | Use single quotes in JSX. | | trailingComma | none | Do not add trailing commas. | | bracketSpacing | true | Add spaces between brackets in object literals. | | bracketSameLine | true | Keep the closing bracket of a JSX element on the same line. | | arrowParens | always | Always include parentheses in arrow functions. | | singleAttributePerLine | false | Allow multiple attributes on a single line. | | embeddedLanguageFormatting | auto | Automatically format embedded languages. |

Tailwind-specific settings (if enabled):

Tailwind CSS v3:

plugins: ["prettier-plugin-tailwindcss"],
tailwindConfig: "./tailwind.config.js",
tailwindFunctions: ["cn"]

Tailwind CSS v4:

plugins: ["prettier-plugin-tailwindcss"],
tailwindStylesheet: "./src/app/globals.css", // update this path yo your main CSS file
tailwindFunctions: ["cn"]

🤝 Contributing

💡 Want to contribute? Open an issue or submit a PR on the GitHub repository.

How to Contribute

1️⃣ Fork the repository.
2️⃣ Create a new branch for your feature or fix.
3️⃣ Commit your changes with a descriptive message.
4️⃣ Open a pull request and describe your changes.

📄 License

This package is licensed under the MIT License.

👤 Author