@akqa-denmark/prettier

AKQA Denmark's shared Prettier configuration with optional Tailwind CSS support.

Installation

npm install --save-dev @akqa-denmark/prettier prettier

If you're using Tailwind CSS, you'll also need to install prettier-plugin-tailwindcss:

npm install --save-dev prettier-plugin-tailwindcss

Usage

Create a prettier configuration file in your project root, or workspace root. If your project is configured as a CommonJS project (no "type": "module" in package.json), you'll need to use the .mjs file extension.

If your project is configured as an ESM project (with "type": "module" in package.json), you'll need to use the .js file extension.

// prettier.config.(m)js
import { config } from "@akqa-denmark/prettier";

export default config;

Tailwind CSS Support

The configuration automatically detects if Tailwind CSS is installed and:

• Enables the Tailwind plugin
• Configures class name attributes (class, className, ngClass, custom *ClassName)
• Sets up class sorting for utility functions (clsx, cn)

Running Prettier

Via NPM Scripts

Add this scripts to your package.json:

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

With lint-staged

In package.json:

{
    "lint-staged": {
        "**/*.{js,jsx,ts,tsx,md,json,yml}": "prettier --write"
    }
}

Or in lint-staged.config.js:

const config = {
    "**/*.{js,jsx,ts,tsx,md,json,yml}": ["npm run format"],
};

export default config;

Ignoring Files

By default, Prettier respects your .gitignore. For additional Prettier-specific ignores, create a .prettierignore:

# Build output
dist/
build/

# Generated files
*.generated.*

# Coverage reports
coverage/

Editor Integration

We recommend setting up your editor to format on save.

VS Code / Cursor

1. Install the Prettier extension
2. Add to settings.json:

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

JetBrains IDEs

1. Open Settings
2. Search for "Prettier"
3. Enable "Format on Save"

Testing Package Updates Locally

1. From the repository root, run your usual build step (if any) so the package output reflects the latest changes.
2. cd packages/prettier-config-akqa-denmark and run npm pack. This creates a tarball (for example akqa-denmark-prettier-0.0.0.tgz) with exactly the files npm will publish.
3. In a separate test project, install the tarball with npm install --save-dev /absolute/path/to/akqa-denmark-prettier-0.0.0.tgz and confirm the config behaves as expected.
4. While iterating quickly, you can also point npm directly at the workspace directory: npm install --save-dev file:/absolute/path/to/akqa-dk-frontend-configs/packages/prettier-config-akqa-denmark. npm resolves the package using the same packlist rules, so this closely mirrors a publish.
5. When you are done, remove the local file reference from the test project and clean up any generated .tgz files.