ESLint简朴操纵

2019年8月30日 151次阅读 来源: YuanWing

简介

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啦，悉数经由过程；

参考链接

    原文作者：YuanWing
    原文地址: https://segmentfault.com/a/1190000004965396
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