no-unnecessary-template-expression
Disallow unnecessary template expressions.
Extending "plugin:@typescript-eslint/strict-type-checked"
in an ESLint configuration enables this rule.
Some problems reported by this rule are automatically fixable by the --fix
ESLint command line option.
This rule requires type information to run.
This rule reports template literals that contain substitution expressions (also variously referred to as embedded expressions or string interpolations) that are unnecessary and can be simplified.
no-useless-template-literals
This rule was formerly known as no-useless-template-literals
.
The new name is a drop-in replacement with identical functionality.
module.exports = {
"rules": {
"@typescript-eslint/no-unnecessary-template-expression": "error"
}
};
Try this rule in the playground ↗
Examples
- ❌ Incorrect
- ✅ Correct
// Static values can be incorporated into the surrounding template.
const ab1 = `${'a'}${'b'}`;
const ab2 = `a${'b'}`;
const stringWithNumber = `${'1 + 1 = '}${2}`;
const stringWithBoolean = `${'true is '}${true}`;
// Some simple expressions that are already strings
// can be rewritten without a template at all.
const text = 'a';
const wrappedText = `${text}`;
declare const intersectionWithString: string & { _brand: 'test-brand' };
const wrappedIntersection = `${intersectionWithString}`;
Open in Playground// Static values can be incorporated into the surrounding template.
const ab1 = `ab`;
const ab2 = `ab`;
const stringWithNumber = `1 + 1 = 2`;
const stringWithBoolean = `true is true`;
// Some simple expressions that are already strings
// can be rewritten without a template at all.
const text = 'a';
const wrappedText = text;
declare const intersectionWithString: string & { _brand: 'test-brand' };
const wrappedIntersection = intersectionWithString;
Open in PlaygroundThis rule does not aim to flag template literals without substitution expressions that could have been written as an ordinary string.
That is to say, this rule will not help you turn `this`
into "this"
.
If you are looking for such a rule, you can configure the @stylistic/ts/quotes
rule to do this.
Options
This rule is not configurable.
When Not To Use It
When you want to allow string expressions inside template literals.
Related To
Type checked lint rules are more powerful than traditional lint rules, but also require configuring type checked linting. See Troubleshooting > Linting with Type Information > Performance if you experience performance degredations after enabling type checked rules.