ESLint使用说明

本文以使用eslint:recommended 和 eslint-config-airbnb-base 为例,介绍ESlint的使用。

入门HelloWorld

  • 安装 ESLint
npm install -g eslint 
  • ESLint配置
    新建ESLint文件 .eslintrc.js :
module.exports = {
  extends: 'eslint:recommended',
};

执行命令:

# ./app是应用规则的程序路径,--ext执行程序文件后缀名
eslint ./app --ext .js

配置文件说明

parserOptions

  • ecmaVersion:指定ECMAScript版本,默认为5
  • sourceType:设置为 "script" (默认) 或 "module"
  • ecmaFeatures:
    • jsx:true 启用jsx

.eslintrc.json示例:

{
    "parserOptions": {
        "ecmaVersion": 6,
        "sourceType": "module",
        "ecmaFeatures": {
            "jsx": true
        }
    },
    "rules": {
        "semi": 2
    }
}

parser

ESLint 默认使用Espree作为其解析器,平常项目中我一般使用babel-eslint作为parser。

{
    "parser": "babel-eslint",
}

env

环境定义了预定义的全局变量。

{
    "env": {
        "browser": true,
        "node": true
    }
}

globals

项目中特殊的全局变量

{
    "globals": {
        "var1": true,
        "var2": false
    }
}

plugins

plugin是一个npm包,通常输出规则。一些插件也可以输出一个或多个命名的配置。
ESLint 支持使用第三方插件。在使用插件之前,你必须使用 npm 安装它。插件名称可以省略 eslint-plugin- 前缀。

{
    "plugins": [
        "plugin1",
        "eslint-plugin-plugin2"
    ]
}

rules

ESLint 附带有大量的规则。你可以通过配置文件修改你项目中使用的规则。改变一个规则设置,你必须设置规则 ID 等于这些值之一:
"off" 或 0 - 关闭规则
"warn" 或 1 - 开启规则,使用警告级别的错误:warn (不会导致程序退出)
"error" 或 2 - 开启规则,使用错误级别的错误:error (当被触发的时候,程序会退出)

{
    "rules": {
        "eqeqeq": "off",
        "curly": "error",
        "quotes": ["error", "double"]
    }
}

eslint-config-airbnb-base

airbnb通过可共享配置的方式共享他们的eslint 规则。可共享配置 是一个npm包,它输出一个配置对象。
下面我们介绍如何在项目中使用。

  • 安装
# 首先 通过npm info命令查询依赖
$ npm info "eslint-config-airbnb-base@latest" peerDependencies
{ eslint: '^4.9.0', 'eslint-plugin-import': '^2.7.0' }

# 根据查询结果手动安装指定版本的依赖包
npm install eslint@4.9.0 --save-dev
...

# Linux用户可以直接执行,自动完成依赖包安装
export PKG=eslint-config-airbnb-base;
npm info "$PKG@latest" peerDependencies --json | command sed 's/[\{\},]//g ; s/: /@/g' | xargs npm install --save-dev "$PKG@latest"

# 安装airbnb配置
npm install eslint-config-airbnb-base@latest
  • 配置 .eslintrc.js
/**
 *
 * eslint 配置
 */
module.exports = {
    "extends": "airbnb-base",
    "parserOptions": {
        "ecmaVersion": 6,
        "sourceType": "module",


    },
    parser: "babel-eslint",
    "env": {
        "browser": true,
        "node": true,
        "es6": true,
        "commonjs": true
    },
    "globals": {},

    "rules": {
        "indent": ["error", 4]
    }
};

  • 命令行检测
$ ./node_modules/eslint/bin/eslint.js ./client --ext .js

/Users/candice/Development/Web/www-mis/client/index.js
  6:1  error  Too many blank lines at the end of file. Max of 1 allowed  no-multiple-empty-lines

✖ 1 problem (1 error, 0 warnings)
  1 error, 0 warnings potentially fixable with the `--fix` option.
  • webpack集成
    如果有babel-loader,应当先执行eslint-loader再进行babel-loader。
    module: {
        rules: [
            {
                test: /\.js$/,
                include: [
                    path.resolve(__dirname, '../public'),
                    path.resolve(__dirname, '../common'),
                    path.resolve(__dirname, '../app'),
                ],
                loader: ['babel-loader','eslint-loader'], //执行顺序从右往左
            },
  • 例外
    凡事总有例外。编码时尽管怀着严格遵守规则的愿景,但是实际情况往往会有例外。ESLint提供多种临时禁用规则的方式。
/* eslint-disable */

alert('foo');

/* eslint-enable */
/* eslint-disable no-alert, no-console */

alert('foo');
console.log('bar');

/* eslint-enable no-alert, no-console */
/* eslint-disable */

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

// Disables no-alert for the rest of the file
alert('foo');
alert('foo'); // eslint-disable-line

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

// eslint-disable-next-line no-alert
alert('foo');
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 218,525评论 6 507
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 93,203评论 3 395
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 164,862评论 0 354
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,728评论 1 294
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,743评论 6 392
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,590评论 1 305
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,330评论 3 418
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 39,244评论 0 276
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,693评论 1 314
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,885评论 3 336
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 40,001评论 1 348
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,723评论 5 346
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 41,343评论 3 330
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,919评论 0 22
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 33,042评论 1 270
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 48,191评论 3 370
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,955评论 2 355

推荐阅读更多精彩内容

  • ESLint 配置 ESlint 被设计为完全可配置的,这意味着你可以关闭每一个规则而只运行基本语法验证,或混合和...
    静默虚空阅读 41,307评论 3 14
  • 前言 webpack2和vue2已经不是新鲜东西了,满大街的文章在讲解webpack和vue,但是很多内容写的不是...
    技术宅小青年阅读 6,541评论 4 43
  • 写在开头 先说说为什么要写这篇文章, 最初的原因是组里的小朋友们看了webpack文档后, 表情都是这样的: (摘...
    Lefter阅读 5,289评论 4 31
  • GitChat技术杂谈 前言 本文较长,为了节省你的阅读时间,在文前列写作思路如下: 什么是 webpack,它要...
    萧玄辞阅读 12,697评论 7 110
  • EsLint入门学习整理 这两天因为公司要求,就对ESLint进行了初步的了解,网上的内容基本上都差不多,但是内容...
    点柈阅读 26,027评论 3 42