utils
Code

Formating

Formater configs for projects.

oxfmt

bun add -D oxfmt
.oxfmtrc.json
{
  "$schema": "./node_modules/oxfmt/configuration_schema.json",
  "tabWidth": 2,
  "singleQuote": false,
  "trailingComma": "es5",
  "arrowParens": "always",
  "sortTailwindcss": {
    "functions": ["cn", "cva"]
  },
  "importOrderParserPlugins": ["typescript", "jsx", "explicitResourceManagement"],
  "importOrder": [
    "<TYPES>",
    "^(react/(.*)$|^(react$))",
    "^(next/(.*)$|^(next$))",
    "<THIRD_PARTY_MODULES>",
    "",
    "",
    "<TYPES>^[.|..|~]",
    "^~/",
    "^@/",
    "^[./]",
    "^[../]"
  ],
  "sortPackageJson": {
    "sortScripts": true
  },
  "ignorePatterns": []
}
package.json
{
  "scripts": {
    "format": "oxfmt"
  }
}

Prettier

bun add -D prettier @ianvs/prettier-plugin-sort-imports prettier-plugin-tailwindcss
.prettierrc
{
  "tabWidth": 2,
  "singleQuote": false,
  "trailingComma": "es5",
  "arrowParens": "always",
 
  "plugins": [
    "@ianvs/prettier-plugin-sort-imports",
    "prettier-plugin-tailwindcss"
  ],
  "tailwindFunctions": ["cn", "cva"],
  "importOrderParserPlugins": [
    "typescript",
    "jsx",
    "explicitResourceManagement"
  ],
  "importOrder": [
    "<TYPES>",
    "^(react/(.*)$|^(react$))",
    "^(next/(.*)$|^(next$))",
    "<THIRD_PARTY_MODULES>",
    "",
    "",
    "<TYPES>^[.|..|~]",
    "^~/",
    "^@/",
    "^[./]",
    "^[../]"
  ]
}
package.json
{
  "scripts": {
    "format": "prettier --write \"**/*.{ts,tsx,md,js,jsx,mjs,json,mdx,vue,md}\""
  }
}

On this page