@szum-tech/prettier-config

Prettier shareable configuration.

Creating a Prettier configuration should be easier.
@szum-tech/prettier-config provides a ready-to-use Prettier configuration that will fit your project.

---

📚 Features

• Opinionated code formatter with support for: JavaScript, Typescript, JSX, ...
• Sort the keys of a package.json file
• Automatically sorts classes for Tailwind CSS v3.0+ based on recommended class order. This feature is OPTIONAL - is automatically enabled if tailwindcss package is used in project

📖 Table of Contents

• 📚 Features
• 📖 Table of Contents
• 🎯 Getting Started
  • ⚙️ Installation
  • Configuration
• 💻 Scripts
• 🚀 Minimal GitHub Prettier check workflow
• 🛠️ Developer Info
  • Dependencies
• 📓 Changelog
• 📜 License

🎯 Getting Started

⚙️ Installation

@szum-tech/prettier-config is available as npm package.

# NPM
npm install --save-dev prettier @szum-tech/prettier-config

# YARN
yarn add -D prettier @szum-tech/prettier-config

# PNPM
pnpm add --save-dev prettier @szum-tech/prettier-config

# BUN
bun add --dev prettier @szum-tech/prettier-config

Configuration

Full documentation on how to create a Prettier configuration can be found in Prettier docs.

Configuration could be set via either:

• A .prettierrc file, written in YAML or JSON, with optional extensions: .yaml/.yml/.json/.json5/.js/.cjs/.mjs
• A prettier.config.(js|cjs|.mjs) file that exports an object
• A prettier key in the project's package.json file

The following examples show how to integrate predefined configuration in project:

• Via prettier.config.mjs file:

export { default } from "@szum-tech/prettier-config";

Configurations also could be used to extends:

export szumTechPrettierConfig from "@szum-tech/prettier-config";

/**
 * @type {import("prettier").Config}
 */
const config = {
  ...szumTechPrettierConfig,
  semi: false
};

export default config;

• Via prettier.config.cjs file:

module.exports = require("@szum-tech/prettier-config");

OR extend configuration:

const szumTechPrettierConfig = require("@szum-tech/prettier-config");

/**
 * @type {import("prettier").Config}
 */
module.exports = {
  ...szumTechPrettierConfig,
  semi: false
};

• Via prettier key in the project's package.json file:

{
  "prettier": "@szum-tech/prettier-config"
}

• Via .prettierrc file:

"@szum-tech/prettier-config"

Tip

You can ignore files by adding it to .prettierignore.

💻 Scripts

Suggested scripts you can add to package.json file:

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

🚀 Minimal GitHub Prettier check workflow

Here are the minimal steps required to run an Prettier check. Creating or adding any content to a PR will trigger this event. This action validate the code and return its results.

name: PR Checks ✅

on:
  pull_request:

env:
  NODE_VERSION: 22.x
  
jobs:
  prettier:
    name: Prettier 🧹
    runs-on: ubuntu-latest
    steps:
      - name: Checkout code 📚
        uses: actions/checkout@v4
      - name: Set up Node 🟢
        uses: actions/setup-node@v4
        with:
          node-version: ${{ env.NODE_VERSION }}
          cache: "npm"
      - name: Install packages ⚙️
        run: npm ci
      - name: Prettier Check 🧹
        run: npm run prettier:check

🛠️ Developer Info

Dependencies

📓 Changelog

The changelog is regularly updated to reflect what's changed in each new release.

📜 License

This project is licensed under the terms of the MIT license.