如何使用ESLint检查Vue模板中的JS/TS表达式？

要让Vue模板里的{{ a.b }}、v-if="a === -0"这类表达式被ESLint识别并检查，核心是通过eslint-plugin-vue插件配合TypeScript解析器实现，具体步骤如下：

1. 安装必要依赖 #

确保项目中已安装以下ESLint相关依赖（未安装则执行下方命令）：

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

2. 配置ESLint规则文件 #

在项目根目录创建或修改.eslintrc.cjs（或.eslintrc.js），配置示例如下：

module.exports = {
  root: true,
  env: {
    browser: true,
    es2021: true,
    node: true
  },
  // 用vue-eslint-parser解析Vue模板，内部委托TS解析器处理TS代码
  parser: 'vue-eslint-parser',
  parserOptions: {
    ecmaVersion: 'latest',
    parser: '@typescript-eslint/parser',
    sourceType: 'module'
  },
  // 启用Vue和TS的ESLint插件
  plugins: ['vue', '@typescript-eslint'],
  // 继承推荐的规则集
  extends: [
    'eslint:recommended',
    // 可根据需求换用vue3-recommended/vue3-essential规则集
    'plugin:vue/vue3-strongly-recommended',
    '@typescript-eslint/recommended'
  ],
  rules: {
    // 避免script setup中定义的变量在模板使用时被误报未使用
    'vue/script-setup-uses-vars': 'error',
    // 自定义未使用变量检查规则，可按需调整
    '@typescript-eslint/no-unused-vars': ['error', { varsIgnorePattern: '^_' }],
    // 开启模板表达式合法性检查
    'vue/no-invalid-template-expressions': 'error'
  }
}

3. 配置IDE（以VS Code为例） #

确保VS Code的ESLint插件已启用，同时在项目的.vscode/settings.json中添加以下配置，让ESLint支持Vue文件的检查：

{
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    "typescript",
    "typescriptreact",
    "vue"
  ],
  // 可选：保存时自动修复可修复的ESLint问题
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  }
}

原理说明 #

• vue-eslint-parser负责解析Vue单文件组件的模板部分，提取其中的JS/TS表达式。
• 提取出的表达式会被交给@typescript-eslint/parser进行TS语法和类型校验。
• eslint-plugin-vue提供的专属规则会针对模板表达式做检查，未定义变量、非法表达式等问题都会被捕获。

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