详解 ESLint 规则,规范你的代码

本文介绍了ESLint,一个用于识别和报告JavaScript代码模式的工具,旨在确保代码一致性并防止错误。通过讨论其与JSHint、JSLint的区别,安装使用方法,以及配置文件的规则定义,帮助开发者更好地理解和应用ESLint进行代码风格规范。
摘要由CSDN通过智能技术生成

在很久之前就想通过工具来规范自己的代码风格,减少程序出错的概率,如果看过我的 一个前端程序猿的Sublime Text3的自我修养 ,这篇博客的朋友,肯定知道在当时我使用 SublimeLinter-jshint 插件来规范风格,但是实际上一直懒癌发作也没去看它的文档,使用着它默认的规则。不过现在是时候切换到 ESLint 了!

作为一个

有理想有抱负

的前端工程师,只是使用默认规则,而不是看完文档了然于心,显然是不行滴 ^_^.. 团队协作时,若是团队的代码风格统一,能够大大减少沟通成本。(其实面试时和老大聊到代码规范,当时就说到用 JSHint ,或者 ESLint 等工具来统一的。。。这也算是我来填一个坑吧~)

好了,前情摘要就到这,我们开始吧!

什么是 ESLint ?

ESLint 是在 ECMAScript/JavaScript 代码中识别和报告模式匹配的工具,它的目标是保证代码的一致性和避免错误。在许多方面,它和 JSLint、JSHint 相似,除了少数的例外:

  • ESLint 使用 Espree 解析 JavaScript。
  • ESLint 使用 AST 去分析代码中的模式
  • ESLint 是完全插件化的。每一个规则都是一个插件并且你可以在运行时添加更多的规则。

以上来自官网。不想再说下去,反正就是一个代码风格检测工具就对了

如何使用

  1. 安装

    npm install -g eslint
    
  2. 如果你第一次使用 ESLint,你必须使用 –init 命令新建一个配置文件:

    eslint --init
    
  3. 使用 ESLint 检测任何 JavaScript 文件:

    eslint test.js test2.js
    
  4. ESLint 中一些规则运行命令它可以帮你自动修复

    eslint test.js --fix
    

为了可以更直观的反馈,可能更多的会直接安装编辑器插件来进行错误提示,以Sublime 为例:

在 package control 中 ,先安装在 SublimeLinter ,再安装 SublimeLinter-contrib-eslint在项目目录下新建 .eslintrc 文件,自定义规则。

重新载入文件应该就生效了(不生效的话 Ctrl+Shift+P 调用命令面板 找到 sublimelinter: toggle linter 设置生效就好了),其他的编辑器异曲同工,就不再说了。

关于在如何在构建工具中使用,在这里不做说明(官网有)

规则定义

ESLint 支持几种格式的配置文件,如果同一个目录下有多个配置文件,ESLint 只会使用一个。优先级顺序如下:

  1. JavaScript - 使用 .eslintrc.js 然后输出一个配置对象。
  2. YAML - 使用 .eslintrc.yaml 或 .eslintrc.yml 去定义配置的结构。
  3. JSON -使用 .eslintrc.json 去定义配置的结构,ESLint 的 JSON 文件允许 JavaScript 风格的注释。
  4. Deprecated -使用 .eslintrc,可以使 JSON 也可以是 YAML。
  5. package.json - 在 package.json 里创建一个 eslintConfig属性,在那里定义你的配置。

下面就是规则啦,本人使用了 .eslintrc 格式,说明也在里面:

{
// 环境定义了预定义的全局变量。
"env": {
//环境定义了预定义的全局变量。更多在官网查看
"browser":true,
"node":true,
"commonjs":true,
"amd":true,
"es6":true,
"mocha":true
 },
// JavaScript 语言选项
"parserOptions": {
// ECMAScript 版本
"ecmaVersion":6,
"sourceType":"script",//module
// 想使用的额外的语言特性:
"ecmaFeatures": {
// 允许在全局作用域下使用 return 语句
"globalReturn":true,
// impliedStric
"impliedStrict":true,
// 启用 JSX
"jsx":true
 }
 },
/**
 * "off" 或 0 - 关闭规则
 * "warn" 或 1 - 开启规则,使用警告级别的错误:warn (不会导致程序退出),
 * "error" 或 2 - 开启规则,使用错误级别的错误:error (当被触发的时候,程序会退出)
 */
"rules": {


// 可能的错误 //


// 禁止条件表达式中出现赋值操作符
"no-cond-assign":2,
// 禁用 console
"no-console":0,
// 禁止在条件中使用常量表达式
// if (false) {
// doSomethingUnfinished();
// } //cuowu
"no-constant-condition":2,
// 禁止在正则表达式中使用控制字符 :new RegExp("\x1
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值