### Quick Start: Initialize Project
Source: https://github.com/biomejs/biome/blob/main/crates/biome_markdown_parser/benches/fixtures/real/readme-style.md
Sets up a new project directory, initializes npm, and installs Vortex as a development dependency.
```bash
mkdir my-app && cd my-app
npm init -y
npm install --save-dev vortex-bundler
```
--------------------------------
### Implement Rule Action Function
Source: https://github.com/biomejs/biome/blob/main/crates/biome_analyze/CONTRIBUTING.md
Partial example showing the start of a `Rule` implementation when an `action` function is provided for code fixes.
```rust
impl Rule for UseAwesomeTricks {
```
--------------------------------
### Quick Start: Run Development Server
Source: https://github.com/biomejs/biome/blob/main/crates/biome_markdown_parser/benches/fixtures/real/readme-style.md
Starts the Vortex development server to serve the application locally.
```bash
npm run dev
```
--------------------------------
### Create Sample HTML Test File
Source: https://github.com/biomejs/biome/blob/main/crates/biome_formatter/CONTRIBUTING.md
This HTML snippet demonstrates how to create a basic test input file within the `tests/specs/html/` directory. This file, `simple_element.html`, contains a simple `div` with a `p` tag, serving as a minimal example for the Biome HTML formatter to process and validate.
```html
Hello
```
--------------------------------
### Install Just Task Runner
Source: https://github.com/biomejs/biome/blob/main/CLAUDE.md
Installs the 'just' task runner using cargo. It is recommended to install via an OS package manager for easier use.
```shell
cargo install just
```
--------------------------------
### Install Biome CLI
Source: https://github.com/biomejs/biome/blob/main/README.md
Install Biome as a dev dependency for your project. Use --save-exact to ensure reproducible builds.
```shell
npm install --save-dev --save-exact @biomejs/biome
```
--------------------------------
### Install Vortex Bundler with pnpm
Source: https://github.com/biomejs/biome/blob/main/crates/biome_markdown_parser/benches/fixtures/real/readme-style.md
Installs the Vortex bundler as a development dependency using pnpm.
```bash
pnpm add -D vortex-bundler
```
--------------------------------
### Install Biome Project Tools
Source: https://github.com/biomejs/biome/blob/main/CLAUDE.md
Runs the 'install-tools' script provided by 'just' to set up necessary development tools for the Biome project.
```shell
just install-tools
```
--------------------------------
### Verify Yarn Installation and Version
Source: https://github.com/biomejs/biome/blob/main/crates/biome_markdown_formatter/tests/specs/prettier/markdown/code/additional-space.md
Checks that Yarn is properly installed and displays the current version. Use this command to verify the installation was successful and confirm compatibility with project requirements.
```bash
yarn --version
```
--------------------------------
### Initialize Fuzzers - Bash Setup Script
Source: https://github.com/biomejs/biome/blob/main/fuzz/README.md
Initializes the fuzzing environment by installing cargo-fuzz and optionally downloading datasets to improve testing efficacy. This script must be run before executing any fuzzers and creates the shared corpus directory used by all fuzzers.
```bash
./fuzz/init-fuzzers.sh
```
--------------------------------
### Install Vortex CLI Globally
Source: https://github.com/biomejs/biome/blob/main/crates/biome_markdown_parser/benches/fixtures/real/readme-style.md
Installs the Vortex command-line interface globally for system-wide access.
```bash
npm install -g vortex-bundler
```
--------------------------------
### Install Vortex Bundler with npm
Source: https://github.com/biomejs/biome/blob/main/crates/biome_markdown_parser/benches/fixtures/real/readme-style.md
Installs the Vortex bundler as a development dependency using npm.
```bash
npm install --save-dev vortex-bundler
```
--------------------------------
### Quick Start: Create Entry Point (TypeScript)
Source: https://github.com/biomejs/biome/blob/main/crates/biome_markdown_parser/benches/fixtures/real/readme-style.md
Defines a basic TypeScript entry point that creates and mounts an application to a root element.
```typescript
import { createApp } from "./app";
const root = document.getElementById("root");
if (root) {
const app = createApp();
app.mount(root);
}
```
--------------------------------
### Verify Vortex Installation
Source: https://github.com/biomejs/biome/blob/main/crates/biome_markdown_parser/benches/fixtures/real/readme-style.md
Checks the installed version of Vortex to confirm successful installation.
```bash
vortex --version
```
--------------------------------
### Integrating Prettier with ESLint for Code Formatting
Source: https://github.com/biomejs/biome/blob/main/crates/biome_markdown_formatter/tests/specs/prettier/markdown/markdown/real-world-case.md
This section provides a comprehensive guide to integrating Prettier into an ESLint workflow. It includes commands to install necessary packages (`eslint-plugin-prettier`, `eslint-config-prettier`) and configuration examples for `.eslintrc.json` to run Prettier as an ESLint rule and disable conflicting formatting rules.
```bash
yarn add --dev prettier eslint-plugin-prettier
```
```json
{
"plugins": [
"prettier"
],
"rules": {
"prettier/prettier": "error"
}
}
```
```bash
yarn add --dev eslint-config-prettier
```
```json
{
"extends": [
"prettier"
]
}
```
--------------------------------
### Full Lint Rule Documentation Example
Source: https://github.com/biomejs/biome/blob/main/crates/biome_analyze/CONTRIBUTING.md
Illustrates a complete Rust lint rule definition, including its documentation and embedded JavaScript examples for valid and invalid cases.
```rust
use biome_analyze::declare_lint_rule;
declare_lint_rule! {
/// Disallow the use of `var`.
///
/// _ES2015_ allows you to create variables with block scope instead of function scope
/// using the `let` and `const` keywords.
/// Block scope is common in many other programming languages and helps to avoid mistakes.
///
/// Source: https://eslint.org/docs/latest/rules/no-var
///
/// ## Examples
///
/// ### Invalid
///
/// ```js,expect_diagnostic
/// var foo = 1;
/// ```
///
/// ```js,expect_diagnostic
/// var bar = 1;
/// ```
///
/// ### Valid
///
/// ```js
/// const foo = 1;
/// let bar = 1;
///```
pub(crate) NoVar {
version: "next",
name: "noVar",
language: "js",
recommended: false,
}
}
```
```js
var foo = 1;
```
```js
var bar = 1;
```
```js
const foo = 1;
let bar = 1;
```
--------------------------------
### Full Biome Configuration Example
Source: https://github.com/biomejs/biome/blob/main/crates/biome_analyze/CONTRIBUTING.md
Presents a valid `biome.json` configuration, including linter rules and overrides, using the `full_options` marker.
```jsonc
{
"linter": {
"rules": {
"style": {
"useNamingConvention": "warn"
}
}
},
// ...
"overrides": [
{
// Override useNamingConvention for external module typing declarations
"include": ["typings/*.d.ts"],
"linter": {
"rules": {
"style": {
"useNamingConvention": "off"
}
}
}
}
]
}
```
--------------------------------
### FUNCTION serve(options: ServeOptions)
Source: https://github.com/biomejs/biome/blob/main/crates/biome_markdown_parser/benches/fixtures/real/readme-style.md
Starts the Vortex development server, enabling features like Hot Module Replacement and incremental compilation.
```APIDOC
## FUNCTION serve(options: ServeOptions)
### Description
Start the dev server.
### Method
Function
### Endpoint
serve(options: ServeOptions)
### Parameters
#### Request Body
- **options** (ServeOptions) - Required - Configuration for the development server.
### Response
#### Success Response (200)
- **server** (DevServer) - Instance of the development server.
```
--------------------------------
### Quick Start: Add Build Scripts to package.json
Source: https://github.com/biomejs/biome/blob/main/crates/biome_markdown_parser/benches/fixtures/real/readme-style.md
Adds development, build, and preview scripts to the project's package.json for Vortex commands.
```json
{
"scripts": {
"dev": "vortex serve",
"build": "vortex build",
"preview": "vortex preview"
}
}
```
--------------------------------
### Changeset File Structure Example
Source: https://github.com/biomejs/biome/blob/main/AGENTS.md
Illustrates the basic structure of a changeset file, including front matter for package and change type, and a user-oriented description.
```markdown
---
"@biomejs/biome": patch
---
Fixed [#1234](https://github.com/biomejs/biome/issues/1234): The parser now correctly handles edge case X.
```
--------------------------------
### Command Execution Example (Alternative)
Source: https://github.com/biomejs/biome/blob/main/crates/biome_markdown_formatter/tests/specs/markdown/indent_code_block.md
Presents an alternative way to show command execution in a Markdown list, highlighting slight variations in indentation.
```markdown
cd
```
--------------------------------
### Markdown Link Examples
Source: https://github.com/biomejs/biome/blob/main/crates/biome_markdown_formatter/tests/specs/prettier/markdown/markdown/test-case.md
Demonstrates various link syntaxes: standard with title, without title, and reference-style links.
```markdown
This is [an example](http://example.com "Example") link.
[This link](http://example.com) has no title attr.
These is [an] [example] of two shortcut reference-style links.
This is [an example][id] reference-style link.
[id]: http://example.com "Optional Title"
```
--------------------------------
### Console log in JavaScript
Source: https://github.com/biomejs/biome/blob/main/crates/biome_markdown_formatter/tests/specs/markdown/fenced_code_block_info_string.md
Basic JavaScript example demonstrating console output.
```javascript
console.log("hello");
```
--------------------------------
### Changeset Example for TypeScript `using` Declarations Feature
Source: https://github.com/biomejs/biome/blob/main/AGENTS.md
A concrete example of a changeset for a new feature, specifying the package, change type, and a user-focused explanation of new TypeScript syntax support.
```markdown
---
"@biomejs/biome": minor
---
Added support for parsing TypeScript 5.2 `using` declarations. Biome can now parse and format code using the new resource management syntax.
```
--------------------------------
### Command Execution Example
Source: https://github.com/biomejs/biome/blob/main/crates/biome_markdown_formatter/tests/specs/markdown/indent_code_block.md
Shows how to represent a command execution within a Markdown list item. This is useful for demonstrating shell commands.
```markdown
cd
```
--------------------------------
### Install Project Dependencies with Yarn
Source: https://github.com/biomejs/biome/blob/main/crates/biome_markdown_formatter/tests/specs/prettier/markdown/code/additional-space.md
Installs all project dependencies using Yarn package manager. This command reads the package.json and yarn.lock files to install required packages. Required before running or building the project.
```bash
yarn install
```
--------------------------------
### Conventional Commit Message Examples
Source: https://github.com/biomejs/biome/blob/main/AGENTS.md
Examples demonstrating the conventional commit format for different types of changes like features, fixes, documentation, and tests.
```text
feat(compiler): implement parsing for new type of files
fix: fix nasty unhandled error
docs: fix link to website page
test(lint): add more cases to handle invalid rules
```
--------------------------------
### Test Output Example
Source: https://github.com/biomejs/biome/blob/main/CONTRIBUTING.md
Example output when a single test is run using Cargo, showing the test result and statistics.
```shell
running 1 test
test quick_test::quick_test ... ok
test result: ok. 1 passed; 0 failed; 0 ignored; 0 measured; 224 filtered out; finished in 0.02s
```
--------------------------------
### Conventional Commit Message Examples
Source: https://github.com/biomejs/biome/blob/main/CLAUDE.md
Examples of well-formatted commit messages adhering to the conventional commit specification.
```txt
feat(compiler): implement parsing for new type of files
fix: fix nasty unhandled error
docs: fix link to website page
test(lint): add more cases to handle invalid rules
```
--------------------------------
### Shared configuration with rule options
Source: https://github.com/biomejs/biome/blob/main/crates/biome_analyze/CONTRIBUTING.md
Example JSON5 configuration file that defines shared rule options including behavior and behaviorExceptions that can be extended by user configurations.
```json5
// shared.jsonc
{
"linter": {
"rules": {
"nursery": {
"myRule": {
"level": "on",
"options": {
"behavior": "A",
"behaviorExceptions": ["e"],
}
}
}
}
}
}
```
--------------------------------
### Example Changeset Frontmatter
Source: https://github.com/biomejs/biome/blob/main/CLAUDE.md
Illustrates the frontmatter structure for a Biome changeset file, specifying package and change type.
```markdown
---
"@biomejs/biome": patch
---
Description here...
```
--------------------------------
### Markdown List Example
Source: https://github.com/biomejs/biome/blob/main/crates/biome_markdown_formatter/tests/specs/prettier/markdown/markdown/test-case.md
Demonstrates unordered lists using asterisks, plus signs, and hyphens. Useful for creating bulleted lists.
```markdown
- Red
- Green
- Blue
+ Red
+ Green
+ Blue
* Red
* Green
* Blue
```
--------------------------------
### Markdown Ordered List Example
Source: https://github.com/biomejs/biome/blob/main/crates/biome_markdown_formatter/tests/specs/prettier/markdown/markdown/test-case.md
Illustrates ordered lists using numbered items. Ensures sequential ordering of steps or items.
```markdown
1. Buy flour and salt
1. Mix together with water
1. Bake
```
--------------------------------
### Mixed List Markers and Edge Cases
Source: https://github.com/biomejs/biome/blob/main/crates/biome_markdown_parser/benches/fixtures/spec/lists.md
Examples demonstrating mixed ordered/unordered markers, invalid list syntax, and edge case handling.
```markdown
- one
two
```
```markdown
- one
two
```
```markdown
- one
two
```
```markdown
- one
two
```
```markdown
-one
2.two
```
```markdown
- foo
bar
```
```markdown
123456789. ok
```
```markdown
1234567890. not ok
```
```markdown
0. ok
```
```markdown
003. ok
```
```markdown
-1. not ok
```
```markdown
10. foo
bar
```
```markdown
- # Foo
- Bar
---
baz
```
```markdown
- foo
- bar
+ baz
```
```markdown
1. foo
2. bar
3) baz
```
```markdown
Foo
- bar
- baz
```
```markdown
The number of windows in my house is
14. The number of doors is 6.
```
```markdown
The number of windows in my house is
1. The number of doors is 6.
```
```markdown
- foo
- bar
- baz
```
```markdown
- foo
- bar
- baz
bim
```
```markdown
- foo
- bar
- baz
- bim
```
```markdown
- foo
bar
```
```markdown
- foo
bar
```
```markdown
-
foo
```
```markdown
-
baz
```
```markdown
-
foo
```
```markdown
-
foo
```
```markdown
- foo
-
- bar
```
```markdown
- foo
-
- bar
```
```markdown
1. foo
2.
3. bar
```
```markdown
*
```
```markdown
foo
*
```
```markdown
foo
1.
```
```markdown
* foo
* bar
baz
```
```markdown
- a
- b
- c
```
```markdown
* a
*
* c
```
```markdown
- a
- b
c
- d
```
```markdown
- a
- b
[ref]: /url
- d
```
```markdown
- a
- b
c
- d
```
```markdown
- a
- a
- b
```
--------------------------------
### Run Biome CLI in Development Mode
Source: https://github.com/biomejs/biome/blob/main/CONTRIBUTING.md
Use cargo to execute the Biome CLI in development mode, for example, to view the help message.
```bash
# This is like running "biome --help"
cargo biome-cli-dev --help
```
--------------------------------
### Clone Biome Repository
Source: https://github.com/biomejs/biome/blob/main/CLAUDE.md
Clone the Biome repository locally to start development. Navigate into the cloned directory to access development tools.
```bash
git clone https://github.com/biomejs/biome
cd biome
```
--------------------------------
### Inline Code at Line Start
Source: https://github.com/biomejs/biome/blob/main/crates/biome_markdown_formatter/tests/specs/markdown/inline_code.md
Illustrates inline code appearing at the beginning of a line.
```markdown
`code at start` of a line.
```
--------------------------------
### Define Vortex Configuration (TypeScript)
Source: https://github.com/biomejs/biome/blob/main/crates/biome_markdown_parser/benches/fixtures/real/readme-style.md
Example of a vortex.config.ts file, defining entry point, output settings, and path aliases for module resolution.
```typescript
import { defineConfig } from "vortex-bundler";
export default defineConfig({
entry: "./src/index.ts",
output: {
dir: "dist",
format: "esm"
},
resolve: {
alias: {
"@": "./src"
}
}
});
```
--------------------------------
### Markdown Image Example
Source: https://github.com/biomejs/biome/blob/main/crates/biome_markdown_formatter/tests/specs/prettier/markdown/markdown/test-case.md
Demonstrates how to embed an image using Markdown syntax, including alt text and an optional title.
```markdown

```
--------------------------------
### Demonstrate deeply nested HTML elements
Source: https://github.com/biomejs/biome/blob/main/crates/biome_markdown_parser/benches/fixtures/synthetic/inline-html.md
This example illustrates how HTML elements can be nested within each other to create complex document structures.
```html
deeply nested
```
--------------------------------
### Install biome_js_formatter Crate via Cargo.toml
Source: https://github.com/biomejs/biome/blob/main/crates/biome_js_formatter/CONTRIBUTING.md
Add the biome_js_formatter dependency to your Cargo.toml file with a local path reference. This internal installation method is used when developing within the Biome project structure.
```toml
biome_js_formatter = { version = "0.0.1", path = "../biome_js_formatter" }
```
--------------------------------
### Examples of HTML void elements
Source: https://github.com/biomejs/biome/blob/main/crates/biome_markdown_parser/benches/fixtures/synthetic/inline-html.md
Void elements are HTML elements that cannot have any child nodes (i.e., they cannot contain other elements or text). They only have a start tag; end tags must not be specified.
```html
```
```html
```
```html
```
```html
```
```html
```
```html
```
```html
```
```html
```
```html
```
```html
```
--------------------------------
### FUNCTION preview(options: PreviewOptions)
Source: https://github.com/biomejs/biome/blob/main/crates/biome_markdown_parser/benches/fixtures/real/readme-style.md
Launches a local server to preview the production build output.
```APIDOC
## FUNCTION preview(options: PreviewOptions)
### Description
Preview a production build.
### Method
Function
### Endpoint
preview(options: PreviewOptions)
### Parameters
#### Request Body
- **options** (PreviewOptions) - Required - Configuration for the preview server.
### Response
#### Success Response (200)
- **server** (PreviewServer) - Instance of the preview server.
```
--------------------------------
### Generate Biome Formatter Boilerplate Code
Source: https://github.com/biomejs/biome/blob/main/crates/biome_formatter/CONTRIBUTING.md
Executing this command automates the generation of boilerplate formatter code within the language-specific `src/` directory. It also sets up the module structure (`mod.rs` files) and provides default `FormatNodeRule` implementations, simplifying the initial setup process.
```shell
just gen-formatter
```
--------------------------------
### Debug Formatter Output with dbg_write! Macro
Source: https://github.com/biomejs/biome/blob/main/crates/biome_js_formatter/CONTRIBUTING.md
Demonstrates using the dbg_write! macro to inspect intermediate representation (IR) elements written to the formatter. This debugging tool outputs format arguments to the console with file location and index information, similar to Rust's dbg! macro.
```rust
dbg_write!(f, [
token("hello"),
space_token(),
token("world")
])?;
// Writes
// [src/main.rs:1][0] = StaticToken("hello")
// [src/main.rs:1][1] = Space
// [src/main.rs:1][0] = StaticToken("world")
```
--------------------------------
### Build Production Binary with Version
Source: https://github.com/biomejs/biome/blob/main/CLAUDE.md
Build a production binary using the --release flag and set the BIOME_VERSION environment variable to disable nursery rules.
```shell
BIOME_VERSION=0.0.1 cargo build --bin biome --release
```
--------------------------------
### Use Mandatory AST Node Tokens Instead of Hardcoded Strings
Source: https://github.com/biomejs/biome/blob/main/crates/biome_js_formatter/CONTRIBUTING.md
Shows the recommended pattern for formatting AST nodes: use actual token methods like node.l_paren_token().format() instead of hardcoding token strings. This ensures the formatter uses authentic AST information when available.
```rust
fn fmt_fields(node: Node, f: &mut JsFormatter) -> FormatResult<()> {
write!(f, [node.l_paren_token().format()])?; // yes
write!(f, [token("(")])?; // no
}
```
--------------------------------
### Extended Token Presence Test in Rust Parser Rule
Source: https://github.com/biomejs/biome/blob/main/crates/biome_parser/CONTRIBUTING.md
This example expands on the presence test by checking for multiple possible starting tokens (`T![if]` or `T![else]`) before returning `Absent`. This more flexible approach allows the rule to consider variations and potentially create a partially formed node if only certain children are present, aiding in error resilience.
```Rust
if !p.at(T![if]) && !p.at(T![else]){
return Absent
}
```
--------------------------------
### Build Development Binary
Source: https://github.com/biomejs/biome/blob/main/CLAUDE.md
Run this command from the repository root to create a development binary for debugging.
```shell
cargo build --bin biome
```
--------------------------------
### Generate Formatter Code and Apply Project Formatting/Linting
Source: https://github.com/biomejs/biome/blob/main/AGENTS.md
Run these 'just' commands to generate formatter-related code and then apply project-wide formatting and linting.
```shell
just gen-formatter
just f && just l
```
--------------------------------
### Implement Format Trait for Custom Rust Struct
Source: https://github.com/biomejs/biome/blob/main/crates/biome_js_formatter/CONTRIBUTING.md
Demonstrates how to implement the Format trait for a custom struct (Buzz) by importing FormatNode and related utilities from biome_js_formatter prelude. The fmt method receives a JsFormatter reference and uses write! macro with format arguments like token() and dynamic_token() to define formatting behavior.
```rust
use biome_js_formatter::prelude::*;
use biome_formatter::{write, format_args};
struct Buzz {
blast: String
}
impl Format for Buzz {
fn fmt(&self, f: &mut JsFormatter) -> FormatResult<()> {
// implementation goes here
write!(f, [token("Hello"), dynamic_token(&self.blast)])
}
}
```
--------------------------------
### Implementing a Custom Syntax Tree Visitor for Biome Analyze
Source: https://github.com/biomejs/biome/blob/main/crates/biome_analyze/CONTRIBUTING.md
Demonstrates how to create a custom `Visitor` and `Queryable` type to efficiently traverse the syntax tree and emit query matches for lint rules, using the `useYield` rule as an example.
```rust
// First, create a visitor struct that holds a stack of function syntax nodes and booleans
#[derive(Default)]
struct MissingYieldVisitor {
stack: Vec<(AnyFunctionLike, bool)>,
}
// Implement the `Visitor` trait for this struct
impl Visitor for MissingYieldVisitor {
type Language = JsLanguage;
fn visit(
&mut self,
event: &WalkEvent>,
mut ctx: VisitorContext,
) {
match event {
WalkEvent::Enter(node) => {
// When the visitor enters a function node, push a new entry on the stack
if let Some(node) = AnyFunctionLike::cast_ref(node) {
self.stack.push((node, false));
}
if let Some((_, has_yield)) = self.stack.last_mut() {
// When the visitor enters a `yield` expression, set the
// `has_yield` flag for the top entry on the stack to `true`
if JsYieldExpression::can_cast(node.kind()) {
*has_yield = true;
}
}
}
WalkEvent::Leave(node) => {
// When the visitor exits a function, if it matches the node of the top-most
// entry of the stack and the `has_yield` flag is `false`, emit a query match
if let Some(exit_node) = AnyFunctionLike::cast_ref(node) {
if let Some((enter_node, has_yield)) = self.stack.pop() {
debug_assert_eq!(enter_node, exit_node);
if !has_yield {
ctx.match_query(MissingYield(enter_node));
}
}
}
}
}
}
}
// Declare a query match struct type containing a JavaScript function node
pub(crate) struct MissingYield(AnyFunctionLike);
impl QueryMatch for MissingYield {
fn text_range(&self) -> TextRange {
self.0.range()
}
}
// Implement the `Queryable` trait for this type
impl Queryable for MissingYield {
// `Input` is the type that `ctx.match_query()` is called with in the visitor
type Input = Self;
type Language = JsLanguage;
// `Output` if the type that `ctx.query()` will return in the rule
type Output = AnyFunctionLike;
type Services = ();
fn build_visitor(
analyzer: &mut impl AddVisitor,
_: &::Root,
) {
// Register our custom visitor to run in the `Syntax` phase
analyzer.add_visitor(Phases::Syntax, MissingYieldVisitor::default);
}
// Extract the output object from the input type
fn unwrap_match(services: &ServiceBag, query: &Self::Input) -> Self::Output {
query.0.clone()
}
}
impl Rule for UseYield {
// Declare the custom `MissingYield` queryable as the rule's query
type Query = MissingYield;
fn run(ctx: &RuleContext) -> Self::Signals {
// Read the function's root node from the queryable output
let query: &AnyFunctionLike = ctx.query();
// ...
}
}
```
--------------------------------
### Configure Grid Auto-Columns with Multiple Track Sizes
Source: https://github.com/biomejs/biome/blob/main/crates/biome_markdown_formatter/tests/specs/prettier/markdown/code/mdn-grid-auto-columns.md
Demonstrates the use of keywords, lengths, percentages, and flexible units to define implicit grid columns. Includes examples of minmax() and fit-content() functions for complex sizing logic.
```css
/* multiple track-size values */
grid-auto-columns: min-content max-content auto;
grid-auto-columns: 100px 150px 390px;
grid-auto-columns: 10% 33.3%;
grid-auto-columns: 0.5fr 3fr 1fr;
grid-auto-columns: minmax(100px, auto) minmax(max-content, 2fr) minmax(20%, 80vmax);
grid-auto-columns: 100px minmax(100px, auto) 10% 0.5fr fit-content(400px);
```
--------------------------------
### Configuring a Rule Filter for Quick Testing in Rust
Source: https://github.com/biomejs/biome/blob/main/crates/biome_analyze/CONTRIBUTING.md
Shows how to set up a `RuleFilter` to target a specific rule for quick testing within the `quick_test.rs` file.
```rust
let rule_filter = RuleFilter::Rule("nursery", "useAwesomeTrick");
```
--------------------------------
### Install Biome Nightly Release
Source: https://github.com/biomejs/biome/blob/main/crates/biome_js_formatter/report-challenge.md
Install the latest nightly release of Biome for testing. This command ensures you have the most up-to-date version for evaluation.
```sh
npm install -D @biomejs/biome@1.3.3-nightly.ced82da
```
--------------------------------
### Markdown Link Formatting Examples
Source: https://github.com/biomejs/biome/blob/main/crates/biome_markdown_parser/tests/md_test_suite/ok/inline_link_whitespace.md
Use these examples to test Markdown parser compliance regarding whitespace and line breaks in link attributes.
```markdown
[link]( /uri
"title" )
```
```markdown
[link](/url "title
continued")
```
```markdown
[link](/uri
"title")
```
```markdown
[link]( /url)
```
```markdown
[link](/url )
```
--------------------------------
### Markdown Code Block Example
Source: https://github.com/biomejs/biome/blob/main/crates/biome_markdown_formatter/tests/specs/prettier/markdown/markdown/test-case.md
Displays a Markdown code block using triple backticks, often used for multi-line code examples or preformatted text.
```markdown
```markdown
- Red
- Green
- Blue
+ Red
+ Green
+ Blue
* Red
* Green
* Blue
```
```
--------------------------------
### Configure LSP Client to Use Custom Binary
Source: https://github.com/biomejs/biome/blob/main/CLAUDE.md
Provide the absolute path to the development binary in the LSP client's configuration for debugging.
```json
{
"biome.lsp.bin": "/Users/john/www/biome/target/debug/biome"
}
```
--------------------------------
### Brief PR Description Example for Bug Fix
Source: https://github.com/biomejs/biome/blob/main/AGENTS.md
Example of a concise PR description for a bug fix, combining the magic comment with a short explanation of the fix.
```markdown
Fixes #1234
The parser now correctly handles edge case X.
```
--------------------------------
### Changeset Example for TypeScript `satisfies` Operator Fix
Source: https://github.com/biomejs/biome/blob/main/AGENTS.md
A concrete example of a changeset for a bug fix, detailing the package, change type, and a user-facing description for a parser improvement.
```markdown
---
"@biomejs/biome": patch
---
Fixed [#1234](https://github.com/biomejs/biome/issues/1234): The parser now correctly handles TypeScript's satisfies operator in complex expressions.
```
--------------------------------
### Run All Project Tests (Shell)
Source: https://github.com/biomejs/biome/blob/main/AGENTS.md
Execute this command to run the entire test suite for the Biome project. This is a general command for verifying changes.
```shell
cargo test
```
--------------------------------
### Generated Test Function Example in Rust
Source: https://github.com/biomejs/biome/blob/main/crates/tests_macros/README.md
This snippet shows an example of a test function automatically generated by the `gen_tests!` macro. It calls the user-defined `run_test` function with paths to the test file and its expected output.
```rust
#[test]
pub fn somefilename()
{
let test_file = "/tests/sometest.txt";
let test_expected_file = "/tests/sometest.expected.txt";
run_test(test_file, test_expected_file);
}
```
--------------------------------
### FUNCTION build(options: BuildOptions)
Source: https://github.com/biomejs/biome/blob/main/crates/biome_markdown_parser/benches/fixtures/real/readme-style.md
Executes a production build process using the provided configuration options. Returns a promise that resolves with build results including outputs and diagnostics.
```APIDOC
## FUNCTION build(options: BuildOptions)
### Description
Run a production build.
### Method
Function
### Endpoint
build(options: BuildOptions)
### Parameters
#### Request Body
- **options** (BuildOptions) - Required - Configuration for the build process.
### Request Example
{
"entry": "./src/index.ts",
"output": {
"dir": "dist",
"format": "esm"
}
}
### Response
#### Success Response (200)
- **outputs** (OutputFile[]) - Generated output files
- **duration** (number) - Build duration in milliseconds
- **errors** (Diagnostic[]) - Build errors, if any
- **warnings** (Diagnostic[]) - Build warnings
#### Response Example
{
"outputs": [],
"duration": 120,
"errors": [],
"warnings": []
}
```
--------------------------------
### JavaScript Weak Typing and Implicit Type Coercion Examples
Source: https://github.com/biomejs/biome/blob/main/crates/biome_html_parser/benches/fixtures/real/wikipedia-JavaScript.html
This section demonstrates JavaScript's weak typing behavior through various examples of implicit type coercion. It illustrates how the `+` and `-` operators handle different operand types, leading to conversions between strings, numbers, arrays, and objects. The examples highlight common scenarios where JavaScript automatically casts values based on the operation.
```javascript
// Binary '+' operator examples
[] + [] // Result: "" (empty string)
[] + {} // Result: "[object Object]" (string)
false + [] // Result: "false" (string)
"123" + 1 // Result: "1231" (string)
// Binary '-' operator examples
"123" - 1 // Result: 122 (number)
"123" - "abc" // Result: NaN (number)
```
--------------------------------
### Example JavaScript Array Structure for Parsing
Source: https://github.com/biomejs/biome/blob/main/crates/biome_parser/CONTRIBUTING.md
This snippet shows a basic JavaScript array, serving as an example of a common list structure that the Biome parser needs to process and robustly recover from potential errors within.
```javascript
[ 1, 3, 6 ]
```
--------------------------------
### Run Prettier from the Command Line Interface (CLI)
Source: https://github.com/biomejs/biome/blob/main/crates/biome_markdown_formatter/tests/specs/prettier/markdown/markdown/real-world-case.md
Explains how to invoke Prettier via the command line, including its basic syntax and an example of formatting JavaScript files with specific options. It emphasizes quoting glob patterns for cross-platform compatibility and using `--write` for in-place formatting.
```bash
prettier [opts] [filename ...]
```
```bash
prettier --single-quote --trailing-comma es5 --write "{app,__{tests,mocks}__}/**/*.js"
```
--------------------------------
### Install Biome JavaScript API and WASM Distribution
Source: https://github.com/biomejs/biome/blob/main/packages/@biomejs/js-api/README.md
Install the main Biome JavaScript API package along with a peer dependency WASM distribution. Choose one of three distributions based on your environment: bundler, Node.js, or web platform.
```shell
npm i @biomejs/js-api
npm i @biomejs/wasm-
```
--------------------------------
### Create a basic HTML table
Source: https://github.com/biomejs/biome/blob/main/crates/biome_markdown_parser/benches/fixtures/synthetic/inline-html.md
Demonstrates the fundamental structure of an HTML table, including `` for headers and `` for data rows and cells.
```html
Header 1
Header 2
Cell 1
Cell 2
Cell 3
Cell 4
```
--------------------------------
### Install Prettier as a Development Dependency or Globally
Source: https://github.com/biomejs/biome/blob/main/crates/biome_markdown_formatter/tests/specs/prettier/markdown/markdown/real-world-case.md
Provides commands for installing Prettier using both Yarn and npm, either as a project-specific development dependency (recommended for version pinning) or globally for system-wide access. Pinning the exact version is advised to prevent unexpected stylistic changes.
```bash
yarn add prettier --dev --exact
```
```bash
yarn global add prettier
```
```bash
npm install --save-dev --save-exact prettier
```
```bash
npm install --global prettier
```
--------------------------------
### Rust Inline Code Snippet
Source: https://github.com/biomejs/biome/blob/main/crates/biome_markdown_formatter/tests/specs/markdown/inline_code.md
An example of a Rust function represented as inline code.
```rust
fn main() { println!("hello"); }
```
--------------------------------
### Running Quick Tests for Biome Rules
Source: https://github.com/biomejs/biome/blob/main/crates/biome_analyze/CONTRIBUTING.md
Command to navigate to the `biome_js_analyze` crate and execute the quick tests for a rule using `cargo`.
```shell
cd crates/biome_js_analyze
cargo t quick_test
```
--------------------------------
### Basic Code Fence
Source: https://github.com/biomejs/biome/blob/main/crates/biome_markdown_parser/tests/md_test_suite/ok/fenced_code_advanced.html
Standard triple-backtick code fence for basic code examples.
```text
code
```
--------------------------------
### Rule Configuration with Dependent Code Snippets
Source: https://github.com/biomejs/biome/blob/main/crates/biome_analyze/CONTRIBUTING.md
Demonstrates how a rule configuration can be followed by code snippets that apply those options, marked with `use_options`.
```json
{
"options": {
"your-custom-option": "..."
}
}
```
```js
var some_valid_example = true;
```
```js
var this_should_trigger_the_rule = true;
```
--------------------------------
### JavaScript Fenced Code Block
Source: https://github.com/biomejs/biome/blob/main/crates/biome_markdown_formatter/tests/specs/markdown/fenced_code_block.md
A basic JavaScript example within a fenced code block.
```javascript
console.log("hello world!");
```
--------------------------------
### Locating and Using Prettier Configuration Files via CLI
Source: https://github.com/biomejs/biome/blob/main/crates/biome_markdown_formatter/tests/specs/prettier/markdown/markdown/real-world-case.md
This snippet demonstrates how to first locate a Prettier configuration file using `--find-config-path` and then apply that specific configuration to format a file using the `--config` flag. This approach helps optimize performance by reusing the configuration path for multiple formatting operations.
```bash
prettier --find-config-path ./my/file.js
./my/.prettierrc
```
```bash
prettier --config ./my/.prettierrc --write ./my/file.js
```
--------------------------------
### Displaying Basic HTML Tags in Markdown
Source: https://github.com/biomejs/biome/blob/main/crates/biome_html_formatter/tests/specs/prettier/html/prettier_ignore/issue-15738.html
This snippet provides an example of an HTML block, demonstrating how HTML tags are represented within a markdown document. It showcases basic HTML elements like paragraphs, spans, and divs, along with inline code tags. The purpose is to illustrate the structure of a simple HTML fragment.
```html
Look at these HTML tags
They aren't being interpreted as actual HTML
```
--------------------------------
### Link Biome WebAssembly and JSON-RPC Bindings
Source: https://github.com/biomejs/biome/blob/main/CLAUDE.md
Installs and links the WebAssembly and JSON-RPC bindings for the Biome JavaScript API.
```shell
pnpm i --filter "@biomejs/js-api" --frozen-lockfile
```
--------------------------------
### Format Files with Biome CLI
Source: https://github.com/biomejs/biome/blob/main/README.md
Use this command to format your project files. The `--write` flag applies the changes directly to the files.
```shell
npx @biomejs/biome format --write
```
--------------------------------
### Configure Rule Options in JSON
Source: https://github.com/biomejs/biome/blob/main/crates/biome_analyze/CONTRIBUTING.md
Example of how to define rule-specific options in JSON, setting the `ignoreSiblings` property to `true`.
```json
{
"options": {
"ignoreSiblings": true
}
}
```
--------------------------------
### Configuring Rule Options in biome.json (JSON)
Source: https://github.com/biomejs/biome/blob/main/crates/biome_analyze/CONTRIBUTING.md
Shows an example of how to configure custom options for a specific rule (`myRule`) within the `biome.json` linter settings. Options are nested under the `options` key for the rule.
```json
{
"linter": {
"rules": {
"enabled": true,
"nursery": {
"myRule": {
"level": "on",
"options": {
"behavior": "A",
"threshold": 30,
"behaviorExceptions": ["f"]
}
}
}
}
}
}
```
--------------------------------
### Prettier JavaScript formatting: Multi-line function call transformation
Source: https://github.com/biomejs/biome/blob/main/crates/biome_markdown_formatter/tests/specs/prettier/markdown/markdown/real-world-case.md
These JavaScript snippets illustrate how Prettier transforms a long function call with many arguments. The first example shows the code before formatting, exceeding the typical print width. The second example demonstrates Prettier's output, where arguments are wrapped onto new lines and consistently indented for improved readability.
```js
foo(reallyLongArg(), omgSoManyParameters(), IShouldRefactorThis(), isThereSeriouslyAnotherOne());
```
```js
foo(
reallyLongArg(),
omgSoManyParameters(),
IShouldRefactorThis(),
isThereSeriouslyAnotherOne()
);
```
--------------------------------
### Run Tests with Cargo Commands
Source: https://github.com/biomejs/biome/blob/main/crates/tests_macros/README.md
These commands demonstrate how to execute tests using Cargo, ranging from running all tests in a project to targeting specific crates, modules, or individual test functions.
```bash
> cargo test // all tests in all crates
> cargo test -p crate-name // all tests of one crate
> cargo test -p crate-name -- some_mod:: // all tests of one crate and one module
> cargo test -p crate-name -- some_mod::somefilename // just one test
```
--------------------------------
### Complex Nested List Structures
Source: https://github.com/biomejs/biome/blob/main/crates/biome_markdown_parser/benches/fixtures/spec/lists.md
Examples of deeply nested lists with various indentation levels and mixed list markers.
```markdown
- foo
- bar
- baz
- boo
```
```markdown
- foo
- bar
- baz
- boo
```
```markdown
10) foo
- bar
```
```markdown
10) foo
- bar
```
```markdown
- - foo
```
```markdown
1. - 2. foo
```
```markdown
- a
- b
- c
- d
- e
- f
- g
```
```markdown
1. a
2. b
3. c
```
```markdown
- a
- b
- c
- d
- e
```
```markdown
1. a
2. b
3. c
```
```markdown
- a
- b
c
- d
```
```markdown
- a
- b
- c
- d
- e
- f
```
--------------------------------
### Top-level Indented Code Block
Source: https://github.com/biomejs/biome/blob/main/crates/biome_markdown_formatter/tests/specs/markdown/indent_code_block.md
Demonstrates a top-level indented code block in Markdown. Use this for simple code examples.
```markdown
Top-level indented code
```