深入解析ESLint配置:从入门到精通的全方位指南,精细调优你的代码质量保障工具

简介: 深入解析ESLint配置:从入门到精通的全方位指南,精细调优你的代码质量保障工具

一、介绍

ESLint是一个主流的JavaScript Lint工具,用于监测JavaScript代码质量,可以帮助开发者提升编码能力。它可以很容易地统一开发者的编程风格,同时也可以通过配置文件来自定义规则。在前端开发中,ESLint可以帮助我们检查代码中的潜在问题,提高代码的可读性和可维护性。


二、作用

ESlint作为代码检查工具,其作用主要有以下几点:

  • 代码规范检查:ESLint可以根据预设的规范对代码进行静态分析,检查代码中的潜在问题,如未使用的变量、未定义的变量、不符合规范的代码风格等。
  • 代码质量评估:ESLint可以根据预设的规则对代码进行质量评估,如代码复杂度、代码重复度等,帮助开发者提高代码质量。
  • 提供自定义规则:ESLint允许开发者根据自己的需求编写自定义规则,以适应特定的项目需求和编码风格。
  • 语法检查:ESLint可以检查代码中的语法错误,帮助开发者避免常见的语法错误。
  • 代码风格统一:ESLint可以根据预设的代码风格规则,对代码进行风格统一,确保整个项目的代码风格一致。
  • 代码自动修复:ESLint可以根据预设的规则自动修复代码中的一些问题,如自动添加缺失的分号、自动调整缩进等。


三、安装

安装依赖

npm install -g eslint

安装完成 ESLint 插件后,我们就会发现 鼠标指向代码时就能看到了警告与错误提示 ,那么我们怎么做到保存时自动修正代码呢,我们需要 把下面的配置项复制到 settings.json 中

// 复制到 settings.json 中
  "editor.formatOnType": true, // 控制编辑器在键入一行后是否自动格式化该行
  "editor.formatOnSave": true, // 在保存时格式化文档
  "eslint.codeAction.showDocumentation": {
    "enable": true
  },
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true,
  },
  "eslint.validate": [ // 检测语言
    "javascript",
    "javascriptreact",
    "html",
    "vue",
    "typescript",
    "typescriptreact",
    "markdown"
  ],


四、配置

要配置ESLint 主要有一下两种方法:

  • 在注释中直接配置
  • 在配置文件中配置, JavaScript、JSON 或者 YAML 格式的.eslintrc.* 文件,或者直接在 package.json 文件里的 eslintConfig 字段指定配置,ESLint 会查找和自动读取它们,再者,你可以在命令行运行时指定一个任意的配置文件。

1、在.eslintrc的文件进行配置:

  • env: 指定代码的运行环境
  • globals:额外的全局变量
  • parserOptions: 指定 JavaScript 相关的选项。ecmaVersion 指定用哪个ECMAScript 的版本,默认是 3 和 5。
  • rules: 具体检查的规则,不设置则不会检查
2、配置规则
  • “off” 或 0 - 关闭规则
  • “warn” 或 1 - 开启规则,使用警告级别的错误:warn (不会导致程序退出)
  • “error” 或 2 - 开启规则,使用错误级别的错误:error (当被触发的时候,程序会退出)
{
  "env": {
    "browser": true,
    "commonjs": true,
    "es6": true
  },
  "parserOptions": {
    "ecmaVersion": 6
  },
  // ESLint 规则配置
  "rules": {
    "indent": ["error", 2],
    "no-mixed-spaces-and-tabs": "error"
    "camelcase": "error",
    "eqeqeq": "warn",
    "curly": "error",
    "no-undef": "error",
    "no-unused-vars": "warn",
    "max-params": "warn",
    // 0是忽略,1是警告,2是报错
    "quotes": 2,                        // 非双引号报错
    "semi": 1,                          // 无分号就警告
    "no-console": 1,                    // 有console.log就警告
    "space-before-function-paren": 0    // 函数前空格忽略
  }
}
3、优先级
3.1、行内配置
  1. /eslint-disable/ 和 /eslint-enable/
  2. /global/
  3. /eslint/
  4. /eslint-env/
3.2、命令行选项(或 CLIEngine 等价物):
  1. –global
  2. –rule
  3. –env
  4. -c, --config
3.3、项目级配置:

如果同一个目录下有多个配置,ESLint 只会使用一个(并不会进行合并配置)。优先级顺序如下:

  1. .eslintrc.js
  2. .eslintrc.yaml
  3. .eslintrc.yml
  4. .eslintrc.json
  5. .eslintrc
  6. package.json

