@mmg-dev/webpipeline-biome-stencil

Shared Biome configuration for MMG Stencil/Web Component projects.

Replaces ESLint + Prettier with a single, faster tool.

Installation

When migrating from ESLint/Prettier, remove old dependencies and do a clean install to avoid stale packages:

pnpm remove eslint @mmg-dev/webpipeline-stencil-eslint-prettier-config
rm -rf node_modules pnpm-lock.yaml
pnpm i --save-dev @biomejs/biome @mmg-dev/webpipeline-biome-stencil

Also remove the "prettier" field from package.json and delete eslint.config.mjs if present.

Usage

Create a biome.json in your project:

{
  "$schema": "https://biomejs.dev/schemas/2.4.6/schema.json",
  "extends": ["@mmg-dev/webpipeline-biome-stencil"]
}

Scripts

Add these scripts to your package.json:

{
  "scripts": {
    "lint": "biome check src/",
    "lint:fix": "biome check --write src/",
    "format": "biome format --write src/"
  }
}

VS Code Integration

Install the Biome extension (Cmd+Shift+X → "biome").

Copy .vscode/settings.json from this package to your project, or add manually:

{
  "typescript.preferences.includePackageJsonAutoImports": "off",
  "editor.defaultFormatter": "biomejs.biome",
  "editor.formatOnSave": true,
  "editor.codeActionsOnSave": {
    "source.fixAll.biome": "explicit",
    "source.organizeImports.biome": "explicit"
  },
  "[typescript]": {
    "editor.defaultFormatter": "biomejs.biome"
  },
  "[javascript]": {
    "editor.defaultFormatter": "biomejs.biome"
  },
  "[typescriptreact]": {
    "editor.defaultFormatter": "biomejs.biome"
  },
  "[javascriptreact]": {
    "editor.defaultFormatter": "biomejs.biome"
  }
}

What's included

Formatter (replaces Prettier)

• Single quotes, semicolons, trailing commas
• Line width: 180 (matching previous Prettier config)
• 2 spaces indent, LF line endings

Linter (replaces ESLint)

| ESLint Rule | Biome Equivalent | | ------------------------------------ | ------------------------------- | | @typescript-eslint/no-unused-vars | correctness/noUnusedVariables | | @typescript-eslint/no-explicit-any | suspicious/noExplicitAny | | no-console | suspicious/noConsole | | no-debugger | suspicious/noDebugger | | prefer-const | style/useConst | | no-var | style/noVar | | unused imports | correctness/noUnusedImports |

Not covered by Biome

The @stencil-community/eslint-plugin rules have no Biome equivalent. These were enforced via ESLint:

• element-type, required-jsdoc, render-returns-host
• methods-must-be-public, own-methods-must-be-private
• strict-mutable, decorators-style, decorators-context
• ban-prefix, prefer-vdom-listener

These are Stencil-framework-specific and must be enforced via code review or a separate ESLint pass if needed.

Local Development

To work with a local version of this package (e.g. for testing changes before publishing), add the following to your project's package.json under devDependencies:

{
  "devDependencies": {
    "@mmg-dev/webpipeline-biome-stencil": "link:../_npm-packages/webpipeline-biome-stencil"
  }
}

Then clean install:

rm -rf node_modules pnpm-lock.yaml
pnpm install

If you already have a pnpm-lock.yaml, a fresh install ensures the local link is resolved correctly. The relative path must point to your local clone of this repo. Adjust ../_npm-packages/... accordingly.

Once you're done testing, switch back to the npm version:

pnpm i --save-dev @mmg-dev/webpipeline-biome-stencil

Release

Releases are managed via standard-version, which handles version bumping, CHANGELOG generation, and git tagging based on Conventional Commits.

Workflow

1. Make your changes and commit using conventional commit messages:

git commit -m "fix: disable linting for components.d.ts"
git commit -m "feat: add noConsole rule"

2. Run the release script:

# auto-detect version bump (patch/minor/major) from commits
pnpm release

# or force a specific bump
pnpm release:patch   # 1.1.1 -> 1.1.2
pnpm release:minor   # 1.1.1 -> 1.2.0
pnpm release:major   # 1.1.1 -> 2.0.0

This will: bump version in package.json, update CHANGELOG.md, create a git tag, and publish to npm.

3. Push the tag to remote:

git push --follow-tags

License

MIT