Biome

Biome is an all-in-one high-performance toolchain for web projects, aimed to provide functionalities to maintain them. It is a performant linter and a fast formatter.

Positioning of Biome

Biome is very fast, but it is not 100% compatible with existing common tools (such as ESLint, Stylelint and Prettier) and still needs further development.

Biome has good support for JavaScript, TypeScript, JSX, TSX, JSON and JSONC, but support for the others could be improved, so it is recommended to use it for JS, TS, JSX, and TSX projects, and not to mix it with other code checkers and code formatters.

For specific support, please refer to Biome official document.

Installation

You have to install Biome first. Currently Biome v1 is supported.

npm

npm install @biomejs/biome -D

yarn

yarn add @biomejs/biome -D

pnpm

pnpm install @biomejs/biome -D

Configuration

JSON

Create biome.json in your project root:

{
  "extends": ["@modyqyw/fabric/biome.json"]
}

Update package.json and add lint:biome script.

{
  "scripts": {
    "lint:biome": "@biomejs/biome lint --write"
  }
}

Replace lint:biome with check if you want to use formatting and linting at the same time.

{
  "scripts": {
    "check": "@biomejs/biome check --write"
  }
}

If customization is required, please refer to Biome Official Documentation / Configuration.

FAQ

Integration of VSC?

Install the corresponding Biome plugin first.

Update user settings or workspace settings as appropriate.

{
  "editor.codeActionsOnSave": {
    "quickfix.biome": "explicit",
    "source.organizeImports.biome": "explicit"
  }
}

If you want to use formatting and linting at the same time:

{
  "editor.codeActionsOnSave": {
    "quickfix.biome": "explicit",
    "source.organizeImports.biome": "explicit"
  },
  "editor.defaultFormatter": "biomejs.biome",
  "editor.formatOnSave": true
}

Integration of WebStorm?

WebStorm can use plugin to get Biome support.

Integration of lint-staged?

If you are using the lint-staged configuration provided by the package, see the lint-staged chapter.

If you are not, you can refer to the following configuration.

// lint-staged.config.mjs
export default {
  "*": "biome lint --write --no-errors-on-unmatched --files-ignore-unknown=true",
  // If you want to use formatting and linting at the same time
  // '*': 'biome check --write --no-errors-on-unmatched --files-ignore-unknown=true',
};