TypeScript遇ESLint错误：Missing initializer in const declaration求助

问题重现 #

TypeScript代码中定义带类型注解的常量时，ESLint抛出解析错误：

Parsing error: Missing initializer in const declaration. (8:21)eslint

相关代码：

// Styles
import "@mdi/font/css/materialdesignicons.css";
import "vuetify/styles";

// Vuetify
import { createVuetify, ThemeDefinition } from "vuetify";

const customDarkTheme: ThemeDefinition = {
  colors: {
    background: "#000000",
    surface: "#000000",
    primary: "#ec008c",
  },
};

当前.eslintrc.json配置：

module.exports = {
  root: true,
  env: {
    node: true,
  },
  extends: [
    "plugin:vue/vue3-recommended",
    "plugin:prettier/recommended",
    "eslint:recommended",
  ],
  parserOptions: {
    parser: "@babel/eslint-parser",
  },
};

解决方案 #

1. 安装TypeScript ESLint依赖 #

执行命令安装适配TypeScript的ESLint解析器和插件：

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

2. 修改ESLint配置文件 #

将.eslintrc.json调整为以下内容，替换原解析器并添加TypeScript规则集：

module.exports = {
  root: true,
  env: {
    node: true,
  },
  extends: [
    "plugin:vue/vue3-recommended",
    "plugin:prettier/recommended",
    "eslint:recommended",
    "plugin:@typescript-eslint/recommended"
  ],
  parser: "@typescript-eslint/parser",
  plugins: ["@typescript-eslint"],
  parserOptions: {
    ecmaVersion: "latest",
    sourceType: "module"
  }
};

原因说明 #

@babel/eslint-parser仅负责解析ES6+语法，无法识别TypeScript特有的类型注解语法，会把const customDarkTheme: ThemeDefinition误判为缺少初始化器的const声明。换成@typescript-eslint/parser后，ESLint就能正确解析TypeScript语法结构，错误提示会消失。

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