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

biomejs · Jan 30, 2025 · 2bee3e4 · 2bee3e4
1 parent 738ad51
commit 2bee3e4
Show file tree

Hide file tree

Showing 4 changed files with 16 additions and 14 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -295,6 +295,8 @@ our [guidelines for writing a good changelog entry](https://github.com/biomejs/b
 
   Contributed by @lucasweng
 
+- mark `useSelfClosingElements` as safe and improve error message. Contributed by @mehm8128
+
 #### Bug fixes
 
 - [noControlCharactersInRegex](https://biomejs.dev/linter/rules/no-control-characters-in-regex) no longer panics when it encounters an unterminated unicode escape sequence ([#4565](https://github.com/biomejs/biome/issues/4565)). Contributed by @Conaclos

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
@@ -15,6 +15,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
@@ -89,7 +91,7 @@ declare_lint_rule! {
         language: "js",
         sources: &[RuleSource::EslintStylistic("jsx-self-closing-comp")],
         recommended: true,
-        fix_kind: FixKind::Unsafe,
+        fix_kind: FixKind::Safe,
     }
 }
 
@@ -178,7 +180,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>;