diff --git a/.changeset/mark_useselfclosingelements_as_safe_and_improve_error_message.md b/.changeset/mark_useselfclosingelements_as_safe_and_improve_error_message.md
new file mode 100644
index 000000000000..baf7bd526a7f
--- /dev/null
+++ b/.changeset/mark_useselfclosingelements_as_safe_and_improve_error_message.md
@@ -0,0 +1,6 @@
+---
+cli: patch
+biome_js_analyze: patch
+---
+
+# mark `useSelfClosingElements` as safe and improve error message
diff --git a/crates/biome_js_analyze/src/lint/style/use_self_closing_elements.rs b/crates/biome_js_analyze/src/lint/style/use_self_closing_elements.rs
index 2b3738d7ba0e..2a6176503ddb 100644
--- a/crates/biome_js_analyze/src/lint/style/use_self_closing_elements.rs
+++ b/crates/biome_js_analyze/src/lint/style/use_self_closing_elements.rs
@@ -16,6 +16,8 @@ use crate::JsRuleAction;
declare_lint_rule! {
/// Prevent extra closing tags for components without children
///
+ /// JSX elements without children should be marked as self-closing. In JSX, it is valid for any element to be self-closing.
+ ///
/// ## Examples
///
/// ### Invalid
@@ -91,7 +93,7 @@ declare_lint_rule! {
sources: &[RuleSource::EslintStylistic("jsx-self-closing-comp")],
recommended: false,
severity: Severity::Warning,
- fix_kind: FixKind::Unsafe,
+ fix_kind: FixKind::Safe,
}
}
@@ -180,7 +182,7 @@ impl Rule for UseSelfClosingElements {
Some(JsRuleAction::new(
ctx.metadata().action_category(ctx.category(), ctx.group()),
ctx.metadata().applicability(),
- markup! { "Use a SelfClosingElement instead" }.to_owned(),
+ markup! { "Use a self-closing element instead." }.to_owned(),
mutation,
))
}
diff --git a/crates/biome_js_analyze/tests/specs/style/useSelfClosingElements/invalid.tsx.snap b/crates/biome_js_analyze/tests/specs/style/useSelfClosingElements/invalid.tsx.snap
index 7e1006af44c9..f06f7218317f 100644
--- a/crates/biome_js_analyze/tests/specs/style/useSelfClosingElements/invalid.tsx.snap
+++ b/crates/biome_js_analyze/tests/specs/style/useSelfClosingElements/invalid.tsx.snap
@@ -27,7 +27,7 @@ invalid.tsx:1:1 lint/style/useSelfClosingElements FIXABLE ━━━━━━
2 │ ;
3 │ ;
- i Unsafe fix: Use a SelfClosingElement instead
+ i Safe fix: Use a self-closing element instead.
1 │
;
│ -- ---
@@ -45,7 +45,7 @@ invalid.tsx:2:1 lint/style/useSelfClosingElements FIXABLE ━━━━━━
3 │ ;
4 │ ;
2 │ - ;
@@ -68,7 +68,7 @@ invalid.tsx:3:1 lint/style/useSelfClosingElements FIXABLE ━━━━━━
4 │ ;
2 2 │ ;
@@ -95,7 +95,7 @@ invalid.tsx:4:1 lint/style/useSelfClosingElements FIXABLE ━━━━━━
7 │
8 │ /* comment */;
- i Unsafe fix: Use a SelfClosingElement instead
+ i Safe fix: Use a self-closing element instead.
6 │ >;
│ -- ---
@@ -114,7 +114,7 @@ invalid.tsx:8:1 lint/style/useSelfClosingElements FIXABLE ━━━━━━
9 │ /* comment */ ;
10 │ >;
- i Unsafe fix: Use a SelfClosingElement instead
+ i Safe fix: Use a self-closing element instead.
8 │ ·/*·comment·*/;
│ -- ---
@@ -131,7 +131,7 @@ invalid.tsx:9:15 lint/style/useSelfClosingElements FIXABLE ━━━━━━
│ ^^^^^^^^^^^^
10 │ >;
- i Unsafe fix: Use a SelfClosingElement instead
+ i Safe fix: Use a self-closing element instead.
9 │ /*·comment·*/·;
│ -- ---
@@ -148,7 +148,7 @@ invalid.tsx:10:1 lint/style/useSelfClosingElements FIXABLE ━━━━━━
> 10 │ >;
│ ^^^^^^^^^^^^^^^^^^^^^^^^^
- i Unsafe fix: Use a SelfClosingElement instead
+ i Safe fix: Use a self-closing element instead.
8 8 │ /* comment */;
9 9 │ /* comment */ ;
@@ -157,5 +157,3 @@ invalid.tsx:10:1 lint/style/useSelfClosingElements FIXABLE ━━━━━━
```
-
-
diff --git a/crates/biome_js_analyze/tests/specs/style/useSelfClosingElements/invalidCheckHtmlElementsFalse.tsx.snap b/crates/biome_js_analyze/tests/specs/style/useSelfClosingElements/invalidCheckHtmlElementsFalse.tsx.snap
index b46f2e248c7e..456a83172d9b 100644
--- a/crates/biome_js_analyze/tests/specs/style/useSelfClosingElements/invalidCheckHtmlElementsFalse.tsx.snap
+++ b/crates/biome_js_analyze/tests/specs/style/useSelfClosingElements/invalidCheckHtmlElementsFalse.tsx.snap
@@ -23,7 +23,7 @@ invalidCheckHtmlElementsFalse.tsx:2:1 lint/style/useSelfClosingElements FIXABLE
3 │ ;
4 │ >;
- i Unsafe fix: Use a SelfClosingElement instead
+ i Safe fix: Use a self-closing element instead.
1 1 │ // invalid
2 │ - ;
@@ -46,7 +46,7 @@ invalidCheckHtmlElementsFalse.tsx:3:1 lint/style/useSelfClosingElements FIXABLE
4 │ >;
5 │
- i Unsafe fix: Use a SelfClosingElement instead
+ i Safe fix: Use a self-closing element instead.
1 1 │ // invalid
2 2 │ ;
@@ -69,7 +69,7 @@ invalidCheckHtmlElementsFalse.tsx:4:1 lint/style/useSelfClosingElements FIXABLE
│ ^^^^^^^^^^^^^^^^^^^^^^^^^
5 │
- i Unsafe fix: Use a SelfClosingElement instead
+ i Safe fix: Use a self-closing element instead.
2 2 │ ;
3 3 │ ;