一文了解ESlint使用(vue2)

原创已于 2025-10-17 03:12:59 修改 · 514 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端

于 2025-10-10 03:53:06 首次发布

一.ESlint版本与介绍

在使用插件的时候版本使用正确是非常重要的,如果是二开项目重构的话需要自己找对一个的版本

ESLint 版本

ESLint: 7.32.0
eslint-plugin-vue: ^7.20.0
eslint-loader:4.0.2
babel-eslint:10.1.0

下面安装ESlint7的最新版本与兼容的eslint-plugin-vue

npm install --save-dev eslint@7.32.0 eslint-plugin-vue@7.20.0 eslint-loader@4.0.2 @babel/eslint-parser

npm install --save-dev babel-eslint

插件的作用

ESlint 核心 (eslint@7.32.0)
- 作用：JavaScript/TypeScript 代码质量检查的核心工具
ESlint 插件 (eslint-plugin-vue@7.20.0 )
- 作用：为 Vue 单文件组件提供专门的检查规则
语法解析适配器 (babel-eslint@10.1.0)
- 让 ESLint 能理解现代 JS 语法, 将现在很多新语法转为eslint能理解的语法
构建工具集成 (eslint-loader@4.0.2)
- 作用：在 Webpack 构建过程中自动运行 ESLint 检查

ESLint 核心只能理解标准 JavaScript

// 但现代项目使用很多新语法：
const modernJS = `
  const obj = { ...spread };
  class MyClass { }
  optional?.chaining;
  const [a, b] = array;
`

// babel-eslint 的作用：将现代语法"翻译"成 ESLint 能理解的形式

# 开发时的工作流程
1. 你修改 .vue 文件
   ↓
2. eslint-loader 检测到文件变化
   ↓
3. eslint-loader 调用 eslint 核心
   ↓
4. eslint 应用 eslint-plugin-vue 的 Vue 规则
   ↓
5. 在终端或浏览器显示检查结果

为什么不使用ESlint8/9

eslint-plugin-vue 兼容性

{
  "eslint-plugin-vue": "^6.2.2",  // 专为 Vue 2 设计   不一定兼容ESlint7可能需要用ESlint6
  "eslint-plugin-vue": "^7.20.0", // 专为 Vue 2 设计  兼容ESlint7
  "eslint-plugin-vue": "^8.0.0",  // 专为 Vue 3 设计，对 Vue 2 支持不完善
  "eslint-plugin-vue": "^9.0.0"   // 主要面向 Vue 3
}

规则变更和破坏性更新

ESLint 8+ 引入了很多破坏性变更：

// ESLint 7 及以下
module.exports = {
  parser: 'babel-eslint'
}

// ESLint 8+ 需要改为
module.exports = {
  parser: '@babel/eslint-parser'  // babel-eslint 已弃用
}

配置格式变化

// ESLint 7 及以下
module.exports = {
  parser: 'babel-eslint'
}

// ESLint 8+ 需要改为
module.exports = {
  parser: '@babel/eslint-parser'  // babel-eslint 已弃用
}

插件支持

{
  "问题": "许多 Vue 2 生态插件未及时更新支持 ESLint 8+",
  "影响": [
    "vue-eslint-parser 兼容性问题",
    "eslint-config-standard 版本冲突",
    "自定义规则可能失效"
  ]
}

二.配置文件与规则了解

创建配置文件

在根目录下创建配置文件.eslintrc.js

在其他的文章中或者文档中可能会看到创建eslint.config.js,这个是ESlint8的新创建,当然是否兼容老式的文件命名需要尝试

配置文件内容

module.exports = {
  root: true, // 标记为根配置文件，阻止向上查找
  env: {
    browser: true, // 浏览器全局变量 (window, document)
    es6: true, // ES6+ 语法支持
    node: true, // Node.js 全局变量 (module, process)
  },
  parser: "vue-eslint-parser", // 专门解析 .vue 文件的解析器

  parserOptions: {
    parser: "@babel/eslint-parser", // 解析 <script> 块中的 JS
    ecmaVersion: 2020, // 支持 ES2020 语法
    sourceType: "module", // 使用 ES 模块
    requireConfigFile: false, // 不需要 babel 配置文件
    babelOptions: {
      presets: ["@babel/preset-env"], // Babel 预设
    },
  },
  //引入默认的规则集合
  extends: [
    "eslint:recommended", // js的规则
    "plugin:vue/recommended", // Vue 的规则
  ],

  plugins: [
    "vue", // 启用 Vue 语法检查
  ],
};

查看引入的默认规则

使用 ESLint CLI 命令

# 查看 eslint:recommended 的所有规则
npx eslint --print-config your-file.js

# 只查看 Vue 规则
npx eslint --print-config test.vue | grep 'vue/'

# 只查看 ESLint 核心规则（无前缀的）
npx eslint --print-config test.vue | grep -E '^[^"/]+:'

# 或者创建一个临时文件来查看配置
npx eslint --print-config temp.js > temp.js

在代码中输出规则

// check-rules.js
const eslintRecommended = require('eslint/conf/eslint-recommended');
console.log(JSON.stringify(eslintRecommended.rules, null, 2));

在线查看

https://eslint.vuejs.org/rules/multi-word-component-names.html eslint-plugin-vue规则表

实际查看方法

创建一个测试命令在 package.json 中：

