Biome v1

29 de ago. de 2023 - 5 min read

Emanuele Stoppa

Biome Core Team

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/biome@1.0.0
pnpm update --save-exact @biomejs/biome@1.0.0
yarn upgrade --exact @biomejs/biome@1.0.0

Or install the VS Code extension to integrate Biome into your editor.

New formatter options

Biome now supports two new, long-awaited options:

• support for formatting the preferred quote kind in JSX;
• support for formatting parenthesis in arrow functions only when they are needed;

JSX quotes style

You can use this option via CLI or via biome.json file:

biome.json

{
  "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" />;
};

Arrow function parenthesis

You can decide not to print parenthesis in arrow functions. You can customize the option via CLI or via biome.json:

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) => {};

CLI improvements

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.

• The CLI exits with an error code if the configuration file contains errors; while Biome can parse the configuration successfully - even with errors - this was a hazard for our users. A typo in the configuration file would have resulted in Biome applying its defaults, and executing Biome with a different behaviour compared to the one set by the user.
• The command 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.

New biome lint command

The 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.

More control over errors

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:

biome.json

{
  "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.

Exit on warnings

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:

biome.json

{
  "linter": {
    "recommended": true,
    "rules": {
      "a11y": {
        "useAltText": "warn"
      }
    }
  }
}

Here’s a sample code that will trigger the rule:

const Image = () => {
  return <img src="https://example.com/image.png" />;
};

And now, run the CLI using the new option:

biome lint --error-on-warnings ./src

JSONC support and comments

Biome’s JSON parser now supports comments, so we enabled these exciting new features.

.jsonc file support

Biome can now format and lint .jsonc files.

Allow comments in JSON files

Biome can parse comments inside JSON files. You can opt-in to this feature via the configuration file:

biome.json

{
  "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 property

You can now break down your configuration file into different files and join them using the new extends property.

biome.json

{
  "extends": ["./formatter.json", "./linter.json"]
}

Check the documentation to understand how it works.

Linter

We deleted two rules:

• useCamelCase, which is replaced by useNamingConvention;
• noExtraSemicolon, not needed; the formatter takes care of it;

New Rules

• noDuplicateJsonKeys

  This rule disallows duplicate keys in a JSON object.

• noExcessiveComplexity

  This rule computes a complexity score and reports code with a score above a configurable threshold.

• noFallthroughSwitchClause

  This rule disallows switch cases that fall through to the next case.

• noGlobalIsFinite

  This rule recommends using Number.isFinite instead of the global and unsafe isFinite that attempts a type of coercion.

• noGlobalIsNan

  This rule recommends using Number.isNaN instead of the global and unsafe isNaN that attempts a type of coercion.

• noNonoctalDecimalEscape

  This rule disallows \8 and \9 escape sequences in string literals.

• noUnsafeDeclarationMerging

  This rule disallows declaration merging between an interface and a class.

• noUselessEmptyExport

  This rule disallows useless export {}.

• noUselessThisAlias

  This rule disallows useless aliasing of this in arrow functions.

• noVoid

  This rule disallows the use of void.

• useArrowFunction

  This rule proposes turning function expressions into arrow functions. Function expressions that use this are ignored.

• useGetterReturn

  This rule enforces get methods to always return a value.

• useImportRestrictions

  Enables restrictions on how local imports should be imported.

• useIsArray

  This rule proposes using Array.isArray() instead of instanceof Array.

• useNamingConvention

  The rule enforces wide-spread naming conventions of Javascript and TypeScript across a codebase.

Promoted rules

New rules are promoted, please check #4750 for more details:

• suspicious/noDuplicateJsxProps
• suspicious/noConsoleLog
• correctness/useIsNan
• complexity/useSimpleNumberKeys
• complexity/useLiteralKeys
• complexity/noForEach
• a11y/useHeadingContent

The following rules are now recommended:

• useExponentiationOperator
• noUselessFragments
• noRedundantUseStrict

Support for function class parameter decorators

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:

biome.json

{
  "javascript": {
    "parser": {
      "unsafeParameterDecoratorsEnabled": true
    }
  }
}

Acknowledgements

Big thank you to the following contributors:

• denbezrukov, they implemented the new decorator parameter, the new option jsxQuoteStyle in the formatter, and started the works for our new CSS parser;
• Conaclos, they continued creating new rules, making the existing ones smarter and adding tons of value to Biome;
• SuperchupuDev, they implemented the new option arrowParentheses in the formatter;
• nissy-dev, they fixed a bunch of issues around the linter;
• unvalley, they fixed a bunch of issues around the linter and implemented new rules;
• arendjr, they implemented new rules in the linter and implemented the new import sorting strategy;
• ddanielsantos, for their first contribution to the project;
• nikeee, for their first contribution to the project;

Translations

• 中文翻译: Biome v1版本

Announcing Biome