Code Style & Biome

Relevant source files

The following files were used as context for generating this wiki page:

• biome.json
• CONTRIBUTING.md
• package.json
• README.md
• skills/playwright-page-object/SKILL.md

The playwright-page-object project adopts a "Zero Config" approach to code quality and consistency. By utilizing Biome, the project provides a unified toolchain for linting, formatting, and import organization, removing the need for traditional fragmented tools like ESLint or Prettier.

This system is designed to allow developers to focus on writing code naturally. Enforcement is handled primarily through automation, specifically via Husky pre-commit hooks, ensuring that all code entering the repository adheres to the established standards without manual intervention.

Sources: CONTRIBUTING.md:41-48, README.md:1-10

Biome Configuration

The core of the code style is defined in biome.json. The project leverages Biome's high-performance engine to handle multiple aspects of the development experience.

Formatter and Linter Rules

The project uses tabs for indentation and double quotes for JavaScript/TypeScript strings. The linter is configured to follow "recommended" standards with specific overrides to suit the project's architectural preferences, such as disabling mandatory arrow functions.

Category	Setting	Detail
Indentation	Style	Tabs ("indentStyle": "tab")
Quotes	Style	Double Quotes ("quoteStyle": "double")
VCS	Integration	Git enabled, uses ignore files
Linter	Ruleset	recommended: true
Complexity	Override	useArrowFunction: off

Sources: biome.json:3-21, biome.json:22-26

Automatic Import Organization

Biome is configured to automatically organize imports. This ensures that modules are grouped and sorted consistently across the codebase, reducing merge conflicts in the import blocks of TypeScript files.

Sources: biome.json:27-33

Developer Workflow & Automation

The project integrates style enforcement directly into the Git lifecycle. This prevents unformatted or low-quality code from being committed.

Workflow Diagram

The following diagram illustrates how Biome interacts with a developer's local changes during the commit process.

This flow ensures that formatting and basic linting errors are fixed in milliseconds before the code is even saved to the local history.

Sources: CONTRIBUTING.md:43-52, CONTRIBUTING.md:54-62

CLI Commands

While automation handles most tasks, developers can manually trigger style checks using the following npm scripts:

Command	Description
npm run lint	Runs Biome check on the src directory to report issues.
npm run lint:fix	Runs Biome check with the --write flag to automatically fix formatting and lint errors.

Sources: package.json:17-18

Committing Standards

The project enforces Conventional Commits to facilitate automated releases and changelog generation.

• feat: Triggers a Minor release (e.g., 1.1.0).
• fix: Triggers a Patch release (e.g., 1.0.1).
• docs: Does not trigger a new release.

The commit message format is validated by @commitlint/cli and @commitlint/config-conventional during the pre-commit phase.

Sources: CONTRIBUTING.md:54-62, package.json:82-83

Implementation Patterns

The codebase follows specific structural rules enforced by the combination of TypeScript and Biome:

1. Accessor Usage: Decorators like @Selector must be used with the accessor keyword (introduced in TypeScript 5.0+).
2. Constructor Alignment: For plain decorated root classes, the first constructor argument must always be page: Page.
3. Lazy Resolution: Selector chains are designed to be lazy, meaning they are only resolved when the accessor is actually accessed.

Sources: skills/playwright-page-object/SKILL.md:45-56, README.md:27-32

// Example of the required code style for page objects
@RootSelector("CheckoutPage")
class CheckoutPage {
	constructor(readonly page: Page) {}

	@Selector("PromoCodeInput")
	accessor PromoCodeInput!: Locator; // Use accessor keyword
}

Sources: README.md:95-103

Conclusion

By centralizing code style within Biome and automating enforcement through Husky, the playwright-page-object project maintains high technical standards with minimal developer overhead. This "Zero Config" philosophy ensures that the codebase remains clean, readable, and ready for automated CI/CD pipelines.