npx skills add https://github.com/biomejs/biome --skill biome-developer本技能提供通用的开发最佳实践、常见陷阱以及适用于代码库不同领域的 Biome 特定模式。当您遇到不熟悉的 API 或需要避免常见错误时,请将此作为参考。
应做:
quick_test 来检查 AST 结构VueDirective 和 VueV*ShorthandDirective)不应做:
quick_test示例 - 检查 AST:
// 在 crates/biome_html_parser/tests/quick_test.rs 中
// 修改 quick_test 函数:
#[test]
pub fn quick_test() {
let code = r#"<button on:click={handleClick}>Click</button>"#;
let source_type = HtmlFileSource::svelte();
let options = HtmlParserOptions::from(&source_type);
let root = parse_html(code, options);
dbg!(&root.syntax()); // 显示完整的 AST 结构
}
广告位招租
在这里展示您的产品或服务
触达数万 AI 开发者,精准高效
运行:just qt biome_html_parser
应做:
inner_string_text()(会移除引号)text_trimmed()HtmlAttributeName 这样的节点上使用 token_text_trimmed() 来获取文本内容HtmlString(引号)还是 HtmlTextExpression(花括号)不应做:
inner_string_text() 来提取带引号的字符串内容时,不要使用 text_trimmed()示例 - 字符串提取:
// 错误:text_trimmed() 包含引号
let html_string = value.as_html_string()?;
let content = html_string.value_token()?.text_trimmed(); // 返回:"\"handler\""
// 正确:inner_string_text() 移除引号
let html_string = value.as_html_string()?;
let inner_text = html_string.inner_string_text().ok()?;
let content = inner_text.text(); // 返回:"handler"
应做:
EmbeddingKindis_source: true(脚本标签)与 is_source: false(模板表达式)text_range().start()不应做:
示例 - 不同的值格式:
// Vue 指令使用带引号的字符串:@click="handler"
let html_string = value.as_html_string()?;
let inner_text = html_string.inner_string_text().ok()?;
// Svelte 指令使用文本表达式:on:click={handler}
let text_expression = value.as_html_attribute_single_text_expression()?;
let expression = text_expression.expression().ok()?;
应做:
let 绑定来避免临时值借用被丢弃不应做:
示例 - 避免借用问题:
// 错误:临时借用被丢弃
let html_string = value.value().ok()?.as_html_string()?;
let token = html_string.value_token().ok()?; // 错误:html_string 被丢弃
// 正确:存储中间结果
let value_node = value.value().ok()?;
let html_string = value_node.as_html_string()?;
let token = html_string.value_token().ok()?; // 正确
应做:
let 链来折叠嵌套的 if let 语句(更简洁且符合 Rust 习惯用法)just l 以捕获 clippy 警告不应做:
示例 - 可折叠的 If:
// 错误:嵌套的 if let(clippy::collapsible_if 警告)
if let Some(directive) = VueDirective::cast_ref(&element) {
if let Some(initializer) = directive.initializer() {
// ... 做某事
}
}
// 正确:使用 let 链
if let Some(directive) = VueDirective::cast_ref(&element)
&& let Some(initializer) = directive.initializer()
{
// ... 做某事
}
应做:
不应做:
示例: Svelte 的 on:click 事件处理程序语法是遗留的(Svelte 3/4)。现代 Svelte 5 runes 模式使用常规属性。除非用户特别要求,否则不要实现遗留语法支持。
关于测试命令、快照工作流和代码生成,请参阅 testing-codegen 技能。以下是特定于 Biome 开发模式的关键提醒:
VueV*ShorthandDirective 类型)处理枚举变体(如 AnySvelteDirective)时,检查是否还有需要处理的非枚举类型:
// 检查 AnySvelteDirective 枚举(bind:、class:、style: 等)
if let Some(directive) = AnySvelteDirective::cast_ref(&element) {
// 处理特殊的 Svelte 指令
}
// 但也要检查具有特定前缀的常规 HTML 属性
if let Some(attribute) = HtmlAttribute::cast_ref(&element) {
if let Ok(name) = attribute.name() {
// 一些指令可能被解析为常规属性
}
}
对于具有多种指令语法的框架,处理每种类型:
// Vue 有多种简写类型
if let Some(directive) = VueVOnShorthandDirective::cast_ref(&element) {
// 处理 @click
}
if let Some(directive) = VueVBindShorthandDirective::cast_ref(&element) {
// 处理 :prop
}
if let Some(directive) = VueVSlotShorthandDirective::cast_ref(&element) {
// 处理 #slot
}
if let Some(directive) = VueDirective::cast_ref(&element) {
// 处理 v-if、v-show 等
}
| 方法 | 使用场景 | 返回内容 |
|---|---|---|
inner_string_text() | 从带引号的字符串中提取内容 | 不带引号的内容 |
text_trimmed() | 获取不带空格的标记文本 | 完整的标记文本 |
token_text_trimmed() | 从像 HtmlAttributeName 这样的节点获取文本 | 节点文本内容 |
text() | 获取原始文本 | 按原样书写的精确文本 |
| 类型 | 方法 | 框架 |
|---|---|---|
HtmlString | inner_string_text() | Vue(引号) |
HtmlAttributeSingleTextExpression | expression() | Svelte(花括号) |
HtmlTextExpression | html_literal_token() | 模板表达式 |
../../CONTRIBUTING.md../testing-codegen/SKILL.md../parser-development/SKILL.md应做:
| --- | --- | --- |(而不是 |---|---|---|)不应做:
示例 - 表格格式化:
<!-- 错误:分隔符周围没有空格 -->
| Method | Use When | Returns |
|--------|----------|---------|
<!-- 正确:分隔符周围有空格 -->
| Method | Use When | Returns |
| --- | --- | --- |
CI 使用 markdownlint-cli2,它强制执行要求空格的“紧凑”风格。
在以下情况下加载此技能:
每周安装次数
47
仓库
GitHub 星标数
24.1K
首次出现
2026年2月18日
安全审计
安装于
opencode47
github-copilot47
codex47
kimi-cli47
gemini-cli47
amp47
This skill provides general development best practices, common gotchas, and Biome-specific patterns that apply across different areas of the codebase. Use this as a reference when you encounter unfamiliar APIs or need to avoid common mistakes.
DO:
quick_test to inspect AST structure before implementingVueDirective and VueV*ShorthandDirective)DON'T:
quick_test insteadExample - Inspecting AST:
// In crates/biome_html_parser/tests/quick_test.rs
// Modify the quick_test function:
#[test]
pub fn quick_test() {
let code = r#"<button on:click={handleClick}>Click</button>"#;
let source_type = HtmlFileSource::svelte();
let options = HtmlParserOptions::from(&source_type);
let root = parse_html(code, options);
dbg!(&root.syntax()); // Shows full AST structure
}
Run: just qt biome_html_parser
DO:
inner_string_text() when extracting content from quoted strings (removes quotes)text_trimmed() when you need the full token text without leading/trailing whitespacetoken_text_trimmed() on nodes like HtmlAttributeName to get the text contentHtmlString (quotes) or HtmlTextExpression (curly braces)DON'T:
text_trimmed() when you need inner_string_text() for extracting quoted string contentsExample - String Extraction:
// WRONG: text_trimmed() includes quotes
let html_string = value.as_html_string()?;
let content = html_string.value_token()?.text_trimmed(); // Returns: "\"handler\""
// CORRECT: inner_string_text() removes quotes
let html_string = value.as_html_string()?;
let inner_text = html_string.inner_string_text().ok()?;
let content = inner_text.text(); // Returns: "handler"
DO:
EmbeddingKind for context (Vue, Svelte, Astro, etc.)is_source: true (script tags) vs is_source: false (template expressions)text_range().start() for text expressionsDON'T:
Example - Different Value Formats:
// Vue directives use quoted strings: @click="handler"
let html_string = value.as_html_string()?;
let inner_text = html_string.inner_string_text().ok()?;
// Svelte directives use text expressions: on:click={handler}
let text_expression = value.as_html_attribute_single_text_expression()?;
let expression = text_expression.expression().ok()?;
DO:
let bindings to avoid temporary value borrows that get droppedDON'T:
Example - Avoiding Borrow Issues:
// WRONG: Temporary borrow gets dropped
let html_string = value.value().ok()?.as_html_string()?;
let token = html_string.value_token().ok()?; // ERROR: html_string dropped
// CORRECT: Store intermediate result
let value_node = value.value().ok()?;
let html_string = value_node.as_html_string()?;
let token = html_string.value_token().ok()?; // OK
DO:
let chains to collapse nested if let statements (cleaner and follows Rust idioms)just l before committing to catch clippy warningsDON'T:
Example - Collapsible If:
// WRONG: Nested if let (clippy::collapsible_if warning)
if let Some(directive) = VueDirective::cast_ref(&element) {
if let Some(initializer) = directive.initializer() {
// ... do something
}
}
// CORRECT: Use let chains
if let Some(directive) = VueDirective::cast_ref(&element)
&& let Some(initializer) = directive.initializer()
{
// ... do something
}
DO:
DON'T:
Example: Svelte's on:click event handler syntax is legacy (Svelte 3/4). Modern Svelte 5 runes mode uses regular attributes. Unless users specifically request it, don't implement legacy syntax support.
For testing commands, snapshot workflows, and code generation, see the testing-codegen skill. Key reminders specific to Biome development patterns:
VueV*ShorthandDirective types)When working with enum variants (like AnySvelteDirective), check if there are also non-enum types that need handling:
// Check AnySvelteDirective enum (bind:, class:, style:, etc.)
if let Some(directive) = AnySvelteDirective::cast_ref(&element) {
// Handle special Svelte directives
}
// But also check regular HTML attributes with specific prefixes
if let Some(attribute) = HtmlAttribute::cast_ref(&element) {
if let Ok(name) = attribute.name() {
// Some directives might be parsed as regular attributes
}
}
For frameworks with multiple directive syntaxes, handle each type:
// Vue has multiple shorthand types
if let Some(directive) = VueVOnShorthandDirective::cast_ref(&element) {
// Handle @click
}
if let Some(directive) = VueVBindShorthandDirective::cast_ref(&element) {
// Handle :prop
}
if let Some(directive) = VueVSlotShorthandDirective::cast_ref(&element) {
// Handle #slot
}
if let Some(directive) = VueDirective::cast_ref(&element) {
// Handle v-if, v-show, etc.
}
| Method | Use When | Returns |
|---|---|---|
inner_string_text() | Extracting content from quoted strings | Content without quotes |
text_trimmed() | Getting token text without whitespace | Full token text |
token_text_trimmed() | Getting text from nodes like HtmlAttributeName | Node text content |
text() | Getting raw text | Exact text as written |
| Type | Method | Framework |
|---|---|---|
HtmlString | inner_string_text() | Vue (quotes) |
HtmlAttributeSingleTextExpression | expression() | Svelte (curly braces) |
HtmlTextExpression | html_literal_token() | Template expressions |
../../CONTRIBUTING.md../testing-codegen/SKILL.md../parser-development/SKILL.mdDO:
| --- | --- | --- | (not |---|---|---|)DON'T:
Example - Table Formatting:
<!-- WRONG: No spaces around separators -->
| Method | Use When | Returns |
|--------|----------|---------|
<!-- CORRECT: Spaces around separators -->
| Method | Use When | Returns |
| --- | --- | --- |
The CI uses markdownlint-cli2 which enforces the "compact" style requiring spaces.
Load this skill when:
Weekly Installs
47
Repository
GitHub Stars
24.1K
First Seen
Feb 18, 2026
Security Audits
Gen Agent Trust HubPassSocketFailSnykPass
Installed on
opencode47
github-copilot47
codex47
kimi-cli47
gemini-cli47
amp47
Perl安全编程指南:输入验证、注入防护与安全编码实践
1,200 周安装
Feishu Docx Exporter:飞书/Lark文档转Markdown工具,支持AI分析、批量导出与内容管理
272 周安装
阿里云AI音频TTS语音设计测试技能 - 最小可行性测试与验证指南
272 周安装
SwiftData 教程:iOS 17+ 原生持久化框架,与 SwiftUI 集成和 CloudKit 同步
275 周安装
阿里云AI语音TTS测试技能 - 最小可行测试验证与安装指南
274 周安装
阿里云DNS CLI测试指南:alicloud-network-dns-cli-test 安装与使用教程
273 周安装
网络小说大纲规划工具 - 从总纲到卷章细纲的AI辅助写作技能
71 周安装