npm package: @mmg-dev/webpipeline-biome-stencil
Description: Shared Biome configuration for Webpipeline Stencil projects
Author: MMG Dev Team
Latest version: 1.2.0

# @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:

```bash
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:

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

## Scripts

Add these scripts to your `package.json`:

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

## VS Code Integration

Install the [Biome extension](https://marketplace.visualstudio.com/items?itemName=biomejs.biome) (`Cmd+Shift+X` → "biome").

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

```json
{
  "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`:

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

Then clean install:

```bash
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:

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

## Release

Releases are managed via [standard-version](https://github.com/conventional-changelog/standard-version), which handles version bumping, CHANGELOG generation, and git tagging based on [Conventional Commits](https://www.conventionalcommits.org/).

### Workflow

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

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

2. Run the release script:

```bash
# 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:

```bash
git push --follow-tags
```

## License

MIT