Biome or biomejs is a modern toolchain in the JavaScript ecosystem, compared to eslint and prettier. We choose it because it's fast, simple and has everything we need together (formatting and linting).
Install biome and zhaoworks biome config
bun add @biomejs/biome @zhaoworks/biome -DCreate a biome.json file and paste the following content
{
"$schema": "https://biomejs.dev/schemas/1.8.3/schema.json",
"extends": ["@zhaoworks/biome"]
}You should use the latest biome json $schema.
- Use biome CLI
- Integrate biome in your editor
Using the CLI, there are three commands
# only runs the formatter
bun biome format --write ./path/to/execute
# only runs the linter
bun biome lint --write ./path
# runs both linter and formatter
bun biome check --write ./pathBasic options
- Indent size: 2
The main JavaScript options
- Semicolons: always
- Quote style: single
- JSX quote style: double
Biome has a few categories of linting rules which you can see at the linter rules page.
We are using the recommended rules and some others that are listed below.
All the rules below are set to error.
- noNegationElse
- noDefaultExport
- useCollapsedElseIf
- useShorthandArrayType
- useShorthandAssign
- useForOf
-
useFilenamingConvention -
kebab-caseandexport