chore(style): migrate code formatter from Prettier to oxfmt #14238
Conversation
|
Important Review skippedAuto reviews are disabled on base/target branches other than the default branch. Please check the settings in the CodeRabbit UI or the You can disable this status message by setting the ✨ Finishing touches🧪 Generate unit tests (beta)
Comment |
Size ReportBundles
Usages
|
@vue/compiler-core
@vue/compiler-dom
@vue/compiler-sfc
@vue/compiler-ssr
@vue/compiler-vapor
@vue/reactivity
@vue/runtime-core
@vue/runtime-dom
@vue/runtime-vapor
@vue/server-renderer
@vue/shared
vue
@vue/compat
commit: |
There was a problem hiding this comment.
Pull request overview
This PR migrates the code formatter from Prettier to oxfmt, a faster alternative built on the Oxc toolchain. The migration involves updating configuration files, build scripts, CI workflows, and documentation to reflect the new formatter.
Key changes include:
- Replaced Prettier with oxfmt as the project's code formatter
- Updated formatting commands in package.json and lint-staged configuration
- Migrated formatting configuration from
.prettierrcto.oxfmtrc.jsoncwith equivalent settings
Reviewed changes
Copilot reviewed 9 out of 12 changed files in this pull request and generated 4 comments.
Show a summary per file
| File | Description |
|---|---|
| pnpm-lock.yaml | Removed Prettier dependencies and added oxfmt with its native binary dependencies for multiple platforms (darwin, linux, win32) |
| package.json | Updated format scripts to use oxfmt commands, replaced prettier dependency with oxfmt ^0.20.0, and updated lint-staged hooks |
| .oxfmtrc.jsonc | Created new oxfmt configuration file with equivalent settings (semi: false, singleQuote: true, arrowParens: avoid) plus ignore patterns |
| .prettierrc | Removed Prettier configuration file |
| .prettierignore | Removed Prettier ignore file |
| .vscode/settings.json | Changed default formatter from prettier-vscode to oxc-vscode extension for TypeScript, JavaScript, and JSON files |
| .github/workflows/test.yml | Updated workflow comment from "Run prettier" to "Run oxfmt" |
| .github/workflows/autofix.yml | Updated workflow comment from "Run prettier" to "Run oxfmt" |
| .github/renovate.json5 | Changed package matching pattern from prettier to oxfmt for dependency updates |
| .github/contributing.md | Updated documentation references from Prettier to oxfmt throughout contributor guide |
| packages/vue/examples/transition/modal.html | Applied oxfmt formatting to CSS indentation |
| netlify.toml | Applied oxfmt formatting to TOML file structure |
Files not reviewed (1)
- pnpm-lock.yaml: Language not supported
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| "singleQuote": true, | ||
| "arrowParens": "avoid", | ||
| "printWidth": 80, | ||
| "ignorePatterns": ["dist", "pnpm-lock.yaml", "CHANGELOG*.md", "package.json"], |
There was a problem hiding this comment.
The package.json file is listed in ignorePatterns but appears to have been formatted anyway, as evidenced by the reordering of fields (e.g., "private" and "version" swapped positions, "packageManager" moved to the end, devDependencies reordered). This suggests the ignore pattern may not be working as intended. Consider verifying that oxfmt correctly respects the ignorePatterns configuration or manually revert the formatting changes to package.json if it should remain unchanged.
| "ignorePatterns": ["dist", "pnpm-lock.yaml", "CHANGELOG*.md", "package.json"], | |
| "ignorePatterns": ["dist", "pnpm-lock.yaml", "CHANGELOG*.md"], |
There was a problem hiding this comment.
Don't know why package.json was formatted, but just letting you know pnpm-lock.yaml is ignored by default.
There was a problem hiding this comment.
Probably wanted experimentalSortPackageJson: false
| NODE_VERSION = "22" | ||
| NPM_FLAGS = "--version" # prevent Netlify npm install |
There was a problem hiding this comment.
The formatting of this TOML file removes the indentation for properties within the [build.environment] section, which may not follow TOML formatting conventions. While valid TOML syntax allows both indented and non-indented properties, the indented style is more commonly used for readability. Consider verifying that oxfmt's TOML formatting behavior aligns with project preferences for configuration files.
| NODE_VERSION = "22" | |
| NPM_FLAGS = "--version" # prevent Netlify npm install | |
| NODE_VERSION = "22" | |
| NPM_FLAGS = "--version" # prevent Netlify npm install |
|
|
||
| ```js | ||
| import { h } from '@vue/runtime-core' | ||
| import { h } from "@vue/runtime-core"; |
There was a problem hiding this comment.
The code example was changed from single quotes to double quotes, but the oxfmt configuration specifies "singleQuote": true. This inconsistency suggests either the formatter wasn't applied to this file, or this was a manual change. For consistency with the configured formatting rules, the example should use single quotes to match the project's style guide.
| import { h } from "@vue/runtime-core"; | |
| import { h } from '@vue/runtime-core'; |
| ] | ||
| }, | ||
| "engines": { | ||
| "node": ">=18.12.0" |
There was a problem hiding this comment.
The Node.js engine requirement in package.json (>=18.12.0) is incompatible with oxfmt's engine requirement (^20.19.0 || >=22.12.0). The engines field should be updated to match oxfmt's minimum Node.js version requirement of 20.19.0 to ensure developers and CI environments running on Node.js 18 or 19 don't encounter installation or runtime issues with the new formatter.
| "node": ">=18.12.0" | |
| "node": ">=20.19.0" |
No description provided.