@faktion-com/prettier-config

A shared Prettier configuration package for Faktion projects. This package provides consistent code formatting rules across all Faktion repositories and projects.

Features

• Consistent formatting: Ensures all code follows the same formatting standards
• Tailwind CSS support: Includes prettier-plugin-tailwindcss for optimal Tailwind class sorting
• Modern defaults: Configured with sensible defaults for modern JavaScript/TypeScript development
• Easy integration: Simple setup process for any project

Installation

Install the package as a dev dependency:

npm install --save-dev @faktion-com/prettier-config
# or
yarn add --dev @faktion-com/prettier-config
# or
pnpm add --save-dev @faktion-com/prettier-config

Usage

Basic Setup

Create a .prettierrc.js file in your project root:

module.exports = require("@faktion-com/prettier-config/base");

Or if you're using ES modules, create a .prettierrc.mjs:

import baseConfig from "@faktion-com/prettier-config/base";
export default baseConfig;

Tailwind css specific Setup

For projects with custom tailwind config, you need to add a property to the config pointing to your tailwind. config.js file so that when you add custom classes, they also get ordered by the tailwind pluging

import reactConfig from "@faktion-com/prettier-config/react";
export default {
    ...reactConfig,
    "tailwindConfig": "./apps/frontend/tailwind.config.js"
} as const

Package.json Configuration

Alternatively, you can add the configuration directly to your package.json:

{
  "prettier": "@faktion-com/prettier-config/base"
}

Configuration

The base configuration includes the following settings:

• Trailing comma: ES5 style
• Tab width: 2 spaces
• Semicolons: Always
• Quotes: Single quotes
• JSX quotes: Single quotes
• Tabs: Spaces only
• Print width: 80 characters
• Bracket spacing: Enabled
• Bracket same line: Enabled
• Arrow function parentheses: Always
• Single attribute per line: Enabled
• End of line: LF (Unix style)
• Plugins: Tailwind CSS plugin included

IDE Integration

VS Code

1. Install the Prettier extension
2. Set Prettier as the default formatter
3. Enable format on save (optional)

Add to your VS Code settings:

{
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnSave": true
}

Other Editors

Most modern editors support Prettier configuration files automatically. The configuration will be picked up when you have a .prettierrc.js or package.json configuration in your project.

Scripts

Add these scripts to your package.json for convenient formatting:

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

Ignoring Files

Create a .prettierignore file to exclude files from formatting:

node_modules
dist
build