对于临时忽略,可以使用注释方式;对于永久忽略,可以在配置文件中禁用规则。

4、Inline 注释

在代码行前添加 // eslint-disable-line 或 // eslint-disable-next-line 注释:

alert('foo'); 

// eslint-disable-line no-alert
alert('foo'); 

// eslint-disable-next-line no-alert
alert('bar');

这将忽略那一行的规则检查。

5、块注释
/* eslint-disable no-alert */
alert('foo'); 
alert('bar');
/* eslint-enable no-alert */

这会在块的开始和结束处启用和禁用指定的规则。

6、在文件顶部添加规则注释

在文件顶部添加:

/* eslint-disable no-alert */

这将忽略整个文件中指定的规则。

7、在 .eslintignore 文件中添加忽略规则

在 .eslintignore 文件中添加:

example.js

这将忽略 example.js 文件中的所有规则检查。

8、在 package.json 中添加忽略规则

在 package.json 中添加:

"eslintIgnore": [
    "example.js" 
]

这也会忽略 example.js 中的所有规则检查。

9、在规则中添加 “off” 或 0 选项

在 .eslintrc.js 配置文件中将指定规则设置为 “off” 或 0:

"rules": {
    "no-alert": "off" 
}

这将关闭 no-alert 规则的检查。


五、示例

module.exports = {
  //此项是用来告诉eslint找当前配置文件不能往父级查找
  root: true,
  //指定eslint继承的模板
  extends: ["plugin:vue/essential", "@vue/standard"],
  //此项指定环境的全局变量,下面的配置指定为浏览器环境
  env: {
    browser: true
  },
  // 此项是用来提供插件的,插件名称省略了eslint-plugin-,下面这个配置是用来规范html的
  plugins: ["vue"],
  //指定javaScript语言类型和风格
  parserOptions: {
    parser: "babel-eslint"
  },
  //规则https://www.wenjiangs.com/docs/eslint,vue规则:https://eslint.vuejs.org/rules/
  // 主要有如下的设置规则,可以设置字符串也可以设置数字,两者效果一致
  // "off" -> 0 关闭规则
  // "warn" -> 1 开启警告规则
  // "error" -> 2 开启错误规则
  rules: {
    // 使用 === 替代 == allow-null允许null和undefined== [2, "allow-null"]
    eqeqeq: 0,
    // 双峰驼命名格式
    camelcase: 0,
    //要求或者禁止Yoda条件
    yoda: 2,
    // 行尾不使用分号
    semi: 0,
    //强制一致地使用反引号、双引号或单引号。
    quotes: 2,
    //强制函数中的变量在一起声明或分开声明
    "one-var": 2,
    // 禁用 console
    "no-console": process.env.NODE_ENV === "production" ? "error" : "off",
    // 强制 generator 函数中 * 号周围使用一致的空格
    "generator-star-spacing": "off",
    // 禁用 debugger
    "no-debugger": process.env.NODE_ENV === "production" ? "error" : "off",
    // 禁止对象字面量中出现重复的 key
    "no-dupe-keys": 2,
    // 函数参数不能重复
    "no-dupe-args": 2,
    // 禁止重复的函数声明
    "no-func-assign": 2,
    // 禁止重复的 case 标签
    "no-duplicate-case": 2,
    // 禁用未声明的变量
    "no-undef": 1,
    //禁止出现多个空格
    "no-multi-spaces": 2,
    // 不允许标签与变量同名
    "no-label-var": 2,
    //禁止tab
    "no-tabs": 1,
    // 禁止 var 声明 与外层作用域的变量同名
    "no-shadow": 0,
    // 禁止 if 语句中有 return 之后有 else
    "no-else-return": 0,
    // 禁止出现空函数.如果一个函数包含了一条注释,它将不会被认为有问题。
    "no-empty-function": 1,
    // 禁止出现未使用过的变量
    "no-unused-vars": 1,
    //禁止在返回语句中赋值
    "no-return-assign": 0,
    // 禁用行尾空格
    "no-trailing-spaces": 2,
    // 禁止修改 const 声明的变量
    "no-const-assign": 2,
    // 禁止类成员中出现重复的名称
    "no-dupe-class-members": 2,
    //禁止使用alert confirm promp
    "no-alert": process.env.NODE_ENV === "production" ? "error" : "off",
    //禁止多余的冒号
    "no-extra-semi": 2,
    //禁止在条件中使用常量表达式
    "no-constant-condition": 2,
    //空行最多不能超过2行
    "no-multiple-empty-lines": [1, { max: 2 }],
    //禁止无用的表达式
    "no-unused-expressions": 1,
    //禁用不必要的嵌套块
    "no-lone-blocks": 2,
    //不允许使用逗号操作符
    "no-sequences": 2,
    //禁止不规则的空白
    "no-irregular-whitespace": 2,
    //函数括号前的空格
    "space-before-function-paren": 0,
    //处理回调错误
    "handle-callback-err": 1,
    //首选承诺拒绝错误
    "prefer-promise-reject-errors": 0,
    //要求或禁止在注释前有空白 (space 或 tab)
    "spaced-comment": 1,
    //强制关键字周围空格的一致性
    "keyword-spacing": 1,
    //强制在花括号中使用一致的空格
    "object-curly-spacing": 1,
    // 控制逗号前后的空格
    "comma-spacing": [
      2,
      {
        before: false,
        after: true
      }
    ],
    // 要求或禁止 var 声明语句后有一行空行
    "newline-after-var": 0,
    //强制使用一致的缩进
    indent: 0,
    // html 内 缩进
    "vue/html-indent": 0,
    // 插值两端必须留一个空格
    "vue/mustache-interpolation-spacing": 0,
    //强制每行的最大属性数
    "vue/max-attributes-per-line": 0,
    //vue/属性顺序
    "vue/attributes-order": 0,
    // 强制要求在对象字面量的属性中键和值之间使用一致的间距 "var obj = { "foo": 42 };"
    "key-spacing": 0,
    // 禁止末尾逗号
    "comma-dangle": 0,
    // 强制在块之前使用一致的空格 "function a() {}"
    "space-before-blocks": 0,
    // 要求操作符周围有空格 "a ? b : c"
    "space-infix-ops": 2,
    // "() => {};" // 强制箭头函数前后使用一致的空格
    "arrow-spacing": 2,
    //插值中强制统一间距
    //强制组件中的属性顺序
    "vue/order-in-components": 0,
    //不允许字段名称重复
    "vue/no-dupe-keys": 2,
    //多次引用同个包
    "import/no-duplicates": 2,
    //执行有效v-for指令
    "vue/valid-v-for": 2,
    //V-bind:key使用v-for指令要求
    "vue/require-v-for-key": 2,
    //不允许解析错误<template>
    "vue/no-parsing-error": [2, { "x-invalid-end-tag": false }],
    //强制执行自闭式
    "vue/html-self-closing": "off",
    //不允许计算属性中的副作用
    "vue/no-side-effects-in-computed-properties": 0,
    //禁止 v-for 指令或范围属性的未使用变量定义
    "vue/no-unused-vars": 1,
    //执行有效v-model指令
    "vue/valid-v-model": 2,
    //强制执行有效的模板根
    "vue/valid-template-root": 2
  }
};

