@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, ...](https://prettier.io/)
- [Sort the keys of a `package.json` file](https://github.com/matzkoh/prettier-plugin-packagejson#readme)
- [Automatically sorts classes for Tailwind CSS v3.0+](https://github.com/tailwindlabs/prettier-plugin-tailwindcss#readme)
based
[on recommended class order](https://tailwindcss.com/blog/automatic-class-sorting-with-prettier#how-classes-are-sorted).
This feature is **OPTIONAL** - is automatically enabled if [tailwindcss](https://github.com/tailwindlabs/tailwindcss)
package is used in project
## ๐ Table of Contents
* [๐ Features](#-features)
* [๐ Table of Contents](#-table-of-contents)
* [๐ฏ Getting Started](#-getting-started)
* [โ๏ธ Installation](#-installation)
* [Configuration](#configuration)
* [๐ป Scripts](#-scripts)
* [๐ Minimal GitHub Prettier check workflow](#-minimal-github-prettier-check-workflow)
* [๐ ๏ธ Developer Info](#-developer-info)
* [Dependencies](#dependencies)
* [Peer Dependencies](#peer-dependencies)
* [๐ Changelog](#-changelog)
* [๐ License](#-license)
## ๐ฏ Getting Started
### โ๏ธ Installation
[@szum-tech/prettier-config](https://www.npmjs.com/package/@szum-tech/prettier-config) is available as
[npm package](https://www.npmjs.com/package/@szum-tech/prettier-config).
```shell
# 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](https://prettier.io/docs/en/configuration).
**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:
```ts
export { default } from "@szum-tech/prettier-config";
```
Configurations also could be used to extends:
```ts
import { type Config } from "prettier";
import szumTechPrettierConfig from "@szum-tech/prettier-config";
export default {
...szumTechPrettierConfig,
semi: false
} satisfies Config;
```
- Via `prettier.config.mjs` file:
```js
export { default } from "@szum-tech/prettier-config";
```
Configurations also could be used to extends:
```js
import szumTechPrettierConfig from "@szum-tech/prettier-config";
/**
* @type {import("prettier").Config}
*/
export default {
...szumTechPrettierConfig,
semi: false
};
```
- Via `prettier.config.cjs` file:
```js
module.exports = require("@szum-tech/prettier-config");
```
OR extend configuration:
```js
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:
```json
{
"prettier": "@szum-tech/prettier-config"
}
```
- Via `.prettierrc` file:
```json
"@szum-tech/prettier-config"
```
> [!TIP]
> You can ignore files by adding it to `.prettierignore`.
## ๐ป Scripts
Suggested scripts you can add to `package.json` file:
```json
{
"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.
```yaml
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
### Peer Dependencies
## ๐ Changelog
The [changelog](https://github.com/JanSzewczyk/prettier-config/blob/main/CHANGELOG.md) is regularly updated to reflect
what's changed in each new release.
## ๐ License
This project is licensed under the terms of the
[MIT license](https://github.com/JanSzewczyk/prettier-config/blob/main/LICENCE).
