fix(eslint-plugin): [no-useless-template-literals] detect TemplateLit…

…eral (#8575) * fix(eslint-plugin): [no-useless-template-literals] detect TemplateLiteral" * feat: add test for nested TemplateLiteral * refactor: modify code and tests
typescript-eslint · Mar 6, 2024 · ef0e5cc · ef0e5cc
1 parent 5292399
commit ef0e5cc
Show file tree

Hide file tree

Showing 2 changed files with 105 additions and 5 deletions.
diff --git a/packages/eslint-plugin/src/rules/no-useless-template-literals.ts b/packages/eslint-plugin/src/rules/no-useless-template-literals.ts
@@ -57,6 +57,10 @@ export default createRule<[], MessageId>({
  return expression.type === AST_NODE_TYPES.Literal;
  }
 
+ function isTemplateLiteral(expression: TSESTree.Expression): boolean {
+ return expression.type === AST_NODE_TYPES.TemplateLiteral;
+ }
+
  function isInfinityIdentifier(expression: TSESTree.Expression): boolean {
  return (
  expression.type === AST_NODE_TYPES.Identifier &&
@@ -110,8 +114,9 @@ export default createRule<[], MessageId>({
  }
 
  const fixableExpressions = node.expressions.filter(
- (expression): expression is TSESTree.Literal | TSESTree.Identifier =>
+ expression =>
  isLiteral(expression) ||
+ isTemplateLiteral(expression) ||
  isUndefinedIdentifier(expression) ||
  isInfinityIdentifier(expression) ||
  isNaNIdentifier(expression),
@@ -145,6 +150,19 @@ export default createRule<[], MessageId>({
  const escapedValue = stringValue.replace(/([`$\\])/g, '\\$1');
 
  fixes.push(fixer.replaceText(expression, escapedValue));
+ } else if (isTemplateLiteral(expression)) {
+ // Note that some template literals get handled in the previous branch too.
+ // Remove the beginning and trailing backtick characters.
+ fixes.push(
+ fixer.removeRange([
+ expression.range[0],
+ expression.range[0] + 1,
+ ]),
+ fixer.removeRange([
+ expression.range[1] - 1,
+ expression.range[1],
+ ]),
+ );
  }
 
  return fixes;

diff --git a/packages/eslint-plugin/tests/rules/no-useless-template-literals.test.ts b/packages/eslint-plugin/tests/rules/no-useless-template-literals.test.ts
@@ -131,6 +131,10 @@ ruleTester.run('no-useless-template-literals', rule, {
  noFormat`
  \`with windows \r new line\`;
  `,
+
+ `
+\`not a useless \${String.raw\`nested interpolation \${a}\`}\`;
+ `,
  ],
 
  invalid: [
@@ -358,14 +362,92 @@ ruleTester.run('no-useless-template-literals', rule, {
  },
 
  {
- code: "`a${'b'}`;",
- output: '`ab`;',
+ code: "`use${'less'}`;",
+ output: '`useless`;',
  errors: [
  {
  messageId: 'noUselessTemplateLiteral',
  line: 1,
- column: 5,
- endColumn: 8,
+ },
+ ],
+ },
+
+ {
+ code: '`use${`less`}`;',
+ output: '`useless`;',
+ errors: [
+ {
+ messageId: 'noUselessTemplateLiteral',
+ line: 1,
+ },
+ ],
+ },
+
+ {
+ code: `
+declare const nested: string, interpolation: string;
+\`use\${\`less\${nested}\${interpolation}\`}\`;
+ `,
+ output: `
+declare const nested: string, interpolation: string;
+\`useless\${nested}\${interpolation}\`;
+ `,
+ errors: [
+ {
+ messageId: 'noUselessTemplateLiteral',
+ },
+ ],
+ },
+
+ {
+ code: noFormat`
+\`u\${
+ // hopefully this comment is not needed.
+ 'se'
+
+}\${
+ \`le\${ \`ss\` }\`
+}\`;
+ `,
+ output: `
+\`use\${
+ \`less\`
+}\`;
+ `,
+ errors: [
+ {
+ messageId: 'noUselessTemplateLiteral',
+ line: 4,
+ },
+ {
+ messageId: 'noUselessTemplateLiteral',
+ line: 7,
+ column: 3,
+ endLine: 7,
+ },
+ {
+ messageId: 'noUselessTemplateLiteral',
+ line: 7,
+ column: 10,
+ endLine: 7,
+ },
+ ],
+ },
+ {
+ code: noFormat`
+\`use\${
+ \`less\`
+}\`;
+ `,
+ output: `
+\`useless\`;
+ `,
+ errors: [
+ {
+ messageId: 'noUselessTemplateLiteral',
+ line: 3,
+ column: 3,
+ endColumn: 9,
  },
  ],
  },