Sublime Text配合eslint-plugin-vue校验组件-sublime-PHP中文网

sublime text中eslint-plugin-vue不报错，是因为.vue文件未被eslint正确处理：需确保.eslintrc.js含overrides配置processor: 'vue/.vue'、parser: 'vue-eslint-parser'，并安装vue-eslint-parser和eslint-plugin-vue，sublimelinter-eslint须指向本地eslint路径且重启生效。

sublime text配合eslint-plugin-vue校验组件

Sublime Text里eslint-plugin-vue不报错？先确认ESLint是否真在跑.vue文件

很多用户以为装了插件就自动生效，结果改了v-model拼写错误也没提示——根本原因是Sublime Text默认不把.vue文件交给ESLint处理。

关键点在于：ESLint本身不原生支持.vue，必须靠eslint-plugin-vue + 正确的overrides配置才能识别单文件组件里的<script></script>和<template></template>块。

检查项目根目录是否有.eslintrc.js（或.eslintrc.cjs），且包含类似这样的overrides：

module.exports = {
  extends: ['eslint:recommended', 'plugin:vue/vue3-essential'],
  plugins: ['vue'],
  overrides: [
    {
      files: ['*.vue'],
      processor: 'vue/.vue'
    }
  ]
}

确保eslint-plugin-vue已安装：npm install eslint-plugin-vue --save-dev（版本需匹配Vue 2/3）
Sublime Text端必须用SublimeLinter-eslint插件，且其设置中eslint_env_vars要指向项目本地node_modules/.bin/eslint，不能只依赖全局ESLint

SublimeLinter-eslint报`Definition for rule 'vue/multi-word-component-names' was not found`

这是典型规则注册失败：ESLint加载了插件，但没正确启用它提供的规则集。

Vue

避免 Vue 常见错误——响应式陷阱、ref 与 reactive 区别、计算属性时机及 Composition API 陷阱。

下载

vue/multi-word-component-names是eslint-plugin-vue的规则，不是ESLint内置规则，必须显式启用
在.eslintrc.js的rules或extends中加入对应配置，例如：

extends: [
  'plugin:vue/vue3-essential' // ✅ 启用基础规则集
  // 或手动开启单条规则：
  // 'vue/multi-word-component-names': 'error'
]

如果用了eslint-config-airbnb-base这类第三方配置，它会覆盖plugin:vue的规则，需调整extends顺序，把plugin:vue放在最后
重启Sublime Text（或至少重启SublimeLinter服务），因为插件缓存规则列表，改配置后不重启无效

Template里`v-bind:key`没警告？检查parserOptions和processor是否协同工作

eslint-plugin-vue对<template></template>的校验依赖两个环节：解析器（parser）识别Vue模板语法，处理器（processor）把.vue拆成JS+HTML片段再分别 lint。

必须同时配置parser和processor：

module.exports = {
  parser: 'vue-eslint-parser',
  parserOptions: {
    parser: '@babel/eslint-parser', // 解析<script>用Babel
    ecmaVersion: 2020,
    sourceType: 'module'
  },
  overrides: [{
    files: ['*.vue'],
    processor: 'vue/.vue'
  }]
}</script>

漏掉parser: 'vue-eslint-parser'会导致<template></template>部分完全跳过校验
vue-eslint-parser必须安装：npm install vue-eslint-parser --save-dev
注意：Vue 3项目用plugin:vue/vue3-essential，Vue 2项目用plugin:vue/essential，混用会导致v-model等规则失效

保存时自动修复失败，`eslint --fix`在Sublime里不生效

SublimeLinter-eslint默认只做校验，不执行--fix；即使开了fix_on_save，也受限于规则是否支持自动修复。

确认.eslintrc.js中该规则标记为fixable: true（如vue/multiline-html-element-content-newline可修，vue/require-v-for-key不可修）
SublimeLinter-eslint设置里加："fix_on_save": true，且确保"executable": "./node_modules/.bin/eslint"路径正确
某些规则（如vue/valid-v-for）语义复杂，ESLint无法安全自动修复，只能报错，别指望它帮你补:key
更可靠的修复方式：终端执行npx eslint --fix src/**/*.vue，再回Sublime看效果

真正容易被忽略的是processor和parser的耦合关系——少一个，.vue就只剩<script></script>能被扫到，<template></template>和<style></style>等于裸奔。配错版本、路径或顺序，表面看着插件都装了，实际90%的校验根本没触发。