目录
相关文章
|
11月前
|
存储 缓存 网络协议
阿里云特惠云服务器99元与199元配置与性能和适用场景解析:高性价比之选
2025年,阿里云长效特惠活动继续推出两款极具吸引力的特惠云服务器套餐:99元1年的经济型e实例2核2G云服务器和199元1年的通用算力型u1实例2核4G云服务器。这两款云服务器不仅价格亲民,而且性能稳定可靠,为入门级用户和普通企业级用户提供了理想的选择。本文将对这两款云服务器进行深度剖析,包括配置介绍、实例规格、使用场景、性能表现以及购买策略等方面,帮助用户更好地了解这两款云服务器,以供参考和选择。
|
9月前
|
域名解析 应用服务中间件 Shell
使用nps配置内网穿透加域名解析
使用nps配置内网穿透加域名解析
1019 76
|
11月前
|
机器学习/深度学习 人工智能 JSON
Resume Matcher:增加面试机会!开源AI简历优化工具,一键解析简历和职位描述并优化
Resume Matcher 是一款开源AI简历优化工具,通过解析简历和职位描述,提取关键词并计算文本相似性,帮助求职者优化简历内容,提升通过自动化筛选系统(ATS)的概率,增加面试机会。
1400 18
Resume Matcher:增加面试机会!开源AI简历优化工具,一键解析简历和职位描述并优化
|
10月前
|
存储 人工智能 API
离线VS强制登录?Apipost与Apifox的API工具理念差异深度解析
在代码开发中,工具是助手还是枷锁?本文通过对比Apipost和Apifox在断网环境下的表现,探讨API工具的选择对开发自由度的影响。Apifox强制登录限制了离线使用,而Apipost支持游客模式与本地存储,尊重开发者数据主权。文章从登录策略、离线能力、协作模式等方面深入分析,揭示工具背后的设计理念与行业趋势,帮助开发者明智选择,掌握数据控制权并提升工作效率。
|
12月前
|
数据采集 存储 调度
BeautifulSoup VS Scrapy:如何选择适合的HTML解析工具?
在Python网页抓取领域,BeautifulSoup和Scrapy是两款备受推崇的工具。BeautifulSoup易于上手、灵活性高,适合初学者和简单任务;Scrapy则是一个高效的爬虫框架,内置请求调度、数据存储等功能,适合大规模数据抓取和复杂逻辑处理。两者结合使用可以发挥各自优势,例如用Scrapy进行请求调度,用BeautifulSoup解析HTML。示例代码展示了如何在Scrapy中设置代理IP、User-Agent和Cookies,并使用BeautifulSoup解析响应内容。选择工具应根据项目需求,简单任务选BeautifulSoup,复杂任务选Scrapy。
306 1
BeautifulSoup VS Scrapy:如何选择适合的HTML解析工具?
|
11月前
|
数据可视化 测试技术 API
前后端分离开发:如何高效调试API?有工具 vs 无工具全解析
在前后端分离开发中,API调试至关重要。本文探讨有无调试工具时如何高效调试API,重点分析Postman、Swagger等工具优势及无工具代码调试方法。通过实际场景如用户登录接口,对比两者特性。同时介绍Apipost-Hepler(IDEA插件),将可视化与代码调试结合,提供全局请求头配置、历史记录保存等功能,优化团队协作与开发效率,助力API调试进入全新阶段。
|
11月前
|
监控 Shell Linux
Android调试终极指南:ADB安装+多设备连接+ANR日志抓取全流程解析,覆盖环境变量配置/多设备调试/ANR日志分析全流程,附Win/Mac/Linux三平台解决方案
ADB(Android Debug Bridge)是安卓开发中的重要工具,用于连接电脑与安卓设备,实现文件传输、应用管理、日志抓取等功能。本文介绍了 ADB 的基本概念、安装配置及常用命令。包括:1) 基本命令如 `adb version` 和 `adb devices`;2) 权限操作如 `adb root` 和 `adb shell`;3) APK 操作如安装、卸载应用;4) 文件传输如 `adb push` 和 `adb pull`;5) 日志记录如 `adb logcat`;6) 系统信息获取如屏幕截图和录屏。通过这些功能,用户可高效调试和管理安卓设备。
|
11月前
|
JSON 监控 物联网
WebSocket 调试全攻略:核心解析、工具选择与对比!
WebSocket 是一种全双工、实时交互的网络通信协议,适用于即时通信、实时数据流、多人协作、IoT 等场景。调试 WebSocket 时,工具应具备握手管理、实时消息收发、自定义 Header、消息大小告警、分组管理、多连接支持和断线重现等功能。主流调试工具如 Postman、ApiPost 和 ApiFox 各有优劣:Postman 界面友好适合基础调试;ApiPost 支持高级功能如消息分组和自动重连;ApiFox 则强化了多连接支持。选择工具时需根据具体需求和团队熟悉度决定。
|
11月前
|
Web App开发 移动开发 前端开发
React音频播放器样式自定义全解析:从入门到避坑指南
在React中使用HTML5原生&lt;audio&gt;标签时,开发者常面临视觉一致性缺失、样式定制局限和交互体验割裂等问题。通过隐藏原生控件并构建自定义UI层,可以实现完全可控的播放器视觉风格,避免状态不同步等典型问题。结合事件监听、进度条拖拽、浏览器兼容性处理及性能优化技巧,可构建高性能、可维护的音频组件,满足跨平台需求。建议优先使用成熟音频库(如react-player),仅在深度定制需求时采用原生方案。
479 12
|
11月前
|
Java 关系型数据库 数据库连接
Javaweb之Mybatis入门程序的详细解析
本文详细介绍了一个MyBatis入门程序的创建过程,从环境准备、Maven项目创建、MyBatis配置、实体类和Mapper接口的定义,到工具类和测试类的编写。通过这个示例,读者可以了解MyBatis的基本使用方法,并在实际项目中应用这些知识。
278 11

推荐镜像

更多
  • DNS