chore(style): migrate code formatter from Prettier to oxfmt

.github/contributing.md

@@ -59,7 +59,7 @@ Hi! I'm really excited that you are interested in contributing to Vue.js. Before
 
 - Commit messages must follow the [commit message convention](./commit-convention.md) so that changelogs can be automatically generated. Commit messages are automatically validated before commit (by invoking [Git Hooks](https://git-scm.com/docs/githooks) via [simple-git-hooks](https://github.com/toplenboren/simple-git-hooks)).
 
-- No need to worry about code style as long as you have installed the dev dependencies - modified files are automatically formatted with Prettier on commit (by invoking [Git Hooks](https://git-scm.com/docs/githooks) via [simple-git-hooks](https://github.com/toplenboren/simple-git-hooks)).
+- No need to worry about code style as long as you have installed the dev dependencies - modified files are automatically formatted with oxfmt on commit (by invoking [Git Hooks](https://git-scm.com/docs/githooks) via [simple-git-hooks](https://github.com/toplenboren/simple-git-hooks)).
 
 ### Advanced Pull Request Tips
 
@@ -92,15 +92,15 @@ A high level overview of tools used:
 - [Vite](https://vitejs.dev/) and [ESBuild](https://esbuild.github.io/) for development bundling
 - [Rollup](https://rollupjs.org) for production bundling
 - [Vitest](https://vitest.dev/) for unit testing
-- [Prettier](https://prettier.io/) for code formatting
 - [oxlint](https://oxc.rs/docs/guide/usage/linter.html) for static error prevention (outside of types)
+- [oxfmt](https://oxc.rs/docs/guide/usage/formatter.html) for code formatting
 
 ## Git Hooks
 
 The project uses [simple-git-hooks](https://github.com/toplenboren/simple-git-hooks) to enforce the following on each commit:
 
 - Type check the entire project
-- Automatically format changed files using Prettier
+- Automatically format changed files using oxfmt
 - Verify commit message format (logic in `scripts/verify-commit.js`)
 
 ## Scripts

.github/renovate.json5

@@ -41,7 +41,7 @@
         'simple-git-hooks',
         'lint-staged',
         'oxlint',
-        'prettier{/,}**',
+        'oxfmt{/,}**',
       ],
     },
   ],

.github/workflows/autofix.yml

@@ -28,7 +28,7 @@ jobs:
       - name: Run oxlint
         run: pnpm run lint --fix
 
-      - name: Run prettier
+      - name: Run oxfmt
         run: pnpm run format
 
       - uses: autofix-ci/action@635ffb0c9798bd160680f18fd73371e355b85f27

.github/workflows/test.yml

@@ -127,7 +127,7 @@ jobs:
       - name: Run oxlint
         run: pnpm run lint
 
-      - name: Run prettier
+      - name: Run oxfmt
         run: pnpm run format-check
 
       - name: Run tsc

.oxfmtrc.jsonc

@@ -0,0 +1,9 @@
+{
+  "$schema": "./node_modules/oxfmt/configuration_schema.json",
+  "semi": false,
+  "singleQuote": true,
+  "arrowParens": "avoid",
+  "printWidth": 80,
+  "experimentalSortPackageJson": false,
+  "ignorePatterns": ["dist", "CHANGELOG*.md", "*.toml"],
+}

.vscode/settings.json

@@ -9,16 +9,17 @@
     "yml": true
   },
 
-  // Use prettier to format TypeScript, JavaScript and JSON files
+  // Use Oxc to format TypeScript, JavaScript and JSON files
   "[typescript]": {
-    "editor.defaultFormatter": "esbenp.prettier-vscode"
+    "editor.defaultFormatter": "oxc.oxc-vscode"
   },
   "[javascript]": {
-    "editor.defaultFormatter": "esbenp.prettier-vscode"
-  },
-  "[json]": {
-    "editor.defaultFormatter": "esbenp.prettier-vscode"
+    "editor.defaultFormatter": "oxc.oxc-vscode"
   },
+  // oxc-vscode does not yet support JSON formatting
+  // "[json]": {
+  //   "editor.defaultFormatter": "oxc.oxc-vscode"
+  // },
   "editor.formatOnSave": true,
   "vitest.disableWorkspaceWarning": true
 }

package.json

@@ -14,8 +14,8 @@
     "size-esm": "node scripts/build.js runtime-shared runtime-dom runtime-core reactivity shared runtime-vapor -f esm-bundler",
     "check": "tsc --incremental --noEmit",
     "lint": "oxlint",
-    "format": "prettier --write --cache .",
-    "format-check": "prettier --check --cache .",
+    "format": "oxfmt",
+    "format-check": "oxfmt --check",
     "test": "vitest",
     "test-unit": "vitest --project unit*",
     "test-e2e": "node scripts/build.js vue -f global+esm-browser-vapor -d && vitest --project e2e",
@@ -51,15 +51,15 @@
   },
   "lint-staged": {
     "*.{js,json}": [
-      "prettier --write"
+      "oxfmt --no-error-on-unmatched-pattern"
     ],
     "*.ts?(x)": [
       "oxlint --fix",
-      "prettier --parser=typescript --write"
+      "oxfmt --no-error-on-unmatched-pattern"
     ]
   },
   "engines": {
-    "node": ">=18.12.0"
+    "node": ">=22.12.0"
   },
   "devDependencies": {
     "@babel/parser": "catalog:",
@@ -90,8 +90,8 @@
     "marked": "13.0.3",
     "oxlint": "^1.24.0",
     "npm-run-all2": "^8.0.4",
+    "oxfmt": "^0.20.0",
     "picocolors": "^1.1.1",
-    "prettier": "^3.7.4",
     "pretty-bytes": "^7.1.0",
     "pug": "^3.0.3",
     "puppeteer": "~24.33.0",

packages/vue/examples/transition/modal.html

@@ -107,13 +107,13 @@ <h3>custom header</h3>
   }
 
   /*
- * The following styles are auto-applied to elements with
- * transition="modal" when their visibility is toggled
- * by Vue.js.
- *
- * You can easily play with the modal transition by editing
- * these styles.
- */
+  * The following styles are auto-applied to elements with
+  * transition="modal" when their visibility is toggled
+  * by Vue.js.
+  *
+  * You can easily play with the modal transition by editing
+  * these styles.
+  */
 
   .modal-enter-from {
     opacity: 0;