feat(lint): make useSelfClosingElements safe and improve error message (

#4998)
biomejs · Jan 30, 2025 · f0e6521 · f0e6521
1 parent b9a023e
commit f0e6521
Show file tree

Hide file tree

Showing 4 changed files with 20 additions and 14 deletions.
diff --git a/.changeset/mark_useselfclosingelements_as_safe_and_improve_error_message.md 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
@@ -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
@@ -27,7 +27,7 @@ invalid.tsx:1:1 lint/style/useSelfClosingElements  FIXABLE  ━━━━━━
     2 │ <Component></Component>;
     3 │ <Foo.bar></Foo.bar>;
   
-  i Unsafe fix: Use a SelfClosingElement instead
+  i Safe fix: Use a self-closing element instead.
   
     1 │ <div···············></div>;
       │                    -- ---  
@@ -45,7 +45,7 @@ invalid.tsx:2:1 lint/style/useSelfClosingElements  FIXABLE  ━━━━━━
     3 │ <Foo.bar></Foo.bar>;
     4 │ <div
   
-  i Unsafe fix: Use a SelfClosingElement instead
+  i Safe fix: Use a self-closing element instead.
   
      1  1 │   <div               ></div>;
      2    │ - <Component></Component>;
@@ -68,7 +68,7 @@ invalid.tsx:3:1 lint/style/useSelfClosingElements  FIXABLE  ━━━━━━
     4 │ <div
     5 │ 
   
-  i Unsafe fix: Use a SelfClosingElement instead
+  i Safe fix: Use a self-closing element instead.
   
      1  1 │   <div               ></div>;
      2  2 │   <Component></Component>;
@@ -95,7 +95,7 @@ invalid.tsx:4:1 lint/style/useSelfClosingElements  FIXABLE  ━━━━━━
     7 │ 
     8 │ <div ></div> /* comment */;
   
-  i Unsafe fix: Use a SelfClosingElement instead
+  i Safe fix: Use a self-closing element instead.
   
     6 │ ></div>;
       │ -- ---  
@@ -114,7 +114,7 @@ invalid.tsx:8:1 lint/style/useSelfClosingElements  FIXABLE  ━━━━━━
      9 │ /* comment */ <div ></div>;
     10 │ <Generic<true>></Generic>;
   
-  i Unsafe fix: Use a SelfClosingElement instead
+  i Safe fix: Use a self-closing element instead.
   
     8 │ <div·></div>·/*·comment·*/;
       │      -- ---                
@@ -131,7 +131,7 @@ invalid.tsx:9:15 lint/style/useSelfClosingElements  FIXABLE  ━━━━━━
        │               ^^^^^^^^^^^^
     10 │ <Generic<true>></Generic>;
   
-  i Unsafe fix: Use a SelfClosingElement instead
+  i Safe fix: Use a self-closing element instead.
   
     9 │ /*·comment·*/·<div·></div>;
       │                    -- ---  
@@ -148,7 +148,7 @@ invalid.tsx:10:1 lint/style/useSelfClosingElements  FIXABLE  ━━━━━━
   > 10 │ <Generic<true>></Generic>;
        │ ^^^^^^^^^^^^^^^^^^^^^^^^^
   
-  i Unsafe fix: Use a SelfClosingElement instead
+  i Safe fix: Use a self-closing element instead.
   
      8  8 │   <div ></div> /* comment */;
      9  9 │   /* comment */ <div ></div>;
@@ -157,5 +157,3 @@ invalid.tsx:10:1 lint/style/useSelfClosingElements  FIXABLE  ━━━━━━
   
 
 ```
-
-
diff --git a/...s_analyze/tests/specs/style/useSelfClosingElements/invalidCheckHtmlElementsFalse.tsx.snap b/...s_analyze/tests/specs/style/useSelfClosingElements/invalidCheckHtmlElementsFalse.tsx.snap
@@ -23,7 +23,7 @@ invalidCheckHtmlElementsFalse.tsx:2:1 lint/style/useSelfClosingElements  FIXABLE
     3 │ <Foo.bar></Foo.bar>;
     4 │ <Generic<true>></Generic>;
   
-  i Unsafe fix: Use a SelfClosingElement instead
+  i Safe fix: Use a self-closing element instead.
   
     1 1 │   // invalid
     2   │ - <Component></Component>;
@@ -46,7 +46,7 @@ invalidCheckHtmlElementsFalse.tsx:3:1 lint/style/useSelfClosingElements  FIXABLE
     4 │ <Generic<true>></Generic>;
     5 │ 
   
-  i Unsafe fix: Use a SelfClosingElement instead
+  i Safe fix: Use a self-closing element instead.
   
     1 1 │   // invalid
     2 2 │   <Component></Component>;
@@ -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 │   <Component></Component>;
     3 3 │   <Foo.bar></Foo.bar>;