当前位置: 首页 > news >正文

ESLint简单操作

简介

ESLint 是由 Nicholas C. Zakas 编写的一个可扩展、每条规则独立、不内置编码风格为理念的 Lint 工具。

在团队协作中,为避免低级 Bug、产出风格统一的代码,会预先制定编码规范。使用 Lint 工具和代码风格检测工具,则可以辅助编码规范执行,有效控制代码质量。

准备

ESLint 详细使用可参见官方文档

这里主要使用的Airbnb JavaScript Style Guide;

JS版本为ECMAScript6(阮一峰老师的ECMAScript 6入门)

Node.jsNPM必须的哟

安装

首先,安装ESLint

$ npm i -g eslint

然后,安装Airbnb语法规则。

$ npm i -g eslint-config-airbnb

最后,在项目的根目录下新建一个.eslintrc文件,配置ESLint

{
  "extends": "airbnb/base",
}

在安装的时候得注意一点,eslinteslint-config-airbnb要么都执行全局安装,要么都本地安装,必须相同哟。

使用

配置完相关信息后,就可以切到项目目录内然后执行检测啦:

我们新建一个test.js进行检测


import './libraries/helper';

let path_name = location.pathname;
if (/^\/(home)?\/?$/.test(path_name)) {
  let flexSlider = _id('flexSlider');
  if (flexSlider) {
    let flexControlNav = _id('flexControlNav').children;
    new Swipe(flexSlider, {
      autoRestart: true,
      callback: (index) => {
        Array.prototype.slice.call(flexControlNav).map((item) => {
          item.className = '';
        });
        flexControlNav[index].className = 'active';
      }
    });
  }
}

执行检测

$ eslint test.js
test.js
   4:5   error  Identifier 'path_name' is not in camel case                camelcase
   4:5   error  'path_name' is never reassigned, use 'const' instead       prefer-const
   7:7   error  'flexSlider' is never reassigned, use 'const' instead      prefer-const
   7:20  error  '_id' is not defined                                       no-undef
   9:9   error  'flexControlNav' is never reassigned, use 'const' instead  prefer-const
   9:26  error  '_id' is not defined                                       no-undef
  10:5   error  Do not use 'new' for side effects                          no-new
  10:9   error  'Swipe' is not defined                                     no-undef
  13:63  error  Expected to return a value in this function                array-callback-return
  14:11  error  Assignment to property of function parameter 'item'        no-param-reassign
  17:8   error  Missing trailing comma                                     comma-dangle

✖ 11 problems (11 errors, 0 warnings)

检测结果信息可以知道,出错的行号,错误类型,错误描述以及违反的规则

针对上面的错误信息,我们修改一下test.js文件:


import './libraries/helper';

const pathName = location.pathname;
if (/^\/(home)?\/?$/.test(patName)) {
  const flexSlider = _id('flexSlider');
  if (flexSlider) {
    const flexControlNav = _id('flexControlNav').children;
    /* eslint-disable no-new */
    new Swipe(flexSlider, {
      autoRestart: true,
      callback: (index) => {
        /* eslint-disable */
        Array.prototype.slice.call(flexControlNav).map((item) => {
          item.className = '';
        });
        flexControlNav[index].className = 'active';
        /* eslint-enable */
      },
    });
    /* eslint-enable no-new */
  }
}

修改说明:

/* eslint-disable no-new */
...
/* eslint-enable no-new */
使用 eslint-disable + 规则名 的作用是不检测这条规则,注意要使用 eslint-enable 结束哟

/* eslint-disable */
...
/* eslint-enable */
直接 eslint-disable 的作用是完全禁用ESLint进行检测

好了,再次运行ESLint进行检测:

$ eslint test.js
test.js
   6:22  error  '_id' is not defined    no-undef
   8:28  error  '_id' is not defined    no-undef
  10:9   error  'Swipe' is not defined  no-undef

✖ 3 problems (3 errors, 0 warnings)

结果显示还有3处错误,_idSwipe是我们定义的两个全局变量,在另一个模块中,所以我们还需要修改.eslintrc将这两个变量加入到globals中:

.eslintrc
{
  "extends": "airbnb/base",
  "globals": {
    "_id": true,
    "Swipe": true,
  },
}

再次执行检测,OK啦,全部通过;

参考链接

  • ESLint 使用入门

  • ESLint 配置参数介绍

  • ESLint 官方文档

相关文章:

  • 整体管理、范围管理
  • 【烈日炎炎战后端】编程题总结(13.3万字)
  • D3导出png,保存到本地
  • Yii2批量插入数据
  • Java垃圾回收机制
  • 我建了一个叫Hello World的项目
  • 上课笔记分享-1-第17课时-1-多域名-统一沟通-环境
  • 【烈日炎炎战后端の58万词の索引】
  • opensStack
  • linux性能监控——CPU、Memory、IO、Network
  • 手把手教你用Python爬虫煎蛋妹纸海量图片
  • 详细了解前后端交互B/S,细的不能在细了
  • 站立会议07
  • git的操作 使用
  • [Enterprise Library]调用Enterprise Library时出现的错误事件之关闭办法
  • ➹使用webpack配置多页面应用(MPA)
  • AHK 中 = 和 == 等比较运算符的用法
  • C++11: atomic 头文件
  • EventListener原理
  • HomeBrew常规使用教程
  • open-falcon 开发笔记(一):从零开始搭建虚拟服务器和监测环境
  • React Transition Group -- Transition 组件
  • 创建一种深思熟虑的文化
  • 回顾2016
  • 技术发展面试
  • 前端_面试
  • 区块链分支循环
  • 使用Tinker来调试Laravel应用程序的数据以及使用Tinker一些总结
  • 用Node EJS写一个爬虫脚本每天定时给心爱的她发一封暖心邮件
  • 智能网联汽车信息安全
  • #NOIP 2014#Day.2 T3 解方程
  • #每天一道面试题# 什么是MySQL的回表查询
  • (31)对象的克隆
  • (6)添加vue-cookie
  • (C语言)求出1,2,5三个数不同个数组合为100的组合个数
  • (day 2)JavaScript学习笔记(基础之变量、常量和注释)
  • (附源码)php新闻发布平台 毕业设计 141646
  • (免费分享)基于springboot,vue疗养中心管理系统
  • (转)linux下的时间函数使用
  • .bat批处理(八):各种形式的变量%0、%i、%%i、var、%var%、!var!的含义和区别
  • .NET Core实战项目之CMS 第一章 入门篇-开篇及总体规划
  • .net 按比例显示图片的缩略图
  • .NET 药厂业务系统 CPU爆高分析
  • .NET/C# 使窗口永不获得焦点
  • .net分布式压力测试工具(Beetle.DT)
  • .NET企业级应用架构设计系列之结尾篇
  • .NET文档生成工具ADB使用图文教程
  • @SuppressWarnings注解
  • @Transient注解
  • @Validated和@Valid校验参数区别
  • @Valid和@NotNull字段校验使用
  • @基于大模型的旅游路线推荐方案
  • [ C++ ] STL---string类的使用指南
  • [Android 13]Input系列--获取触摸窗口
  • [BUAA软工]第一次博客作业---阅读《构建之法》