VSCode中TypeScript模板字面量类型触发ESLint解析错误如何解决

你遇到的报错是因为ESLint默认解析器不支持TypeScript专属的类型语法，模板字面量类型是TS4.1新增的特性，你使用的TS4.3.5本身支持该特性，问题出在ESLint的解析配置上，可按以下步骤调整：

1. 安装必要依赖 #

首先安装TypeScript专属的ESLint解析器和插件：

npm install @typescript-eslint/parser @typescript-eslint/eslint-plugin --save-dev

如果用yarn或pnpm，替换对应的安装命令即可。

2. 更新.eslintrc.json配置 #

替换原有配置，指定TS专属解析器：

{
    "parser": "@typescript-eslint/parser",
    "plugins": ["@typescript-eslint"],
    "parserOptions": {
        "ecmaVersion": "latest",
        "sourceType": "module",
        "ecmaFeatures": {
            "jsx": true
        },
        "project": "./tsconfig.json"
    },
    "rules": {
        "semi": "error"
    }
}

3. 确认VSCode ESLint插件配置 #

打开VSCode设置（快捷键Ctrl+,/Cmd+,），搜索eslint.validate，确保配置中包含typescript相关校验项：

"eslint.validate": [
    "javascript",
    "javascriptreact",
    "typescript",
    "typescriptreact"
]

4. 校验tsconfig.json存在 #

确保项目根目录下有合法的tsconfig.json文件，若不存在可执行npx tsc --init生成默认配置。

5. 重启ESLint服务 #

按Ctrl+Shift+P/Cmd+Shift+P调出命令面板，执行ESLint: Restart ESLint Server即可生效，无需重启整个VSCode。

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