prefer-template-literal

Prefer template literals over string concatenation with + when at least one operand is a runtime value. This rule is part of eslint-plugin-modernization.

Quick SummaryCopy Anchor Link

Rule DetailsCopy Anchor Link

Template literals with ${} interpolation are more readable and less error-prone than concatenating strings with +. This rule flags any + expression that mixes string literals with runtime values (variables, member expressions, function calls, etc.) and rewrites the entire chain as a single template literal.

Pure string-literal concatenation ("foo" + "bar") and numeric addition (1 + 2) are intentionally ignored.

Why This MattersCopy Anchor Link

ExamplesCopy Anchor Link

❌ IncorrectCopy Anchor Link

// String concatenation with runtime value
const greeting = "Hello, " + name + "!";
const path = "/api/v1/" + resource + "/" + id;
const message = "Error: " + err.message;

✅ CorrectCopy Anchor Link

// Template literal with interpolation
const greeting = `Hello, ${name}!`;
const path = `/api/v1/${resource}/${id}`;
const message = `Error: ${err.message}`;
// Pure string concat is fine (no runtime values)
const url = "https://" + "example.com";

Configuration ExamplesCopy Anchor Link

Basic UsageCopy Anchor Link

{
  rules: {
    'modernization/prefer-template-literal': 'warn'
  }
}

Related RulesCopy Anchor Link

• prefer-at - Modern array element access
• prefer-event-target - Modern event handling

Further ReadingCopy Anchor Link

• Template literals - MDN - MDN reference
• ES2015 Features - ECMAScript specification

Known False NegativesCopy Anchor Link

The following patterns are not detected due to static analysis limitations:

Dynamic Variable ReferencesCopy Anchor Link

Why: Static analysis cannot always determine whether a variable holds a string or a number at the point of + use.

// ❌ NOT DETECTED - ambiguous operand type
const result = a + b; // could be numeric addition

Mitigation: Add TypeScript types so the linter has enough signal, or review concatenation chains manually.

Imported ValuesCopy Anchor Link

Why: When values come from imports, the rule cannot analyze their origin or construction.

// ❌ NOT DETECTED - Value from import
import { prefix } from './constants';
const path = prefix + resource; // Cross-file origin not tracked

Mitigation: Ensure imported string values are typed as string in TypeScript so the rule can flag the concatenation.

Use this rule

npm install -D oxlint-plugin-modernization

{  "jsPlugins": ["oxlint-plugin-modernization"],  "rules": {    "modernization/prefer-template-literal": "error"  }}

import { defineConfig } from 'vite-plus';export default defineConfig({  lint: {    jsPlugins: ['oxlint-plugin-modernization'],    rules: {      'modernization/prefer-template-literal': 'error',    },  },});