Skip to content

Migrate to oxc toolchain#59

Merged
psd-coder merged 13 commits intomainfrom
migrate-to-oxc
Feb 11, 2026
Merged

Migrate to oxc toolchain#59
psd-coder merged 13 commits intomainfrom
migrate-to-oxc

Conversation

@psd-coder
Copy link
Copy Markdown
Member

Overview

This PR migrates the project's linting and formatting toolchain from ESLint + Prettier to oxlint + oxfmt (Oxc tooling), a Rust-based alternative that provides significantly faster performance while maintaining compatibility with existing rule sets.

Problem Statement

The project was using traditional JavaScript-based tooling (ESLint and Prettier) for code quality and formatting enforcement. While these tools are mature and widely adopted, they have inherent performance limitations, particularly on larger codebases. As the project grows, build times and developer feedback loops can suffer from slower linting and formatting operations. The emergence of Rust-based tooling alternatives offers an opportunity to improve development velocity without sacrificing code quality standards.

Solution Approach

  1. Replaced ESLint with oxlint: Removed all ESLint-related dependencies (eslint, typescript-eslint, @hideoo/eslint-config, @figma/eslint-plugin-figma-plugins, @eslint/compat, globals) and introduced oxlint as the linter. Created .oxlintrc.json with equivalent rule configurations supporting TypeScript, React, and Unicorn plugins with the same import ordering, type definition preferences, and file-specific overrides.

  2. Replaced Prettier with oxfmt: Removed Prettier and its plugins (prettier, prettier-plugin-tailwindcss) and added oxfmt as the formatter. Migrated formatting preferences to .oxfmtrc.json maintaining existing style choices (double quotes, trailing commas, 100-character line width).

  3. Updated development tooling: Modified all NPM scripts to use the new tools (lint:oxlint, format:oxfmt), added cross-env to preserve colored output in parallel script execution across platforms, and updated nano-staged hooks for pre-commit formatting.

  4. Configured editor integration: Updated VSCode workspace settings to use the oxc-vscode extension as the default formatter and linter, replacing the separate ESLint and Prettier extensions. Added CSS Modules Kit as a recommended extension to enhance developer experience.

  5. Updated CI pipeline: Modified the GitHub Actions lint workflow to execute oxlint and oxfmt checks instead of the previous ESLint and Prettier commands.

  6. Fixed code quality issues: Addressed violations flagged by oxlint, primarily missing dependency declarations in useCallback and useMemo hooks, ensuring proper React hook exhaustive dependencies and resolving formatting inconsistencies to meet the new linter's standards.

  7. Cleaned up configuration artifacts: Removed obsolete configuration files (eslint.config.js, prettier.config.cjs) and patches (@hideoo__eslint-config@4.1.1.patch), and renamed .prettierignore to .oxfmtignore.

Breaking Changes

  • Developer environment requirements: Contributors must install the oxc-vscode extension and remove the old ESLint and Prettier extensions from VSCode to maintain consistent tooling behavior.
  • ESLint configuration removed: Any ESLint-specific rules or plugins that were in use are now removed. The project relies entirely on oxlint's rule set, which may not have 1:1 feature parity with all ESLint plugins (notably @figma/eslint-plugin-figma-plugins was dropped due to incomp

- Remove eslint, @eslint/compat, @hideoo/eslint-config, typescript-eslint, globals
- Add oxlint with native typescript, react, unicorn, import-x plugins
- Add @figma/eslint-plugin-figma-plugins as jsPlugin
- Migrate rules to .oxlintrc.json
@psd-coder psd-coder changed the title Migrate to oxc Migrate to oxc toolchain Feb 10, 2026
@github-actions
Copy link
Copy Markdown

github-actions bot commented Feb 10, 2026

Visit the preview URL for this PR (updated for commit be9836f):

https://harmonizer-web--pr59-migrate-to-oxc-bnws2r6d.web.app

(expires Wed, 18 Feb 2026 01:56:25 GMT)

🔥 via Firebase Hosting GitHub Action 🌎

Sign: 0b46b8946d697564b3f98633c5cd230a6ede1236

- Remove prettier and prettier-plugin-tailwindcss
- Add oxfmt with matching config (double quotes, trailing commas, 100 width)
- Enable experimentalTailwindcss for class sorting
- Rename .prettierignore to .oxfmtignore
- Rename scripts: lint:eslint→lint:oxlint, format:eslint→format:oxlint, lint:prettier→lint:oxfmt, format:prettier→format:oxfmt
- Update CI workflow and CLAUDE.md docs to use new script names
- Replace vscode-eslint/prettier-vscode extension recommendations with oxc.oxc-vscode
- Convert eslint-disable comments to oxlint-disable with corrected rule prefixes (@typescript-eslint/ → typescript/)
- Add @oxfmt/binding-darwin-arm64 to .npmrc age-exclude so native binding installs
Use cross-env to set FORCE_COLOR=1 before pnpm --parallel so child
processes emit ANSI colors regardless of whether stdout is a TTY.
All rules in the plugin call getParserServices() from @typescript-eslint/utils,
which requires a type-aware AST that oxlint's JS plugin bridge does not provide,
causing runtime crashes on every linted file.
CI uses --frozen-lockfile so all platform bindings must be pre-resolved.
Add supportedArchitectures to package.json so pnpm resolves darwin/linux
arm64/x64 bindings when generating the lockfile locally.
oxfmt only auto-reads .gitignore and .prettierignore by default, not
.oxfmtignore. Without --ignore-path the HTML ignore rule was silently
skipped, causing CI failures when oxfmt tried to delegate HTML formatting
to prettier which is no longer installed.
@psd-coder psd-coder merged commit 6653f58 into main Feb 11, 2026
5 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant