Migrate to pnpm workspace and use biome as linter

[Asuka109]

I've met some issues while working on the harper repository as a frontend developer. So here are some approaches to improve the developer experience.

Setup workspace to the root directory

For now the harper repository setup the yarn workspace under packages directory. It may make things difficult. For exmaple we can not execute a npm script or resolve JavaScript packages from the root directory. Combine both the cargo workspace and yarn workspace to the root directory can make the vscode eslint and typescript extensions and any other services rely on the npm packages installed on the workspace works good.

Migrate to pnpm workspace

I also recommand migrate to use pnpm as the package manager and workspace toolkit for JavaScript packages. It is now widely used by frontend developers due to the following advantages:

• Disk Space Efficiency: Uses a content-addressable store with hard links, storing each package only once on disk regardless of how many projects use it, saving gigabytes of space in large projects.
• Superior Performance: Significantly faster installation and dependency resolution compared to npm and Yarn v1, reducing time for both initial setup and subsequent installations.
• Strict Dependency Management: Creates a proper node_modules structure that prevents access to undeclared dependencies, eliminating "phantom dependencies" and related bugs.
• Advanced Workspace Support: Built-in monorepo capabilities with the workspace protocol, allowing efficient management of multiple packages in a single repository with optimized local dependencies.
• Deterministic Installations: Ensures consistent dependency trees across different environments, improving reliability and reproducibility of builds.
• Powerful CLI for Workspace Management: Provides specialized commands for working with monorepos, including recursive operations and filtering capabilities to target specific packages.

Use biome as the linter instead of eslint

Biome provides super fast thanks to its Rust implementation, while needing almost no setup to get started. It handles everything in one tool - linting, formatting, and more - without the series of plugins and dependencies that ESLint requires. Plus, it works great with modern JavaScript and TypeScript, gives clearer error messages, and keeps your code consistent with minimal fuss.

After applying all the modifications, the directory would be:

before

./harper
├── Cargo.lock
├── Cargo.toml
├── harper-*
├── justfile
├── packages
│   ├── harper.js
│   ├── obsidian-plugin
│   ├── vscode-plugin
│   ├── web
│   ├── wordpress-plugin
│   ├── package.json
│   └── yarn.lock
├── rust-toolchain.toml
└── rustfmt.toml

after

./harper
├── Cargo.lock
├── Cargo.toml
├── harper-*
├── justfile
├── packages
│   ├── harper.js
│   ├── obsidian-plugin
│   ├── vscode-plugin
│   ├── web
│   └── wordpress-plugin
├── package.json
├── pnpm-lock.yaml
├── rust-toolchain.toml
└── rustfmt.toml

You can find a good pratice from https://github.com/web-infra-dev/rspack.

[Asuka109]

Hi @elijah-potter! Looking for your opinions.

[elijah-potter]

Hey @Asuka109, love the write-up. I was away for the weekend, but I'm back. I think moving to pnpm is generally a good idea, and resolves the problems from #689. I agree that moving to biome feels like a good idea, especially since our precommit runs are now taking double-digit minutes to run.

[Asuka109]

I have made the changes at #924.