feat(linter): add rule noJsxLiterals

.changeset/nine-turkeys-dig.md

@@ -0,0 +1,20 @@
+---
+"@biomejs/biome": patch
+---
+
+Added the new nursery lint rule `noJsxLiterals`, which disallows the use of string literals inside JSX.
+
+The rule catches these cases:
+
+```jsx
+<>
+  <div>test</div> {/* test is invalid */}
+  <>test</>
+  <div>
+    {/* this string is invalid */}
+    asdjfl
+    test
+    foo
+  </div>
+</>
+```

crates/biome_diagnostics_categories/src/categories.rs

@@ -165,6 +165,7 @@ define_categories! {
     "lint/nursery/noFloatingPromises": "https://biomejs.dev/linter/rules/no-floating-promises",
     "lint/nursery/noImplicitCoercion": "https://biomejs.dev/linter/rules/no-implicit-coercion",
     "lint/nursery/noImportCycles": "https://biomejs.dev/linter/rules/no-import-cycles",
+    "lint/nursery/noJsxLiterals": "https://biomejs.dev/linter/rules/no-jsx-literals",
     "lint/nursery/noMissingGenericFamilyKeyword": "https://biomejs.dev/linter/rules/no-missing-generic-family-keyword",
     "lint/nursery/noMisusedPromises": "https://biomejs.dev/linter/rules/no-misused-promises",
     "lint/nursery/noNextAsyncClientComponent": "https://biomejs.dev/linter/rules/no-next-async-client-component",

crates/biome_js_analyze/src/lint/nursery.rs

@@ -5,6 +5,7 @@
 use biome_analyze::declare_lint_group;
 pub mod no_floating_promises;
 pub mod no_import_cycles;
+pub mod no_jsx_literals;
 pub mod no_misused_promises;
 pub mod no_next_async_client_component;
 pub mod no_non_null_asserted_optional_chain;
@@ -29,4 +30,4 @@ pub mod use_qwik_classlist;
 pub mod use_react_function_components;
 pub mod use_sorted_classes;
 pub mod use_vue_multi_word_component_names;
-declare_lint_group! { pub Nursery { name : "nursery" , rules : [self :: no_floating_promises :: NoFloatingPromises , self :: no_import_cycles :: NoImportCycles , self :: no_misused_promises :: NoMisusedPromises , self :: no_next_async_client_component :: NoNextAsyncClientComponent , self :: no_non_null_asserted_optional_chain :: NoNonNullAssertedOptionalChain , self :: no_qwik_use_visible_task :: NoQwikUseVisibleTask , self :: no_secrets :: NoSecrets , self :: no_shadow :: NoShadow , self :: no_unnecessary_conditions :: NoUnnecessaryConditions , self :: no_unresolved_imports :: NoUnresolvedImports , self :: no_useless_catch_binding :: NoUselessCatchBinding , self :: no_useless_undefined :: NoUselessUndefined , self :: no_vue_data_object_declaration :: NoVueDataObjectDeclaration , self :: no_vue_reserved_keys :: NoVueReservedKeys , self :: no_vue_reserved_props :: NoVueReservedProps , self :: use_anchor_href :: UseAnchorHref , self :: use_consistent_arrow_return :: UseConsistentArrowReturn , self :: use_consistent_type_definitions :: UseConsistentTypeDefinitions , self :: use_exhaustive_switch_cases :: UseExhaustiveSwitchCases , self :: use_explicit_type :: UseExplicitType , self :: use_image_size :: UseImageSize , self :: use_max_params :: UseMaxParams , self :: use_qwik_classlist :: UseQwikClasslist , self :: use_react_function_components :: UseReactFunctionComponents , self :: use_sorted_classes :: UseSortedClasses , self :: use_vue_multi_word_component_names :: UseVueMultiWordComponentNames ,] } }
+declare_lint_group! { pub Nursery { name : "nursery" , rules : [self :: no_floating_promises :: NoFloatingPromises , self :: no_import_cycles :: NoImportCycles , self :: no_jsx_literals :: NoJsxLiterals , self :: no_misused_promises :: NoMisusedPromises , self :: no_next_async_client_component :: NoNextAsyncClientComponent , self :: no_non_null_asserted_optional_chain :: NoNonNullAssertedOptionalChain , self :: no_qwik_use_visible_task :: NoQwikUseVisibleTask , self :: no_secrets :: NoSecrets , self :: no_shadow :: NoShadow , self :: no_unnecessary_conditions :: NoUnnecessaryConditions , self :: no_unresolved_imports :: NoUnresolvedImports , self :: no_useless_catch_binding :: NoUselessCatchBinding , self :: no_useless_undefined :: NoUselessUndefined , self :: no_vue_data_object_declaration :: NoVueDataObjectDeclaration , self :: no_vue_reserved_keys :: NoVueReservedKeys , self :: no_vue_reserved_props :: NoVueReservedProps , self :: use_anchor_href :: UseAnchorHref , self :: use_consistent_arrow_return :: UseConsistentArrowReturn , self :: use_consistent_type_definitions :: UseConsistentTypeDefinitions , self :: use_exhaustive_switch_cases :: UseExhaustiveSwitchCases , self :: use_explicit_type :: UseExplicitType , self :: use_image_size :: UseImageSize , self :: use_max_params :: UseMaxParams , self :: use_qwik_classlist :: UseQwikClasslist , self :: use_react_function_components :: UseReactFunctionComponents , self :: use_sorted_classes :: UseSortedClasses , self :: use_vue_multi_word_component_names :: UseVueMultiWordComponentNames ,] } }

crates/biome_js_analyze/src/lint/nursery/no_jsx_literals.rs

@@ -0,0 +1,233 @@
+use biome_analyze::{
+    Ast, Rule, RuleDiagnostic, RuleSource, context::RuleContext, declare_lint_rule,
+};
+use biome_console::markup;
+use biome_js_syntax::{
+    AnyJsExpression, AnyJsLiteralExpression, JsFileSource, JsStringLiteralExpression, JsxAttribute,
+    JsxExpressionAttributeValue, JsxString, JsxText, inner_string_text,
+};
+use biome_rowan::{AstNode, AstNodeList, TextRange, declare_node_union};
+use biome_rule_options::no_jsx_literals::NoJsxLiteralsOptions;
+
+declare_lint_rule! {
+    /// Disallow string literals inside JSX elements.
+    ///
+    /// This rule discourages the use of
+    /// string literals directly within JSX elements. String literals in JSX can make code harder
+    /// to maintain, especially in applications that require internationalization or dynamic content.
+    ///
+    /// ## Examples
+    ///
+    /// ### Invalid
+    ///
+    /// ```jsx,expect_diagnostic
+    /// <div>Hello World</div>
+    /// ```
+    ///
+    /// ```jsx,expect_diagnostic
+    /// <>Welcome to our site</>
+    /// ```
+    ///
+    /// ```jsx,expect_diagnostic
+    /// <span>
+    ///   Please enter your name
+    /// </span>
+    /// ```
+    ///
+    /// ### Valid
+    ///
+    /// ```jsx
+    /// <div>{'Hello World'}</div>
+    /// ```
+    ///
+    /// ```jsx
+    /// <>{'Welcome to our site'}</>
+    /// ```
+    ///
+    /// ```jsx
+    /// <span>
+    ///   {'Please enter your name'}
+    /// </span>
+    /// ```
+    ///
+    /// ```jsx
+    /// <div>{`Hello ${name}`}</div>
+    /// ```
+    ///
+    /// ## Options
+    ///
+    /// ### `noStrings`
+    ///
+    /// When enabled, the rule will also flag string literals inside JSX expressions and attributes.
+    ///
+    /// > **Default:** `false`
+    ///
+    /// ```json,options
+    /// {
+    ///   "options": {
+    ///     "noStrings": true
+    ///   }
+    /// }
+    /// ```
+    ///
+    /// ```jsx,expect_diagnostic,use_options
+    /// <span>
+    ///   {'Please enter your name'}
+    /// </span>
+    /// ```
+    /// ```jsx,expect_diagnostic,use_options
+    /// <Component title="Hello!" />
+    /// ```
+    ///
+    ///
+    ///
+    /// ### `allowedStrings`
+    ///
+    /// An array of strings that are allowed as literals. This can be useful for common words
+    /// or characters that don't need to be wrapped in expressions.
+    ///
+    /// ```json,options
+    /// {
+    ///   "options": {
+    ///     "allowedStrings": ["Hello", "&nbsp;", "·"]
+    ///   }
+    /// }
+    /// ```
+    ///
+    /// ```jsx,use_options
+    /// <>
+    ///   <div>Hello</div>
+    ///   <div>&nbsp;</div>
+    ///   <div>·</div>
+    /// </>
+    /// ```
+    ///
+    /// ### `ignoreProps`
+    ///
+    /// When enabled, the rule will ignore string literals used as prop values.
+    ///
+    /// > **Default:** `false`
+    ///
+    /// ```json,options
+    /// {
+    ///   "options": {
+    ///     "ignoreProps": true
+    ///   }
+    /// }
+    /// ```
+    ///
+    /// ```jsx,use_options
+    /// <>
+    ///   <Component title="Welcome" />
+    ///   <input placeholder="Enter name" />
+    /// </>
+    /// ```
+    ///
+    pub NoJsxLiterals {
+        version: "next",
+        name: "noJsxLiterals",
+        language: "jsx",
+        recommended: false,
+        sources: &[RuleSource::EslintReact("jsx-no-literals").same()],
+    }
+}
+
+impl Rule for NoJsxLiterals {
+    type Query = Ast<AnyJsxText>;
+    type State = TextRange;
+    type Signals = Option<Self::State>;
+    type Options = NoJsxLiteralsOptions;
+
+    fn run(ctx: &RuleContext<Self>) -> Self::Signals {
+        let file_source = ctx.source_type::<JsFileSource>();
+        if !file_source.is_jsx() {
+            return None;
+        }
+
+        let node = ctx.query();
+        let options = ctx.options();
+
+        if options.ignore_props
+            && node
+                .syntax()
+                .ancestors()
+                .skip(1)
+                .any(|n| JsxAttribute::can_cast(n.kind()))
+        {
+            return None;
+        }
+
+        let value_token = match node {
+            AnyJsxText::JsxText(text) => text.value_token().ok()?,
+            AnyJsxText::JsStringLiteralExpression(expression) => {
+                if !options.no_strings {
+                    return None;
+                }
+                expression.value_token().ok()?
+            }
+            AnyJsxText::JsxString(string) => {
+                if !options.no_strings {
+                    return None;
+                }
+                string.value_token().ok()?
+            }
+            AnyJsxText::JsxExpressionAttributeValue(expression) => {
+                if !options.no_strings {
+                    return None;
+                }
+                let expression = expression.expression().ok()?;
+                match expression {
+                    AnyJsExpression::AnyJsLiteralExpression(
+                        AnyJsLiteralExpression::JsStringLiteralExpression(string_literal),
+                    ) => string_literal.value_token().ok()?,
+                    AnyJsExpression::JsTemplateExpression(expression) => {
+                        return if expression.elements().len() <= 1 {
+                            Some(expression.range())
+                        } else {
+                            None
+                        };
+                    }
+
+                    _ => return None,
+                }
+            }
+        };
+
+        for allowed_string in &options.allowed_strings {
+            if inner_string_text(&value_token) == allowed_string.as_ref() {
+                return None;
+            }
+        }
+
+        if inner_string_text(&value_token).trim().is_empty() {
+            return None;
+        }
+
+        Some(value_token.text_trimmed_range())
+    }
+
+    fn diagnostic(_ctx: &RuleContext<Self>, state: &Self::State) -> Option<RuleDiagnostic> {
+        Some(
+            RuleDiagnostic::new(
+                rule_category!(),
+                state,
+                markup! {
+                    "Incorrect use of string literal detected."
+                },
+            )
+            .note(markup! {
+                "String literals in JSX can make code harder to maintain and internationalize."
+            })
+            .note(markup! {
+                "Consider avoiding hardcoded strings entirely."
+            }),
+        )
+    }
+}
+
+declare_node_union! {
+    pub AnyJsxText = JsxText
+        | JsStringLiteralExpression
+        | JsxString
+        | JsxExpressionAttributeValue
+}

crates/biome_js_analyze/tests/specs/nursery/noJsxLiterals/invalid.jsx

@@ -0,0 +1,20 @@
+// should generate diagnostics
+<>
+  <div>test</div>
+	<>test</>
+	<>
+		<div>
+			asdjfl
+			test
+			foo
+		</div>
+	</>
+</>
+
+
+class Comp1 extends Component {
+	render() {
+		const varObjectTest = { testKey : (<div>test</div>) };
+		return varObjectTest.testKey;
+	}
+}