ESLint/Prettier推荐配置下反引号无法正常使用的问题

你的问题核心是当前ESLint配置强制限制了引号风格，导致反引号无法正常使用。按以下步骤调整配置即可实现两者共存：

1. 替换原生ESLint引号规则为TypeScript专属规则 #

在.eslintrc.js的rules中，删除原生的quotes配置，改用@typescript-eslint/quotes规则——这个规则更适配TypeScript项目，支持同时允许双引号和反引号：

module.exports = {
  root: true,
  env: {
    es6: true,
    node: true,
  },
  extends: [
    "eslint:recommended",
    "plugin:import/errors",
    "plugin:import/warnings",
    "plugin:import/typescript",
    "google",
    "plugin:@typescript-eslint/recommended",
    "prettier",
  ],
  parser: "@typescript-eslint/parser",
  parserOptions: {
    project: ["./tsconfig.json", "./tsconfig.dev.json"],
    sourceType: "module",
    tsconfigRootDir: __dirname,
  },
  ignorePatterns: [
    "/lib/**/*", // Ignore built files.
  ],
  plugins: ["@typescript-eslint", "import", "prettier"],
  rules: {
    "prettier/prettier": ["error", { endOfLine: "auto" }],
    // 替换为TypeScript专属引号规则
    "@typescript-eslint/quotes": [
      "error",
      "double",
      {
        allowTemplateLiterals: true, // 允许使用反引号模板字符串
        avoidEscape: true // 字符串含双引号时，允许用反引号规避转义
      }
    ],
    "import/no-unresolved": 0,
    "@typescript-eslint/no-explicit-any": "off",
  },
};

2. 确认Prettier配置无冲突 #

你的Prettier配置"singleQuote": false已设置为默认双引号，和调整后的ESLint规则匹配，无需修改。

3. 重启ESLint服务 #

修改配置后，按Ctrl+Shift+P（Windows/Linux）或Cmd+Shift+P（Mac），输入ESLint: Restart ESLint Server，让新配置生效。

调整完成后，ESLint会允许你在需要模板字符串时使用反引号，普通字符串使用双引号，不会再触发报错。

内容的提问来源于stack exchange，提问作者DavidZas