Migrate from prettier to oxfmt (#3960)

* Migrate from prettier to oxfmt

* add back newlines

---------

Co-authored-by: Aman Mahajan <amahajan@stratag.com>

Author: nstepien

.github/workflows/ci.yml

@@ -28,8 +28,8 @@ jobs:
       - name: ESLint
         run: node --run eslint
 
-      - name: Prettier
-        run: node --run prettier:check
+      - name: Oxfmt
+        run: node --run format:check
 
       - name: Bundle
         run: node --run build

.github/workflows/publish.yml

@@ -39,8 +39,8 @@ jobs:
       - name: ESLint
         run: node --run eslint
 
-      - name: Prettier
-        run: node --run prettier:check
+      - name: Oxfmt
+        run: node --run format:check
 
       - name: Bundle
         run: node --run build

.oxfmtrc.json

@@ -0,0 +1,69 @@
+{
+  "$schema": "./node_modules/oxfmt/configuration_schema.json",
+  "ignorePatterns": ["/website/routeTree.gen.ts"],
+  "singleQuote": true,
+  "trailingComma": "none",
+  "experimentalSortImports": {
+    "customGroups": [
+      {
+        "groupName": "react",
+        "elementNamePattern": ["react", "react/**", "react-dom", "react-dom/**"]
+      },
+      {
+        "groupName": "ecij",
+        "elementNamePattern": ["ecij"]
+      },
+      {
+        "groupName": "clsx",
+        "elementNamePattern": ["clsx"]
+      },
+      {
+        "groupName": "./src",
+        "elementNamePattern": ["**/src", "**/src/**"]
+      },
+      {
+        "groupName": "./renderers",
+        "elementNamePattern": ["**/renderers", "**/renderers/**"]
+      },
+      {
+        "groupName": "./components",
+        "elementNamePattern": ["**/components", "**/components/**"]
+      },
+      {
+        "groupName": "./hooks",
+        "elementNamePattern": ["**/hooks", "**/hooks/**"]
+      },
+      {
+        "groupName": "./utils",
+        "elementNamePattern": ["**/utils", "**/utils/**"]
+      },
+      {
+        "groupName": "./types",
+        "elementNamePattern": ["**/types", "**/types/**"]
+      }
+    ],
+    "groups": [
+      "side_effect_style",
+      "side_effect",
+      { "newlinesBetween": true },
+      "builtin",
+      "react",
+      "external",
+      "ecij",
+      "clsx",
+      { "newlinesBetween": true },
+      "./src",
+      "./renderers",
+      "./components",
+      "./hooks",
+      "./utils",
+      "./types",
+      "index",
+      "sibling",
+      "parent",
+      "unknown"
+    ],
+    "newlinesBetween": false
+  },
+  "experimentalSortPackageJson": false
+}

.prettierignore

@@ -1,3 +1,3 @@
 {
-  "recommendations": ["dbaeumer.vscode-eslint", "esbenp.prettier-vscode", "biomejs.biome"]
+  "recommendations": ["dbaeumer.vscode-eslint", "oxc.oxc-vscode", "biomejs.biome"]
 }

.prettierrc

@@ -2,8 +2,9 @@
   "editor.codeActionsOnSave": {
     "source.fixAll": "explicit"
   },
-  "editor.defaultFormatter": "esbenp.prettier-vscode",
+  "editor.defaultFormatter": "oxc.oxc-vscode",
   "editor.formatOnSave": true,
+  "editor.formatOnSaveMode": "file",
   "typescript.enablePromptUseWorkspaceTsdk": true,
   "typescript.tsdk": "node_modules/typescript/lib",
   "files.readonlyInclude": {

.vscode/extensions.json

@@ -40,21 +40,19 @@
     "test:watch": "vitest watch --project browser --project node",
     "visual": "vitest run --project visual --coverage.reportsDirectory='./coverage/visual'",
     "visual:update": "vitest run --project visual --update",
-    "format": "biome format --write",
+    "format": "oxfmt",
+    "format:check": "oxfmt --check",
     "check": "biome check --error-on-warnings",
     "biome:ci": "biome ci --error-on-warnings",
     "eslint": "eslint --max-warnings 0 --cache --cache-location .cache/eslint --cache-strategy content",
     "eslint:fix": "node --run eslint -- --fix",
-    "prettier:check": "prettier --check .",
-    "prettier:format": "prettier --write .",
     "typecheck": "tsc --build"
   },
   "devDependencies": {
     "@biomejs/biome": "2.4.0",
     "@eslint-react/eslint-plugin": "^2.3.12",
     "@eslint/markdown": "^7.5.1",
     "@faker-js/faker": "^10.0.0",
-    "@ianvs/prettier-plugin-sort-imports": "^4.6.2",
     "@tanstack/react-router": "^1.132.31",
     "@tanstack/router-plugin": "^1.132.31",
     "@types/node": "^25.0.2",
@@ -76,9 +74,9 @@
     "eslint-plugin-testing-library": "^7.13.5",
     "jspdf": "^4.0.0",
     "jspdf-autotable": "^5.0.2",
+    "oxfmt": "0.33.0",
     "playwright": "~1.58.0",
     "postcss": "^8.5.2",
-    "prettier": "3.8.1",
     "react": "^19.2.1",
     "react-dom": "^19.2.1",
     "rolldown": "^1.0.0-rc.3",

.vscode/settings.json

@@ -1,4 +1,4 @@
-import { useHeaderRowSelection, useRowSelection } from './hooks/useRowSelection';
+import { useHeaderRowSelection, useRowSelection } from './hooks';
 import type { Column, RenderCellProps, RenderGroupCellProps, RenderHeaderCellProps } from './types';
 import { SelectCellFormatter } from './cellRenderers';
 

package.json

@@ -1,10 +1,10 @@
-import { configure } from 'vitest-browser-react/pure';
-import { locators } from 'vitest/browser';
-
 // vitest-browser-react also automatically injects render method on the page
 // need to import it so TypeScript can pick up types
 import 'vitest-browser-react';
 
+import { configure } from 'vitest-browser-react/pure';
+import { locators } from 'vitest/browser';
+
 configure({
   reactStrictMode: true
 });