@szum-tech/prettier-config NPM

📚 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

🎯 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/.ts/.mts/.cts
A prettier.config.(js|cjs|mjs|ts|cts|mts) 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.mts file:

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

Configurations also could be used to extends:

import { type Config } from "prettier";
import szumTechPrettierConfig from "@szum-tech/prettier-config";

export default {
  ...szumTechPrettierConfig,
  semi: false
} satisfies Config;

Via prettier.config.mjs file:

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

Configurations also could be used to extends:

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

/**
 * @type {import("prettier").Config}
 */
export default {
  ...szumTechPrettierConfig,
  semi: false
};

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