{
  "scripts": {
    "check-rules": "node -e \"console.log(JSON.stringify(require('eslint/conf/eslint-recommended').rules, null, 2))\""
  }
}

然后运行：

npm run check-rules

区分ESlint规则与eslint-plugin-vue规则

通过规则名前缀区分

// ESLint 核心规则（无前缀或 eslint: 前缀）
"no-console"                   // ✅ ESLint 规则
"no-unused-vars"               // ✅ ESLint 规则  
"semi"                         // ✅ ESLint 规则
"eslint:recommended"           // ✅ ESLint 规则集

// eslint-plugin-vue 规则（vue/ 前缀）
"vue/no-parsing-error"         // ✅ Vue 规则
"vue/require-v-for-key"        // ✅ Vue 规则
"vue/max-attributes-per-line"  // ✅ Vue 规则
"plugin:vue/recommended"       // ✅ Vue 规则集

主要规则概览

{
  "no-dupe-keys": "error",           // 禁止对象重复键
  "no-duplicate-case": "error",      // 禁止重复 case
  "no-empty": "error",               // 禁止空块
  "no-extra-semi": "error",          // 禁止多余分号
  "no-unreachable": "error",         // 禁止不可达代码
  "no-unsafe-negation": "error",     // 禁止不安全的取反
  "valid-typeof": "error"            // 有效的 typeof 比较
}
{
  "no-unused-vars": "warn",          // 未使用变量警告
  "no-constant-condition": "warn",   // 常量条件警告
  "no-debugger": "warn",             // debugger 警告
  "no-dupe-args": "error",           // 函数重复参数
  "no-inner-declarations": "error",  // 禁止在块内声明函数
}
{
  "vue/no-parsing-error": "error",           // 模板解析错误
  "vue/no-duplicate-attributes": "error",    // 重复属性
  "vue/no-unused-vars": "warn",              // 未使用的变量
  "vue/valid-template-root": "error",        // 有效的模板根
  "vue/require-v-for-key": "error",          // v-for 需要 key
}
{
  "vue/component-definition-name-casing": ["error", "PascalCase"] //组件必须使用大驼峰命名
  "vue/html-closing-bracket-newline": "error",      // 闭合括号换行格式
  "vue/html-closing-bracket-spacing": "error",      // 闭合括号间距
  "vue/html-end-tags": "error",                     // 必须使用结束标签
  "vue/html-indent": "error",                       // HTML 统一缩进
  "vue/html-quotes": "error"                        // 属性值引号格式
  "vue/max-attributes-per-line": "error",           // 每行属性数量限制
  "vue/no-multi-spaces": "error",                   // 禁止多余空格
  "vue/no-spaces-around-equal-signs-in-attribute": "error" // 属性等号无空格
  "vue/mustache-interpolation-spacing": "error"     // 插值语法空格
  "vue/multiline-html-element-content-newline": "error",     // 多行元素内容换行
  "vue/singleline-html-element-content-newline": "error"     // 单行元素内容换行
  "vue/v-bind-style": "error",      // 强制使用 : 简写
  "vue/v-on-style": "error",        // 强制使用 @ 简写  
  "vue/v-slot-style": "error"       // v-slot 使用规范
  "vue/require-default-prop": "error",    // Props 需要默认值
  "vue/require-prop-types": "error",      // Props 需要类型定义
  "vue/no-template-shadow": "error"       // 禁止模板变量名冲突
}

如果觉得太严格，可以适当调整为 warn 或自定义配置：

eslint:recommended: 约 100+ 条规则

plugin:vue/recommended: 约 50+ 条规则

实用技巧

如果你想查看当前项目实际生效的规则：

# 查看某个文件应用的所有规则
npx eslint --print-config src/App.vue

# 只查看启用的规则
npx eslint --print-config src/App.vue | grep -A5 '"rules"'

VSCode配置文件

VSCode 的配置文件使用频率很高，大多数第三方插件的配置都需要在这里进行设置。

关于 VSCode 配置文件的详细说明，建议参考《VS Code 入门完全指南》。这里我们直接在工作区配置文件中进行配置即可

VS Code配置文件有全局的和项目级配置文件(每个项目单独的

VS Code配置文件)一般在根目录下.vscode/settings.json,如果没有可以创建,

或者使用快捷键Ctrl + Shift + P (Windows/Linux)
# 打开工作区设置 (JSON格式)
"Preferences: Open Workspace Settings (JSON)"

后面会针对vs code的使用出一片文章

{
  // ESLint 配置
  "eslint.enable": true,    //开启 ESLint 功能
  "eslint.workingDirectories": [    //指定工作目录为项目根目录
    "."
  ],
  "eslint.options": {
    "configFile": ".eslintrc.js"    //明确指定 ESLint 配置文件为 .eslintrc.js
  },

  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": "explicit"  // 保存时修复配置  需要通过点击"快速修复"灯泡💡或快捷键手动触发
  },
  // 验证的文件类型
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    "vue",
    "html"
  ],
  // 针对不同文件的格式化配置
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode",    //使用的是prettier 格式化
    "editor.formatOnSave": true
  },
  "[vue]": {
    "editor.defaultFormatter": "dbaeumer.vscode-eslint",    //启用ESlint的格式化
    "editor.formatOnSave": true
  },
  "[html]": {
    "editor.formatOnSave": true
  }
}