@slhs/oxfmt-config

This is the SLHS Oxfmt configuration.

Install

pnpm add --save-dev @slhs/oxfmt-config oxfmt

IDE Integration with Oxfmt

If you use VS Code (or a fork), install the official Oxc extension and verify the extension ID is oxc.oxc-vscode.

You can commit a repo-level .vscode/extensions.json so VS Code recommends the extension:

{
  "recommendations": ["oxc.oxc-vscode"]
}

You can also commit a repo-level .vscode/settings.json so contributors get the same formatter by default:

{
  "editor.defaultFormatter": "oxc.oxc-vscode",
  "editor.formatOnSave": true,
  "editor.formatOnSaveMode": "file",
  "[javascript]": {
    "editor.defaultFormatter": "oxc.oxc-vscode"
  },
  "[typescript]": {
    "editor.defaultFormatter": "oxc.oxc-vscode"
  },
  "[javascriptreact]": {
    "editor.defaultFormatter": "oxc.oxc-vscode"
  },
  "[typescriptreact]": {
    "editor.defaultFormatter": "oxc.oxc-vscode"
  },
  "[json]": {
    "editor.defaultFormatter": "oxc.oxc-vscode"
  },
  "[jsonc]": {
    "editor.defaultFormatter": "oxc.oxc-vscode"
  },
  "[css]": {
    "editor.defaultFormatter": "oxc.oxc-vscode"
  },
  "[markdown]": {
    "editor.defaultFormatter": "oxc.oxc-vscode"
  },
  "[yaml]": {
    "editor.defaultFormatter": "oxc.oxc-vscode"
  }
}

Usage

Create an oxfmt.config.ts file in your project root:

import { defineConfig } from "oxfmt";
import slhsConfig from "@slhs/oxfmt-config";

export default defineConfig({
  ...slhsConfig,
  // overrides here
});

Add scripts to package.json:

{
  "scripts": {
    "format": "oxfmt",
    "format:check": "oxfmt --check"
  }
}

Customization

In JavaScript/TypeScript config files, customize by importing and spreading the shared config:

import { defineConfig } from "oxfmt";
import slhsConfig from "@slhs/oxfmt-config";

export default defineConfig({
  ...slhsConfig,
  ignorePatterns: [
    ...(slhsConfig.ignorePatterns ?? []),
    "my-custom-stuff-to-ignore-in-addition-to-the-defaults/**",
  ],
  sortTailwindcss: {
    ...slhsConfig.sortTailwindcss,
    functions: [...(slhsConfig.sortTailwindcss?.functions ?? []), "tw"],
  },
});