Conversation
Co-authored-by: Carson McManus <dyc3@users.noreply.github.com> Co-authored-by: dyc3 <1808807+dyc3@users.noreply.github.com> Co-authored-by: chansuke <501052+chansuke@users.noreply.github.com>
# Conflicts: # Cargo.lock # Cargo.toml # package.json # pnpm-lock.yaml # src/pages/metadata/rules.json.js
# Conflicts: # Cargo.lock # Cargo.toml # package.json # pnpm-lock.yaml # src/components/generated/linter/NumberOfRules.astro # src/content/docs/linter/domains.mdx # src/content/docs/linter/html/rules.mdx # src/content/docs/linter/javascript/rules.mdx # src/content/docs/linter/rules/no-proto.mdx # src/content/docs/linter/rules/no-undeclared-env-vars.mdx # src/content/docs/linter/rules/no-useless-undefined.mdx # src/content/docs/linter/rules/use-spread.mdx # src/pages/metadata/rules.json.js # src/playground/workers/prettierWorker.ts
Co-authored-by: dyc3 <1808807+dyc3@users.noreply.github.com>
✅ Deploy Preview for biomejs ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
ematipico
changed the title
a248e88 (#3565)next to main
Co-authored-by: Carson McManus <dyc3@users.noreply.github.com>
|
Note Reviews pausedIt looks like this branch is under active development. To avoid overwhelming you with review comments due to an influx of new commits, CodeRabbit has automatically paused this review. You can configure this behavior by changing the Use the following commands to manage reviews:
Use the checkboxes below for quick actions:
WalkthroughThis PR updates website content and codegen to ship Biome v2.4. Changes include extensive documentation additions and reclassifications (many linter rules moved between groups), new HTML accessibility rules and HTML-specific docs tabs, new assist action docs, SARIF reporter docs, addition of a Types domain and corresponding codegen changes (JSON member naming and domain rendering), dependency and tooling bumps/formatting changes, and several new/modified frontend components and docs (including the biome-v2-4 blog post). Possibly related PRs
Suggested reviewers
🚥 Pre-merge checks | ✅ 3✅ Passed checks (3 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing touches🧪 Generate unit tests (beta)
Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 13
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (2)
src/content/docs/linter/domains.mdx (1)
320-322:⚠️ Potential issue | 🟠 MajorFix the malformed admonition closing syntax in the codegen source.
The generated file contains
:::#instead of:::to close admonition blocks at lines 321 and 364. This is hardcoded incodegen/src/domains.rs:221and will cause rendering issues. Update the codegen template to close admonitions properly on a separate line.Source location
codegen/src/domains.rs:221— the note string should end with:::\n"instead of.:::#"src/components/EditorSettings.astro (1)
6-31:⚠️ Potential issue | 🟠 MajorHandle object values in JSON interpolation.
Line 6 allows
objectforzed.value, but line 21 interpolates directly into the template string. If an object is passed, it'll render as[object Object], breaking the JSON. Serialise objects to JSON before embedding.Suggested fix
const { zed, vsCode } = Astro.props; +const formatSettingValue = (value) => + typeof value === "string" ? value : JSON.stringify(value, null, 2); const zedCode = ` { "lsp": { "biome": { "settings": { - "${zed.name}": ${zed.value} + "${zed.name}": ${formatSettingValue(zed.value)} } } } } `;
🤖 Fix all issues with AI agents
In `@codegen/src/lintdoc.rs`:
- Around line 1737-1741: The call in DocumentFileSource::Css currently passes
three args to biome_css_parser::parse_css (code, file_source, parse_options) but
parse_css only accepts (source: &str, options: CssParserOptions); remove the
file_source argument and pass only code and parse_options (or, if file context
is needed, construct options from file_source similar to
JsonParserOptions::from(&file_source) by using
CssParserOptions::from(&file_source) before calling
biome_css_parser::parse_css). Ensure you update the invocation of
biome_css_parser::parse_css and any creation of parse_options accordingly.
In `@src/content/docs/blog/biome-v2-4.mdx`:
- Line 123: There are two inconsistent option names referenced:
html.experimentalFullSupportEnabled and experimentalFullHtmlSupportEnabled;
check the real configuration key in the codebase (the config definition or
TypeScript type) and standardize the post to use that exact identifier
everywhere—replace all occurrences of the incorrect variant (either
html.experimentalFullSupportEnabled or experimentalFullHtmlSupportEnabled) with
the canonical name and update any surrounding text so it matches the official
config symbol (e.g., use experimentalFullHtmlSupportEnabled if that is the real
option).
In `@src/content/docs/guides/configure-biome.mdx`:
- Around line 308-310: Move the `.vscode` and `.zed` entries out of their
current list and add them to the comments-only section (the same section that
lists `.eslintrc.json` and `tslint.json`) ensuring the text states Biome treats
these as JSONC (comments allowed) but does not allow trailing commas; leave the
`.cursor` entry in its current location unchanged since it supports comments and
trailing commas.
In `@src/content/docs/guides/editors/create-an-extension.mdx`:
- Line 102: Add a comma to the compound sentence in the paragraph that starts
"However, during local development, you want to disable this rule because it's
useful and you don't want to see red squiggles." — update the sentence around
the reference to `inline_config` so it reads "...because it's useful, and you
don't want to see red squiggles." to improve readability.
- Around line 58-73: Update the wording around require_configuration and
configuration_path to list all accepted config filenames: include both
biome.json/biome.jsonc and .biome.json/.biome.jsonc (and note that
configuration_path can point to the folder or file using any of those names);
modify the descriptions for the require_configuration example and the
configuration_path paragraph so they reference the full resolution list
(.biome.json, .biome.jsonc, biome.json, biome.jsonc) and clarify that the server
reads any of those files when provided.
In `@src/content/docs/internals/language-support.mdx`:
- Around line 56-58: Add a short note under the "## TypeScript support" section
(the heading text "## TypeScript support") mentioning that the IDE/config option
`javascript.experimentalEmbeddedSnippetsEnabled` also applies to TypeScript
(since TypeScript is a super-language of JavaScript) and briefly describe what
it enables (embedded languages/snippets support) and where to configure it; keep
it one or two sentences and link the config key text exactly as
`javascript.experimentalEmbeddedSnippetsEnabled` so readers can find the option
easily.
In `@src/content/docs/linter/javascript/rules.mdx`:
- Line 409: The table row for the rule "noUnusedExpressions" has a truncated
description; update the generator/source so the full human-readable intent is
written (e.g., "Disallow expression statements that are neither function calls
nor assignments, which have no effect") by replacing the current incomplete cell
for [noUnusedExpressions] with a complete sentence describing that it forbids
standalone expressions with no side effects; ensure the markdown table cell for
the rule's description (the row containing [noUnusedExpressions]) is fully
populated by the generator output.
In `@src/content/docs/linter/rules/no-prototype-builtins.mdx`:
- Line 21: Replace the repository-root link for `e18e/prefer-object-has-own`
with the rule-specific documentation URL: update the markdown link target
currently shown as `e18e/prefer-object-has-own` to point to
`https://github.com/e18e/eslint-plugin/blob/main/src/rules/prefer-object-has-own.ts`
(or the plugin README section if you want consistency with the ESLint
references), ensuring the display text remains the same and only the href is
replaced in the `no-prototype-builtins.mdx` content.
In `@src/content/docs/linter/rules/no-redundant-alt.mdx`:
- Around line 80-135: The HTML example snippets contain trailing semicolons
after self-closing tags (e.g., the invalid examples with `<img src="src"
alt="photo content" />;` and `<img alt="picture of cool person"
aria-hidden="false" />;` and the valid examples), which makes them invalid
HTML—remove the trailing `;` characters from those HTML lines so the examples
use valid tags (look for the `<img ... />;` occurrences in the examples and
change them to `<img ... />`).
In `@src/content/docs/linter/rules/no-value-at-rule.mdx`:
- Around line 40-44: The documentation contains an empty diagnostic output block
(<pre class="language-text"><code class="language-text"></code></pre>) after the
example in no-value-at-rule.mdx (and ~54 similar occurrences across rule docs);
update the generator or these files so the diagnostic block is either populated
with the expected lint output or removed when there is no diagnostic: locate the
example block titled 'example.module.css' and replace the empty <pre><code>
fragment with the actual diagnostic text produced by the rule (or remove the
empty fragment), and apply the same fix to other rule files produced by the same
codegen path so the systematic empty-block issue is resolved.
In `@src/content/docs/linter/rules/use-anchor-content.mdx`:
- Around line 110-118: The documentation currently claims the lint rule
[`lint/a11y/useAnchorContent`] is “recommended” and “enabled by default” while
the top note states it is “not released yet”; update the documentation
generation or the content in
src/content/docs/linter/rules/use-anchor-content.mdx so the summary bullets are
softened or deferred until release (e.g., remove or mark “recommended”/“enabled
by default” as pending/released-in-next-version) and ensure the note and summary
are consistent with each other and with the source generator outputs.
In `@src/content/docs/linter/rules/use-iterable-callback-return.mdx`:
- Around line 108-137: The documentation currently contradicts itself about the
default for the useIterableCallbackReturn rule option: reconcile the two places
so they state the same default for the "checkForEach" option (either change the
top "Default: `true`" to "Default: `false`" or update the later sentence "When
`checkForEach` is `false` (default)..." to use `true`) so that the option name
"checkForEach" and the rule name "useIterableCallbackReturn" consistently
reflect the actual default behavior across both the Default header and the
explanatory sentence.
In `@src/content/docs/linter/rules/use-spread.mdx`:
- Around line 20-22: Update the attribution sentence in the docs page to use
correct phrasing: replace the text "Inspired from
[`e18e/prefer-spread-syntax`](https://github.com/e18e/eslint-plugin)" with
"Inspired by
[`e18e/prefer-spread-syntax`](https://github.com/e18e/eslint-plugin)" in the
src/content/docs/linter/rules/use-spread.mdx sources list so the attribution
reads naturally.
🧹 Nitpick comments (10)
src/content/docs/linter/rules/use-import-extensions.mdx (1)
12-13: Tighten the note wording to avoid the “activate/activation” loop.
Small clarity tweak; e.g. “Enabling this rule turns on the Biome Scanner for your project files.”✍️ Suggested wording
-This rule belongs to the project domain. This means that its activation will activate the Biome Scanner to scan the files of your project. Read more about it in the [documentation page](/linter/domains#project) +This rule belongs to the project domain. Enabling it turns on the Biome Scanner to scan your project files. Read more about it in the [documentation page](/linter/domains#project)src/content/docs/linter/rules/use-iterable-callback-return.mdx (1)
106-108: Fix the “Since” markdown formatting.
Line 106 is missing a closing backtick and bold marker, so it won’t render as intended.Proposed fix
-**Since `v2.4.0** +**Since `v2.4.0`**src/components/Contributor.astro (2)
8-8: Consider renamingalttotitlefor clarity.The variable is used as the
titleattribute (tooltip), not analtattribute (which is for images). A name liketitleortooltipwould be clearer.✨ Suggested rename
-const alt = `Contributor @${handle}`; +const title = `Contributor @${handle}`;And in the template:
-<a class="handle" href={url} title={alt}> +<a class="handle" href={url} title={title}>
21-21: Prefer relative units forline-height.Fixed pixel values don't scale with user font-size preferences. A unitless value (e.g.,
1.5) or relative unit would be more accessible.✨ Suggested change
- line-height: 30px; + line-height: 1.5;src/content/docs/formatter/index.mdx (1)
126-132: Consider pairing the one‑line snippet with a tiny node. The standalone comment block could confuse newcomers; a single‑line example node would make it self‑contained.src/content/docs/blog/biome-v2-4.mdx (3)
93-101: Trailing commas in JSON examples may confuse readers.The JSON configuration examples within the
EditorSettingscomponent props contain trailing commas (lines 100 and 112). Whilebiome.jsoncsupports trailing commas, standardbiome.jsondoes not. Since users may copy these examples directly, consider removing the trailing commas for consistency with standard JSON syntax.
322-322: Missing hyperlink fornoUnknownFunction.The rules
noUnknownProperty,noUnknownPseudoClass, andnoUnknownPseudoElementin this sentence would benefit from consistent link formatting.noUnknownFunctionlacks a hyperlink whilst the others have one.
373-373: Potentially confusing rule name and description.The rule
useDeprecatedDatewith description "Enforces use of GraphQL@deprecateddirective with date" reads a bit confusingly. Consider clarifying in the description that the rule ensures@deprecateddirectives include a date argument, rather than appearing to encourage deprecated dates.src/content/docs/internals/language-support.mdx (1)
19-19: Minor table formatting inconsistency.Line 19 is missing the trailing spaces before the final
|that other rows have, which could cause rendering inconsistencies in some markdown parsers.🔧 Proposed fix
-| JSONC | <span aria-label="Supported" role="img">✅</span> | <span aria-label="Supported" role="img">✅</span> | <span aria-label="Supported" role="img">✅</span> | <span aria-label="Supported" role="img">✅</span>| +| JSONC | <span aria-label="Supported" role="img">✅</span> | <span aria-label="Supported" role="img">✅</span> | <span aria-label="Supported" role="img">✅</span> | <span aria-label="Supported" role="img">✅</span> |codegen/src/domains.rs (1)
126-132: Consider clarifying "flat types" terminology.The phrase "resolve and flat types" reads a bit oddly. Did you mean "resolve and flatten types" or is "flat types" an intentional term in Biome's type system?
| DocumentFileSource::Css(file_source) => { | ||
| let parse_options = CssParserOptions::default() | ||
| .allow_css_modules() | ||
| .allow_tailwind_directives(); | ||
| let parse = biome_css_parser::parse_css(code, parse_options); | ||
| let parse = biome_css_parser::parse_css(code, file_source, parse_options); |
There was a problem hiding this comment.
🧩 Analysis chain
🏁 Script executed:
#!/bin/bash
# Find the parse_css function definition
rg -n --type=rust 'pub fn parse_css\(' -A 5Repository: biomejs/website
Length of output: 41
🏁 Script executed:
#!/bin/bash
# Search for parse_css calls and biome_css_parser usage
rg 'parse_css' --type=rust -B 2 -A 2Repository: biomejs/website
Length of output: 380
🏁 Script executed:
#!/bin/bash
# Find Cargo.toml files and check for biome_css_parser dependency
find . -name "Cargo.toml" -type f | head -5
cat Cargo.toml 2>/dev/null || echo "No root Cargo.toml"
[ -f "codegen/Cargo.toml" ] && echo "=== codegen/Cargo.toml ===" && cat codegen/Cargo.tomlRepository: biomejs/website
Length of output: 5664
🏁 Script executed:
#!/bin/bash
# Check the context around the parse_css call in lintdoc.rs
cat -n codegen/src/lintdoc.rs | sed -n '1730,1750p'Repository: biomejs/website
Length of output: 962
🏁 Script executed:
#!/bin/bash
# Search for parse_css in a broader way, checking if there's any documentation or similar patterns
rg 'parse_css' codegen/src/lintdoc.rs -B 10 -A 10 | head -40Repository: biomejs/website
Length of output: 830
🏁 Script executed:
#!/bin/bash
# Check for similar parser calls in lintdoc.rs
rg 'parse_' codegen/src/lintdoc.rs --type=rust | grep -E 'biome_.*_parser::parse'Repository: biomejs/website
Length of output: 596
🏁 Script executed:
#!/bin/bash
# Let me check the types being used for file_source
rg 'DocumentFileSource' codegen/src/lintdoc.rs -B 5 -A 2 | head -50Repository: biomejs/website
Length of output: 1630
🏁 Script executed:
#!/bin/bash
# Check what types are being used for file_source in CSS context
rg 'DocumentFileSource::Css' codegen/src/lintdoc.rs -A 10 | head -30Repository: biomejs/website
Length of output: 579
🏁 Script executed:
#!/bin/bash
# Check the JS parser call for comparison
rg 'DocumentFileSource::Js' codegen/src/lintdoc.rs -A 15 | head -40Repository: biomejs/website
Length of output: 1879
🏁 Script executed:
#!/bin/bash
# Check imports and CssParserOptions definition
rg 'use.*Css' codegen/src/lintdoc.rs | head -20Repository: biomejs/website
Length of output: 177
🌐 Web query:
biome_css_parser parse_css function signature
💡 Result:
In biome_css_parser (latest docs.rs, v0.5.8), the function signature is:
pub fn parse_css(source: &str, options: CssParserOptions) -> CssParse[1] (docs.rs)
Citations:
Remove the file_source parameter from the parse_css call.
The parse_css function signature takes only two parameters: source: &str and options: CssParserOptions. The current code passes three parameters, which won't compile. Either remove file_source entirely or incorporate it into the options (similar to how parse_json uses JsonParserOptions::from(&file_source)).
🤖 Prompt for AI Agents
In `@codegen/src/lintdoc.rs` around lines 1737 - 1741, The call in
DocumentFileSource::Css currently passes three args to
biome_css_parser::parse_css (code, file_source, parse_options) but parse_css
only accepts (source: &str, options: CssParserOptions); remove the file_source
argument and pass only code and parse_options (or, if file context is needed,
construct options from file_source similar to
JsonParserOptions::from(&file_source) by using
CssParserOptions::from(&file_source) before calling
biome_css_parser::parse_css). Ensure you update the invocation of
biome_css_parser::parse_css and any creation of parse_options accordingly.
|
|
||
| Biome 2.4 brings significantly improved parsing for Vue and Svelte, resulting in better formatting across the board. Additionally, the rules `noUnusedVariables`, `useConst`, `useImportType` and `noUnusedImports` have been substantially improved, so you will see fewer false positives. | ||
|
|
||
| All these improvements are visible only when the flag `html.experimentalFullSupportEnabled` is set to `true`. If you previously used [the `overrides` configuration workaround](/internals/language-support/#linting-html-ish-languages) to disable certain rules, you can now remove it. If you encounter false positives, please report them in this [issue](https://github.com/biomejs/biome/issues/8590). We now have the infrastructure to address these problems. |
There was a problem hiding this comment.
Inconsistent configuration option naming.
Line 123 references html.experimentalFullSupportEnabled, but lines 466 and 602 reference experimentalFullHtmlSupportEnabled. Please verify which is the correct option name and use it consistently throughout the post.
🤖 Prompt for AI Agents
In `@src/content/docs/blog/biome-v2-4.mdx` at line 123, There are two inconsistent
option names referenced: html.experimentalFullSupportEnabled and
experimentalFullHtmlSupportEnabled; check the real configuration key in the
codebase (the config definition or TypeScript type) and standardize the post to
use that exact identifier everywhere—replace all occurrences of the incorrect
variant (either html.experimentalFullSupportEnabled or
experimentalFullHtmlSupportEnabled) with the canonical name and update any
surrounding text so it matches the official config symbol (e.g., use
experimentalFullHtmlSupportEnabled if that is the real option).
| - All `.json` files under the `$PROJECT/.vscode/*` folder and under the [user VSCode settings folder](https://code.visualstudio.com/docs/configure/settings#_user-settingsjson-location) | ||
| - All `.json` files under the `$PROJECT/.zed/*` folder and under the [user Zed settings folder](https://zed.dev/docs/configuring-zed#user-settings-file) | ||
| - All `.json` files under the `$PROJECT/.cursor/*` folder and under the user Cursor settings folder |
There was a problem hiding this comment.
🧩 Analysis chain
🏁 Script executed:
# Search for configuration related to vscode, zed, cursor in the repository
rg -i "vscode|\.zed|cursor" --max-count 20Repository: biomejs/website
Length of output: 26364
🏁 Script executed:
# Look for JSON/JSONC configuration or handling
rg -i "jsonc|json.*comment|trailing.*comma" --max-count 20Repository: biomejs/website
Length of output: 50374
🏁 Script executed:
# Search for the specific file mentioned in the review
find . -name "configure-biome.mdx" -type fRepository: biomejs/website
Length of output: 404
🏁 Script executed:
cat -n src/content/docs/guides/configure-biome.mdx | sed -n '290,330p'Repository: biomejs/website
Length of output: 970
🏁 Script executed:
cat -n src/content/docs/guides/configure-biome.mdx | sed -n '260,330p'Repository: biomejs/website
Length of output: 2021
🏁 Script executed:
# Check the changelog for the exact handling of these files
cat -n src/content/docs/internals/changelog_v1.md | grep -A 5 -B 5 "vscode\|\.zed" | head -40Repository: biomejs/website
Length of output: 2194
🏁 Script executed:
# Also check the Cursor support details
cat -n src/content/docs/blog/biome-v2-4.mdx | grep -A 5 -B 5 "Cursor Files"Repository: biomejs/website
Length of output: 558
Move .vscode and .zed settings to the comments-only section; .cursor stays where it is.
Lines 308–309 are incorrectly placed. Biome treats .vscode and .zed JSON files as JSONC (comments allowed) but does not allow trailing commas. They belong in the section starting at line 276 alongside .eslintrc.json and tslint.json.
Line 310 (.cursor) is correctly placed—Biome does parse it with both comments and trailing commas enabled.
🤖 Prompt for AI Agents
In `@src/content/docs/guides/configure-biome.mdx` around lines 308 - 310, Move the
`.vscode` and `.zed` entries out of their current list and add them to the
comments-only section (the same section that lists `.eslintrc.json` and
`tslint.json`) ensuring the text states Biome treats these as JSONC (comments
allowed) but does not allow trailing commas; leave the `.cursor` entry in its
current location unchanged since it supports comments and trailing commas.
| Whether the Biome Language Server requires a configuration file. When set to `true`, it won't analyze any file (except for parsing) until there's a `biome.json` file in the root of the project. | ||
|
|
||
| ```json | ||
| { | ||
| "require_configuration": true | ||
| } | ||
| ``` | ||
|
|
||
| #### `configuration_path` | ||
|
|
||
| > Type: `string` | ||
| > Default: `null` | ||
|
|
||
| A path to a custom configuration file. The path can be the folder where the `biome.json`/`biome.jsonc` is, or a path to a file. | ||
|
|
||
| The path can be relative or absolute. The Biome Language Server reads this option only when provided. Use this option when the configuration is *in a subfolder of your project*. |
There was a problem hiding this comment.
Align config file names with the new resolution list.
Line 58 and Line 71 only mention biome.json / biome.jsonc, but the guide now lists .biome.json / .biome.jsonc as valid too. Worth aligning for consistency.
✍️ Suggested wording tweak
- Whether the Biome Language Server requires a configuration file. When set to `true`, it won't analyze any file (except for parsing) until there's a `biome.json` file in the root of the project.
+ Whether the Biome Language Server requires a configuration file. When set to `true`, it won't analyze any file (except for parsing) until there's a `biome.json`/`biome.jsonc` (or `.biome.json`/`.biome.jsonc`) file in the root of the project.- A path to a custom configuration file. The path can be the folder where the `biome.json`/`biome.jsonc` is, or a path to a file.
+ A path to a custom configuration file. The path can be the folder where the `biome.json`/`biome.jsonc` (or `.biome.json`/`.biome.jsonc`) is, or a path to a file.🤖 Prompt for AI Agents
In `@src/content/docs/guides/editors/create-an-extension.mdx` around lines 58 -
73, Update the wording around require_configuration and configuration_path to
list all accepted config filenames: include both biome.json/biome.jsonc and
.biome.json/.biome.jsonc (and note that configuration_path can point to the
folder or file using any of those names); modify the descriptions for the
require_configuration example and the configuration_path paragraph so they
reference the full resolution list (.biome.json, .biome.jsonc, biome.json,
biome.jsonc) and clarify that the server reads any of those files when provided.
| } | ||
| ``` | ||
|
|
||
| However, during local development, you want to disable this rule because it's useful and you don't want to see red squiggles. In your `inline_config`, you would write something like the following: |
There was a problem hiding this comment.
Add the comma in the compound sentence.
Line 102 reads more smoothly with a comma before “and you don’t…”.
✍️ Suggested edit
- However, during local development, you want to disable this rule because it's useful and you don't want to see red squiggles.
+ However, during local development, you want to disable this rule because it's useful, and you don't want to see red squiggles.📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| However, during local development, you want to disable this rule because it's useful and you don't want to see red squiggles. In your `inline_config`, you would write something like the following: | |
| However, during local development, you want to disable this rule because it's useful, and you don't want to see red squiggles. In your `inline_config`, you would write something like the following: |
🧰 Tools
🪛 LanguageTool
[uncategorized] ~102-~102: Use a comma before ‘and’ if it connects two independent clauses (unless they are closely connected and short).
Context: ...to disable this rule because it's useful and you don't want to see red squiggles. In...
(COMMA_COMPOUND_SENTENCE)
🤖 Prompt for AI Agents
In `@src/content/docs/guides/editors/create-an-extension.mdx` at line 102, Add a
comma to the compound sentence in the paragraph that starts "However, during
local development, you want to disable this rule because it's useful and you
don't want to see red squiggles." — update the sentence around the reference to
`inline_config` so it reads "...because it's useful, and you don't want to see
red squiggles." to improve readability.
| </TabItem> | ||
| <TabItem label="HTML" icon="seti:html"> | ||
| :::note | ||
| This rule has been implemented but not released yet. It will be available in the next release. | ||
| ::: | ||
| ## Summary | ||
| - Diagnostic Category: [`lint/a11y/noRedundantAlt`](/reference/diagnostics#diagnostic-category) | ||
| - This rule is **recommended**, meaning it is enabled by default. | ||
| - This rule doesn't have a fix. | ||
| - The default severity of this rule is [**error**](/reference/diagnostics#error). | ||
| - Sources: | ||
| - Same as [`jsx-a11y/img-redundant-alt`](https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/main/docs/rules/img-redundant-alt.md) | ||
|
|
||
| ## How to configure | ||
| ```json title="biome.json" | ||
| { | ||
| "linter": { | ||
| "rules": { | ||
| "a11y": { | ||
| "noRedundantAlt": "error" | ||
| } | ||
| } | ||
| } | ||
| } | ||
|
|
||
| ``` | ||
| ## Description | ||
| Enforce `img` alt prop does not contain the word "image", "picture", or "photo". | ||
|
|
||
| The rule will first check if `aria-hidden` is truthy to determine whether to enforce the rule. If the image is | ||
| hidden, then the rule will always succeed. | ||
|
|
||
| ## Examples | ||
|
|
||
| ### Invalid | ||
|
|
||
| ```html | ||
| <img src="src" alt="photo content" />; | ||
| ``` | ||
|
|
||
| <pre class="language-text"><code class="language-text">code-block.html:1:20 <a href="https://biomejs.dev/linter/rules/no-redundant-alt">lint/a11y/noRedundantAlt</a> ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━<br /><br /> <strong><span style="color: Tomato;">✖</span></strong> <span style="color: Tomato;">Avoid the words "image", "picture", or "photo" in </span><span style="color: Tomato;"><strong>img</strong></span><span style="color: Tomato;"> element alt text.</span><br /> <br /> <strong><span style="color: Tomato;">></span></strong> <strong>1 │ </strong><img src="src" alt="photo content" />;<br /> <strong> │ </strong> <strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><br /> <strong>2 │ </strong><br /> <br /> <strong><span style="color: lightgreen;">ℹ</span></strong> <span style="color: lightgreen;">Screen readers announce img elements as "images", so it is not necessary to redeclare this in alternative text.</span><br /> <br /></code></pre> | ||
|
|
||
| ```html | ||
| <img alt="picture of cool person" aria-hidden="false" />; | ||
| ``` | ||
|
|
||
| <pre class="language-text"><code class="language-text">code-block.html:1:10 <a href="https://biomejs.dev/linter/rules/no-redundant-alt">lint/a11y/noRedundantAlt</a> ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━<br /><br /> <strong><span style="color: Tomato;">✖</span></strong> <span style="color: Tomato;">Avoid the words "image", "picture", or "photo" in </span><span style="color: Tomato;"><strong>img</strong></span><span style="color: Tomato;"> element alt text.</span><br /> <br /> <strong><span style="color: Tomato;">></span></strong> <strong>1 │ </strong><img alt="picture of cool person" aria-hidden="false" />;<br /> <strong> │ </strong> <strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><br /> <strong>2 │ </strong><br /> <br /> <strong><span style="color: lightgreen;">ℹ</span></strong> <span style="color: lightgreen;">Screen readers announce img elements as "images", so it is not necessary to redeclare this in alternative text.</span><br /> <br /></code></pre> | ||
|
|
||
| ### Valid | ||
|
|
||
| ```html | ||
| <div> | ||
| <img src="src" alt="alt" /> | ||
| <img src="bar" aria-hidden alt="Picture of me taking a photo of an image" /> | ||
| </div> | ||
| ``` |
There was a problem hiding this comment.
Remove semicolons from HTML snippets.
The HTML examples currently include trailing ;, which makes the snippets invalid HTML.
🛠️ Suggested fix
-<img src="src" alt="photo content" />;
+<img src="src" alt="photo content" />-<img alt="picture of cool person" aria-hidden="false" />;
+<img alt="picture of cool person" aria-hidden="false" />🤖 Prompt for AI Agents
In `@src/content/docs/linter/rules/no-redundant-alt.mdx` around lines 80 - 135,
The HTML example snippets contain trailing semicolons after self-closing tags
(e.g., the invalid examples with `<img src="src" alt="photo content" />;` and
`<img alt="picture of cool person" aria-hidden="false" />;` and the valid
examples), which makes them invalid HTML—remove the trailing `;` characters from
those HTML lines so the examples use valid tags (look for the `<img ... />;`
occurrences in the examples and change them to `<img ... />`).
| ```css title='example.module.css' | ||
| @value red: #FF0000; | ||
| ``` | ||
|
|
||
| <pre class="language-text"><code class="language-text">code-block.css:1:1 <a href="https://biomejs.dev/linter/rules/no-value-at-rule">lint/style/noValueAtRule</a> ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━<br /><br /> <strong><span style="color: lightgreen;">ℹ</span></strong> <span style="color: lightgreen;">Use of </span><span style="color: lightgreen;"><strong>@value</strong></span><span style="color: lightgreen;"> rule is disallowed</span><br /> <br /> <strong><span style="color: Tomato;">></span></strong> <strong>1 │ </strong>@value red: #FF0000;<br /> <strong> │ </strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><br /> <strong>2 │ </strong><br /> <br /> <strong><span style="color: lightgreen;">ℹ</span></strong> <span style="color: lightgreen;">Using @value is not recommended, consider using CSS variables instead.</span><br /> <br /> <strong><span style="color: lightgreen;">ℹ</span></strong> <span style="color: lightgreen;">See </span><span style="color: lightgreen;"><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties">MDN web docs</a></span><span style="color: lightgreen;"> for more details.</span><br /> <br /></code></pre> | ||
| <pre class="language-text"><code class="language-text"></code></pre> |
There was a problem hiding this comment.
🧩 Analysis chain
🏁 Script executed:
rg '<pre class="language-text"><code class="language-text"></code></pre>' src/content/docs/linter/rules/*.mdx | wc -lRepository: biomejs/website
Length of output: 61
🏁 Script executed:
rg -l '<pre class="language-text"><code class="language-text"></code></pre>' src/content/docs/linter/rules/*.mdx | head -20Repository: biomejs/website
Length of output: 1190
🏁 Script executed:
# Also check the specific file to see the context around line 44
cat -n src/content/docs/linter/rules/no-value-at-rule.mdx | sed -n '35,50p'Repository: biomejs/website
Length of output: 399
Empty diagnostic output blocks across multiple rule files.
This file has an empty <pre class="language-text"><code class="language-text"></code></pre> block at line 44 where the lint diagnostic should appear. However, verification shows this isn't isolated to this file—54 similar empty blocks exist across 20+ rule documentation files. This is a systematic codegen issue affecting the upstream biome repository that needs addressing there.
🤖 Prompt for AI Agents
In `@src/content/docs/linter/rules/no-value-at-rule.mdx` around lines 40 - 44, The
documentation contains an empty diagnostic output block (<pre
class="language-text"><code class="language-text"></code></pre>) after the
example in no-value-at-rule.mdx (and ~54 similar occurrences across rule docs);
update the generator or these files so the diagnostic block is either populated
with the expected lint output or removed when there is no diagnostic: locate the
example block titled 'example.module.css' and replace the empty <pre><code>
fragment with the actual diagnostic text produced by the rule (or remove the
empty fragment), and apply the same fix to other rule files produced by the same
codegen path so the systematic empty-block issue is resolved.
| :::note | ||
| This rule has been implemented but not released yet. It will be available in the next release. | ||
| ::: | ||
| ## Summary | ||
| - Diagnostic Category: [`lint/a11y/useAnchorContent`](/reference/diagnostics#diagnostic-category) | ||
| - This rule is **recommended**, meaning it is enabled by default. | ||
| - This rule has an [**unsafe**](/linter/#unsafe-fixes) fix. | ||
| - The default severity of this rule is [**error**](/reference/diagnostics#error). | ||
| - Sources: |
There was a problem hiding this comment.
Align “not released yet” with the summary claims.
The note says the HTML rule is not released, but the summary claims it’s recommended and enabled by default. That’s contradictory and will mislead users. Please soften or defer those bullets until release (update in the source generator).
✍️ Suggested wording tweak
- - This rule is **recommended**, meaning it is enabled by default.
- - This rule has an [**unsafe**](/linter/#unsafe-fixes) fix.
+ - Once released, this rule will be **recommended** and enabled by default.
+ - Once released, this rule will provide an [**unsafe**](/linter/#unsafe-fixes) fix.📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| :::note | |
| This rule has been implemented but not released yet. It will be available in the next release. | |
| ::: | |
| ## Summary | |
| - Diagnostic Category: [`lint/a11y/useAnchorContent`](/reference/diagnostics#diagnostic-category) | |
| - This rule is **recommended**, meaning it is enabled by default. | |
| - This rule has an [**unsafe**](/linter/#unsafe-fixes) fix. | |
| - The default severity of this rule is [**error**](/reference/diagnostics#error). | |
| - Sources: | |
| :::note | |
| This rule has been implemented but not released yet. It will be available in the next release. | |
| ::: | |
| ## Summary | |
| - Diagnostic Category: [`lint/a11y/useAnchorContent`](/reference/diagnostics#diagnostic-category) | |
| - Once released, this rule will be **recommended** and enabled by default. | |
| - Once released, this rule will provide an [**unsafe**](/linter/#unsafe-fixes) fix. | |
| - The default severity of this rule is [**error**](/reference/diagnostics#error). | |
| - Sources: |
🤖 Prompt for AI Agents
In `@src/content/docs/linter/rules/use-anchor-content.mdx` around lines 110 - 118,
The documentation currently claims the lint rule [`lint/a11y/useAnchorContent`]
is “recommended” and “enabled by default” while the top note states it is “not
released yet”; update the documentation generation or the content in
src/content/docs/linter/rules/use-anchor-content.mdx so the summary bullets are
softened or deferred until release (e.g., remove or mark “recommended”/“enabled
by default” as pending/released-in-next-version) and ensure the note and summary
are consistent with each other and with the source generator outputs.
| Default: `true` | ||
|
|
||
| When set to `false`, the rule will skip `forEach` callbacks that return a value. | ||
|
|
||
| ### Examples | ||
|
|
||
| ```json title='biome.json' | ||
| { | ||
| "linter": { | ||
| "rules": { | ||
| "suspicious": { | ||
| "useIterableCallbackReturn": { | ||
| "options": { | ||
| "checkForEach": false | ||
| } | ||
| } | ||
| } | ||
| } | ||
| } | ||
| } | ||
|
|
||
| ``` | ||
|
|
||
| ```js | ||
| [].forEach(() => void null); // Void return value, which doesn't trigger the rule | ||
| [1, 2, 3].forEach((el) => { | ||
| return el * 2; | ||
| }); | ||
| ``` | ||
|
|
||
| When `checkForEach` is `false` (default), the above code will not trigger any diagnostic. |
There was a problem hiding this comment.
Default value contradicts the later sentence.
Line 108 says default is true, but Line 137 claims false is the default. That’s confusing for users. Please align the wording with the actual default.
Proposed fix
-When `checkForEach` is `false` (default), the above code will not trigger any diagnostic.
+When `checkForEach` is `false`, the above code will not trigger any diagnostic.🤖 Prompt for AI Agents
In `@src/content/docs/linter/rules/use-iterable-callback-return.mdx` around lines
108 - 137, The documentation currently contradicts itself about the default for
the useIterableCallbackReturn rule option: reconcile the two places so they
state the same default for the "checkForEach" option (either change the top
"Default: `true`" to "Default: `false`" or update the later sentence "When
`checkForEach` is `false` (default)..." to use `true`) so that the option name
"checkForEach" and the rule name "useIterableCallbackReturn" consistently
reflect the actual default behavior across both the Default header and the
explanatory sentence.
| - Sources: | ||
| - Same as [`prefer-spread`](https://eslint.org/docs/latest/rules/prefer-spread) | ||
| - Inspired from [`e18e/prefer-spread-syntax`](https://github.com/e18e/eslint-plugin) |
There was a problem hiding this comment.
Tidy the attribution wording
“Inspired from” reads a bit off; “Inspired by” is the usual phrasing.
✏️ Suggested tweak
- - Inspired from [`e18e/prefer-spread-syntax`](https://github.com/e18e/eslint-plugin)
+ - Inspired by [`e18e/prefer-spread-syntax`](https://github.com/e18e/eslint-plugin)🤖 Prompt for AI Agents
In `@src/content/docs/linter/rules/use-spread.mdx` around lines 20 - 22, Update
the attribution sentence in the docs page to use correct phrasing: replace the
text "Inspired from
[`e18e/prefer-spread-syntax`](https://github.com/e18e/eslint-plugin)" with
"Inspired by
[`e18e/prefer-spread-syntax`](https://github.com/e18e/eslint-plugin)" in the
src/content/docs/linter/rules/use-spread.mdx sources list so the attribution
reads naturally.
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Fix all issues with AI agents
In `@src/content/docs/index.mdx`:
- Line 13: Replace the typo "Fist minor of the year, <a
href="/blog/biome-v2-4/"><b>Biome v2.4 is out!</b></a>" with "First minor of the
year, <a href="/blog/biome-v2-4/"><b>Biome v2.4 is out!</b></a>" so the banner
text reads "First minor" instead of "Fist minor"; update the string in the docs
index where that anchor/text appears to correct the spelling.
There was a problem hiding this comment.
Actionable comments posted: 2
🤖 Fix all issues with AI agents
In `@src/content/docs/linter/rules/no-svg-without-title.mdx`:
- Around line 249-253: The example in no-svg-without-title shows an empty
aria-label passing validation because the rule only checks for attribute
presence; update the Biome linter rule (no-svg-without-title) to treat empty
string values as invalid (reject aria-label="" and aria-labelledby="" with empty
ref) or, if changing behavior isn't possible, update the upstream rule's
documentation to explicitly call out this limitation; locate the rule
implementation in the Biome source that handles aria-label/aria-labelledby
checks and add a value-length/content check (or add a note in the rule's docs)
so empty accessible names are not treated as valid.
In `@src/content/docs/linter/rules/use-alt-text.mdx`:
- Around line 113-114: Replace the wordy sentence in the use-alt-text rule
("This is a critical component of accessibility for screen reader users in order
for them to understand the content's purpose on the page.") with a shorter,
clearer phrasing such as: "Alt text is essential for screen reader users to
understand an image's purpose." Update the single sentence in
src/content/docs/linter/rules/use-alt-text.mdx where that exact text appears.
| ```html | ||
| <svg role="img" aria-label=""> | ||
| <span id="">Pass</span> | ||
| </svg> | ||
| ``` |
There was a problem hiding this comment.
🧩 Analysis chain
🏁 Script executed:
find . -type f -name "*svg*" | head -20Repository: biomejs/website
Length of output: 710
🏁 Script executed:
rg -l "no-svg-without-title" --type rust --type javascript --type typescriptRepository: biomejs/website
Length of output: 93
🏁 Script executed:
rg -n -C5 "aria-label.*\"\"" --type rust | head -50Repository: biomejs/website
Length of output: 41
🏁 Script executed:
cat -n src/content/docs/linter/rules/no-svg-without-title.mdx | sed -n '200,280p'Repository: biomejs/website
Length of output: 12798
🏁 Script executed:
cat -n src/content/docs/linter/rules/no-svg-without-title.mdx | head -100Repository: biomejs/website
Length of output: 12139
🏁 Script executed:
rg -n "aria-label" --type rust --max-count 30 | head -40Repository: biomejs/website
Length of output: 41
🏁 Script executed:
rg -B5 -A5 "noSvgWithoutTitle|no_svg_without_title" --type rust | head -80Repository: biomejs/website
Length of output: 41
This valid example with empty aria-label="" likely reflects a rule limitation upstream.
The example on lines 249–253 shows aria-label="" passing validation, but an empty string provides no accessible name. This appears to be the rule checking for attribute presence rather than content, which could mislead users into thinking empty aria-labels are acceptable practice. Since this file is auto-generated from the Biome source repository, the fix should be addressed there—either by tightening the rule to reject empty values or by documenting the limitation in the source.
🤖 Prompt for AI Agents
In `@src/content/docs/linter/rules/no-svg-without-title.mdx` around lines 249 -
253, The example in no-svg-without-title shows an empty aria-label passing
validation because the rule only checks for attribute presence; update the Biome
linter rule (no-svg-without-title) to treat empty string values as invalid
(reject aria-label="" and aria-labelledby="" with empty ref) or, if changing
behavior isn't possible, update the upstream rule's documentation to explicitly
call out this limitation; locate the rule implementation in the Biome source
that handles aria-label/aria-labelledby checks and add a value-length/content
check (or add a note in the rule's docs) so empty accessible names are not
treated as valid.
| This is a critical component of accessibility for screen reader users in order for them | ||
| to understand the content's purpose on the page. |
There was a problem hiding this comment.
Trim a bit of wordiness.
Line 113 reads a touch long; a shorter phrasing improves flow.
✍️ Suggested tweak
-This is a critical component of accessibility for screen reader users in order for them
+This is a critical component of accessibility for screen reader users so they🧰 Tools
🪛 LanguageTool
[style] ~113-~113: ‘in order for them to’ might be wordy. Consider a shorter alternative.
Context: ...f accessibility for screen reader users in order for them to understand the content's purpose on the...
(EN_WORDINESS_PREMIUM_IN_ORDER_FOR_THEM_TO)
🤖 Prompt for AI Agents
In `@src/content/docs/linter/rules/use-alt-text.mdx` around lines 113 - 114,
Replace the wordy sentence in the use-alt-text rule ("This is a critical
component of accessibility for screen reader users in order for them to
understand the content's purpose on the page.") with a shorter, clearer phrasing
such as: "Alt text is essential for screen reader users to understand an image's
purpose." Update the single sentence in
src/content/docs/linter/rules/use-alt-text.mdx where that exact text appears.
4 participants
Summary
I'll merge this once package is published on npm registry and the dispatch job is triggered.