src/content/docs/blog/biome-v1.mdx
In Biome v1, the formatter has options for JSX quotes and parentheses in the arrow functions; the CLI adds a new command biome lint, .jsonc files are supported, and it's possible to extend the configuration file.
You can upgrade Biome by running the following command:
npm install --save-dev --save-exact @biomejs/[email protected]
pnpm update --save-exact @biomejs/[email protected]
yarn upgrade --exact @biomejs/[email protected]
Or install the VS Code extension to integrate Biome into your editor.
Biome now supports two new, long-awaited options:
You can use this option via CLI or via biome.json file:
{
"javascript": {
"formatter": {
"jsxQuoteStyle": "single"
}
}
}
biome format --jsx-quote-style=single --write ./src
And Biome will apply single quotes when defining attributes in JSX code:
import Item from "./item.jsx";
const Header = () => {
return <Item title="Docs" />;
};
You can decide not to print parenthesis in arrow functions. You can customize the option via CLI or via biome.json:
{
"javascript": {
"formatter": {
"arrowParentheses": "asNeeded"
}
}
}
biome format --arrow-parentheses=as-needed --write ./src
And Biome will print parenthesis only for those arrow functions that require them:
// no need for parentheses
const filter = (term) => {};
// needs parentheses
const filterBy = (term, fn) => {};
The CLI was heavily reworked to guarantee consistent behaviour when handling files, diagnostics emitted and commands.
Among those changes, there are some breaking changes in its behaviour.
biome check will now emit error diagnostics for code not formatted and exits with an error code. This behaviour aligns with the semantics meant for this command.biome lint commandThe command biome check is meant to run multiple tools, which sometimes can overwhelm the users. With biome lint, Biome will only run lint rules against files.
As for now, the command accepts almost all the CLI arguments of the biome check. In the future, this command will specialize and tweak its behaviour around linting.
By default, when Biome sees a file that can't handle, it fires a diagnostic and will exit with an error code.
With --files-ignore-unknown option, the CLI won't emit diagnostics and will continue processing files.
You can define this behaviour in the biome.json too:
{
"files": {
"ignoreUnknown": true
}
}
When Biome doesn't process files during a command, it exits with an error code and emits an error diagnostic.
Now, with --no-errors-on-unmatched, Biome will exist with a successful code and doesn't emit any diagnostics.
This new option allows users to use Biome with tools like lint-staged.
In Biome, you can change the configuration of rules and allow them to emit diagnostics. This behaviour was limited, and now with --error-on-warnings option, you can tell Biome to exit with an error code if a warning is emitted.
Here's an example, let's change the diagnostic level of a rule via biome.json:
{
"linter": {
"recommended": true,
"rules": {
"a11y": {
"useAltText": "warn"
}
}
}
}
Here's a sample code that will trigger the rule:
const Image = () => {
return ;
};
And now, run the CLI using the new option:
biome lint --error-on-warnings ./src
Biome's JSON parser now supports comments, so we enabled these exciting new features.
.jsonc file supportBiome can now format and lint .jsonc files.
Biome can parse comments inside JSON files. You can opt-in to this feature via the configuration file:
{
"json": {
"parser": {
"allowComments": true
}
}
}
:::note
The biome.json file doesn't allow comments.
:::
:::caution When enabling this feature, comments will be permitted in all JSON files encountered by Biome. :::
Plus, Biome now recognizes some known files as "JSON files that can have comments". For example, now Biome can
format your tsconfig.json file with comments without emitting errors!
extends propertyYou can now break down your configuration file into different files and join them using the new extends property.
{
"extends": ["./formatter.json", "./linter.json"]
}
Check the documentation to understand how it works.
We deleted two rules:
useCamelCase, which is replaced by useNamingConvention;noExtraSemicolon, not needed; the formatter takes care of it;This rule disallows duplicate keys in a JSON object.
This rule computes a complexity score and reports code with a score above a configurable threshold.
This rule disallows switch cases that fall through to the next case.
This rule recommends using Number.isFinite instead of the global and unsafe isFinite that attempts a type of coercion.
This rule recommends using Number.isNaN instead of the global and unsafe isNaN that attempts a type of coercion.
This rule disallows \8 and \9 escape sequences in string literals.
This rule disallows declaration merging between an interface and a class.
This rule disallows useless export {}.
This rule disallows useless aliasing of this in arrow functions.
This rule disallows the use of void.
This rule proposes turning function expressions into arrow functions.
Function expressions that use this are ignored.
This rule enforces get methods to always return a value.
Enables restrictions on how local imports should be imported.
This rule proposes using Array.isArray() instead of instanceof Array.
The rule enforces wide-spread naming conventions of Javascript and TypeScript across a codebase.
New rules are promoted, please check #4750 for more details:
suspicious/noDuplicateJsxPropssuspicious/noConsoleLogcorrectness/useIsNancomplexity/useSimpleNumberKeyscomplexity/useLiteralKeyscomplexity/noForEacha11y/useHeadingContentThe following rules are now recommended:
In the last release, Biome introduced support for Stage 3 decorators. Although, this final proposal doesn't support the function class parameter decorators:
class Controller {
get(@Param("id") id: string) {}
// ^^^^^^^^^^^^ syntax not covered by the official and final decorators spec
}
Some users were dissatisfied because they couldn't use Biome inside their Angular/NestJS project. Now you can do it via configuration:
{
"javascript": {
"parser": {
"unsafeParameterDecoratorsEnabled": true
}
}
}
Big thank you to the following contributors:
jsxQuoteStyle in the formatter, and started the works for our new CSS parser;arrowParentheses in the formatter;