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] (https://biomejs.dev/internals/language-support/).
Installation
You have to install Biome first. Currently Biome v1 is supported.
npm install @biomejs/biome -D
yarn add @biomejs/biome -D
pnpm install @biomejs/biome -D
bun install @biomejs/biome -d
Configuration
JSON
Update your biome.json
.
{
"extends": ["./node_modules/@modyqyw/fabric/biome.json"]
}
CLI
Update your package.json
and add format:biome
script.
{
"scripts": {
"format:biome": "@biomejs/biome format --write"
}
}
Replace format:biome
with check
if you want to use formatting and linting at the same time.
{
"scripts": {
"check": "@biomejs/biome check --write"
}
}
Integration
VSC
Install the corresponding Biome plugin first.
Update user settings or workspace settings as appropriate.
{
"editor.defaultFormatter": "biomejs.biome",
"editor.formatOnSave": true
}
WebStorm
WebStorm can use plugin to get Biome support.
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
// or lint-staged.config.js with "type": "module" in package.json
export default {
'*': 'biome format --write --no-errors-on-unmatched --files-ignore-unknown=true',
// '*': 'biome check --write --no-errors-on-unmatched --files-ignore-unknown=true',
};