资讯专栏INFORMATION COLUMN

上云采购季！| 2核2G4M爆款云服务器低至59元/年，更有多台、长期优惠，快来选购！

立即前往
首页/文章专栏/ESLint简单操作

ESLint简单操作

liukai90 / 437人阅读

摘要：简介是由编写的一个可扩展每条规则独立不内置编码风格为理念的工具。在团队协作中，为避免低级产出风格统一的代码，会预先制定编码规范。使用工具和代码风格检测工具，则可以辅助编码规范执行，有效控制代码质量。

简介

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

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

准备

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

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

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

Node.js和NPM必须的哟

安装

首先，安装ESLint。

$ npm i -g eslint

然后，安装Airbnb语法规则。

$ npm i -g eslint-config-airbnb

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

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

在安装的时候得注意一点，eslint与eslint-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处错误，_id和Swipe是我们定义的两个全局变量，在另一个模块中，所以我们还需要修改.eslintrc将这两个变量加入到globals中：

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

再次执行检测，OK啦，全部通过；

参考链接

ESLint 使用入门

ESLint 配置参数介绍

ESLint 官方文档

云服务器 GPU云服务器 linux简单操作 mongodb简单操作 ESLint 阿里云服务器什么操作系统简单

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/79243.html

相关文章

  • 更新版-梳理前端开发使用eslint和prettier来检查和格式化代码问题

    摘要：整个代码检查和格式化流程应该规范为如下步骤使用并且尝试自动修复所有问题有提示，可以进行修复，按照配置文件来进行修复。参考文档如何花分钟解决产生的各种错误的记忆现场本文转载自我的更新版梳理前端开发使用和来检查和格式化代码问题 更新版，之前的版本可以看这里：梳理前端开发使用eslint和prettier来检查和格式化代码问题 一、问题痛点 在团队的项目开发过程中，代码维护所占的时间比重...

    GitChat 评论0 收藏0

  • 在Typescript项目中，如何优雅的使用ESLint和Prettier

    摘要：对于项目的编码规范而言，主要有两种选择和。此外由于性能问题，官方决定全面采用，甚至把仓库作为测试平台，而的解析器也成为独立项目，专注解决双方兼容性问题。最近在我的项目的编码规范中全量的用代替了针对其中遇到的问题做一个记录。   对于Typescript项目的编码规范而言，主要有两种选择ESLint和TSLint。ESLint不仅能规范js代码，通过配置解析器，也能规范TS代码。此外由...

    chemzqm 评论0 收藏0

  • 在Typescript项目中，如何优雅的使用ESLint和Prettier

    摘要：对于项目的编码规范而言，主要有两种选择和。此外由于性能问题，官方决定全面采用，甚至把仓库作为测试平台，而的解析器也成为独立项目，专注解决双方兼容性问题。最近在我的项目的编码规范中全量的用代替了针对其中遇到的问题做一个记录。   对于Typescript项目的编码规范而言，主要有两种选择ESLint和TSLint。ESLint不仅能规范js代码，通过配置解析器，也能规范TS代码。此外由...

    WilsonLiu95 评论0 收藏0

  • 在Typescript项目中，如何优雅的使用ESLint和Prettier

    摘要：对于项目的编码规范而言，主要有两种选择和。此外由于性能问题，官方决定全面采用，甚至把仓库作为测试平台，而的解析器也成为独立项目，专注解决双方兼容性问题。最近在我的项目的编码规范中全量的用代替了针对其中遇到的问题做一个记录。   对于Typescript项目的编码规范而言，主要有两种选择ESLint和TSLint。ESLint不仅能规范js代码，通过配置解析器，也能规范TS代码。此外由...

    琛ｈ。 评论0 收藏0

  • 前端构建之webpack

    摘要：前端构建之之前写了一个前端构建之，同样的目的写一个，内容基本上和一样，主要用来自己学习记录。合并很方便的实现合并最后附上完整的源代码。 前端构建之webpack 之前写了一个前端构建之gulp，同样的目的写一个webpack， 内容基本上和gulp一样，主要用来自己学习记录。 为什么需要前端构建 不解释 本文大致分为以下几个内容： 规范校验js代码（jslint） js解释器（b...

    MartinHan 评论0 收藏0

发表评论

登陆后可评论

0条评论

liukai90

男|高级讲师
我要私信

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<