如何解决ESLint中@typescript-eslint/no-useless-template-literals与prefer-template规则冲突？

问题场景 #

在使用ESLint 8.56.0和@typescript-eslint/* 7.0.2时，遇到以下规则冲突：

• 场景1：模板字面量拼接触发@typescript-eslint/no-useless-template-literals警告

  Logger.logInfo({
    //...
    description:
        `${ this.TARGET_SOURCE_FILES_TYPE__SINGULAR_FORM__CAPITALIZED } file has been added.
  ` +
        `${ targetFileOrDirectoryAbsolutePath }`
  });
  

  警告：ESLint: Template literal expression is unnecessary and can be simplified. (@typescript-eslint/no-useless-template-literals)

• 场景2：混合模板字面量与普通字符串拼接触发prefer-template警告

  Logger.logInfo({
    // ...
    description:
        `${ this.TARGET_SOURCE_FILES_TYPE__SINGULAR_FORM__CAPITALIZED } file has been added.
  ` +
        targetFileOrDirectoryAbsolutePath
  });
  

  警告：ESLint: Unexpected string concatenation.(prefer-template)

• 场景3：纯字符串拼接同样触发prefer-template警告

  Logger.logInfo({
    // ...
    description:
        this.TARGET_SOURCE_FILES_TYPE__SINGULAR_FORM__CAPITALIZED +
        " file has been added.\n" +
        targetFileOrDirectoryAbsolutePath
  });
  

• 场景4：单个长模板字面量违反max-len规则，换行拆分又引入多余空格

  Logger.logInfo({
    // ...
    description:
        `${ this.TARGET_SOURCE_FILES_TYPE__SINGULAR_FORM__CAPITALIZED } file has been added.
  

${ targetFileOrDirectoryAbsolutePath } `
});

```javascript
Logger.logInfo({
  // ...
  description:
      `${ this.TARGET_SOURCE_FILES_TYPE__SINGULAR_FORM__CAPITALIZED } file has been updated.

      ${ targetFileOrDirectoryAbsolutePath }`
});

解决方案 #

1. 调整ESLint规则配置，从根源解决冲突 #

修改.eslintrc（或.eslintrc.json）配置，放宽冲突规则：

{
  "rules": {
    // 允许模板字面量与字符串拼接，避免无用模板字面量警告
    "@typescript-eslint/no-useless-template-literals": ["warn", { "allowStringConcatenation": true }],
    // 调整max-len规则，忽略字符串和模板字面量的长度限制
    "max-len": ["warn", {
      "code": 130,
      "ignoreStrings": true,
      "ignoreTemplateLiterals": true
    }]
  }
}

如果不需要全局调整，也可以针对特定规则降级警告或直接关闭。

2. 使用数组join方法拼接字符串 #

这种写法既不会触发任何规则警告，又能灵活控制换行和格式：

Logger.logInfo({
  description: [
    `${this.TARGET_SOURCE_FILES_TYPE__SINGULAR_FORM__CAPITALIZED} file has been added.`,
    targetFileOrDirectoryAbsolutePath
  ].join('\n')
});

需要空行时，直接在数组中加入空字符串即可：

Logger.logInfo({
  description: [
    `${this.TARGET_SOURCE_FILES_TYPE__SINGULAR_FORM__CAPITALIZED} file has been updated.`,
    "",
    targetFileOrDirectoryAbsolutePath
  ].join('\n')
});

3. 优化模板字面量换行写法，避免多余空格 #

利用模板字面量的换行特性，配合trim()处理多余空格，同时满足max-len规则：

Logger.logInfo({
  description: `
${this.TARGET_SOURCE_FILES_TYPE__SINGULAR_FORM__CAPITALIZED} file has been added.
${targetFileOrDirectoryAbsolutePath}
`.trim()
});

或者直接对齐换行，避免引入前导空格：

Logger.logInfo({
  description: `${this.TARGET_SOURCE_FILES_TYPE__SINGULAR_FORM__CAPITALIZED} file has been added.
${targetFileOrDirectoryAbsolutePath}`
});

4. 局部禁用冲突规则（适合个别场景） #

如果只是少数代码出现冲突，可以在代码上方添加注释临时禁用规则：

// eslint-disable-next-line @typescript-eslint/no-useless-template-literals
Logger.logInfo({
  description:
      `${this.TARGET_SOURCE_FILES_TYPE__SINGULAR_FORM__CAPITALIZED} file has been added.
` +
      `${targetFileOrDirectoryAbsolutePath}`
});

需要同时禁用多个规则时：

// eslint-disable-next-line prefer-template, @typescript-eslint/no-useless-template-literals
Logger.logInfo({
  description:
      `${this.TARGET_SOURCE_FILES_TYPE__SINGULAR_FORM__CAPITALIZED} file has been added.
` +
      targetFileOrDirectoryAbsolutePath
});

内容的提问来源于stack exchange，提问作者Takeshi Tokugawa YD