fix(eslint-plugin): [no-unnecessary-template-expression] add missing parentheses in autofix

packages/eslint-plugin/src/rules/no-useless-template-literals.ts

@@ -7,6 +7,7 @@ import {
   getConstrainedTypeAtLocation,
   getParserServices,
   getStaticStringValue,
+  getWrappingCode,
   isTypeFlagSet,
   isUndefinedIdentifier,
 } from '../util';
@@ -92,21 +93,15 @@ export default createRule<[], MessageId>({
           context.report({
             node: node.expressions[0],
             messageId: 'noUselessTemplateLiteral',
-            fix(fixer): TSESLint.RuleFix[] {
-              const [prevQuasi, nextQuasi] = node.quasis;
-
-              // Remove the quasis and backticks.
-              return [
-                fixer.removeRange([
-                  prevQuasi.range[1] - 3,
-                  node.expressions[0].range[0],
-                ]),
-
-                fixer.removeRange([
-                  node.expressions[0].range[1],
-                  nextQuasi.range[0] + 2,
-                ]),
-              ];
+            fix(fixer): TSESLint.RuleFix | null {
+              const wrappingCode = getWrappingCode({
+                sourceCode: context.sourceCode,
+                replaceNode: node.expressions[0],
+                originNode: node,
+                parent: node.parent,
+              });
+
+              return fixer.replaceText(node, wrappingCode);
             },
           });
 

packages/eslint-plugin/src/util/getWrappingFixer.ts

@@ -75,6 +75,23 @@ export function getWrappingFixer(
   };
 }
 
+export function getWrappingCode(params: {
+  sourceCode: Readonly<TSESLint.SourceCode>;
+  replaceNode: TSESTree.Node;
+  originNode: TSESTree.Node;
+  parent: TSESTree.Node;
+}): string {
+  const { sourceCode, replaceNode, originNode, parent } = params;
+  const code = sourceCode.getText(replaceNode);
+  const isNodeNeedParen = !isStrongPrecedenceNode(replaceNode);
+  const isParentNeedParam = isWeakPrecedenceParent(originNode, parent);
+
+  if (isNodeNeedParen && isParentNeedParam) {
+    return `(${code})`;
+  }
+  return code;
+}
+
 /**
  * Check if a node will always have the same precedence if it's parent changes.
  */
@@ -97,9 +114,13 @@ export function isStrongPrecedenceNode(innerNode: TSESTree.Node): boolean {
 /**
  * Check if a node's parent could have different precedence if the node changes.
  */
-function isWeakPrecedenceParent(node: TSESTree.Node): boolean {
-  // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-  const parent = node.parent!;
+function isWeakPrecedenceParent(
+  node: TSESTree.Node,
+  parent = node.parent,
+): boolean {
+  if (!parent) {
+    return false;
+  }
 
   if (
     parent.type === AST_NODE_TYPES.UpdateExpression ||

packages/eslint-plugin/tests/rules/no-useless-template-literals.test.ts

@@ -637,5 +637,14 @@ declare const nested: string, interpolation: string;
         },
       ],
     },
+    {
+      code: "true ? `${'test' || ''}`.trim() : undefined;",
+      output: "true ? ('test' || '').trim() : undefined;",
+      errors: [
+        {
+          messageId: 'noUselessTemplateLiteral',
+        },
+      ],
+    },
   ],
 });