文档章节

ESLint - 简介

王福林
 王福林
发布于 2017/09/11 15:59
字数 750
阅读 4
收藏 0

ESLint是一个用来识别 ECMAScript 并且按照规则给出报告的代码检测工具,使用它可以避免低级错误和统一代码的风格。ESLint被设计为完全可配置的,主要有两种方式来配置ESLint:

  • 在注释中配置:使用JavaScript注释直接把配置嵌入到JS文件中。
  • 配置文件:使用下面任一的文件来为全部的目录和它的子目录指定配置信息。
    • javascript:使用.eslintrc.js文件并导出一个包含配置的对象。
    • YAML:.eslintrc.yaml或者.eslintrc.yml
    • JSON:.eslintrc.json,并且此文件允许使用JS形式的注释
    • 废弃的用法:.eslintrc,此文件可以是JSON或者YAML
    • package.json:在package.json文件中创建eslintConfig属性,所有的配置包含在此属性中。

这些文件的优先级则是按照以上出现的顺序(.eslintrc.js > .eslintrc.yaml > .eslintrc.yml > .eslintrc.json > .eslintrc > package.json)。

可以被配置的信息主要分为3类:

  • Environments:你的 javascript 脚步将要运行在什么环境(如:nodejs,browser,commonjs等)中。
  • Globals:执行代码时脚步需要访问的额外全局变量。
  • Rules:开启某些规则,也可以设置规则的等级。

安装

  • 全局安装
npm i -g eslint
  • 局部安装(推荐)
npm i -D eslint

安装完毕后,接下来新建一个配置文件.eslintrc.js,或者使用如下的命令行来自动生成。

eslint --init

配置

指定执行环境

JavaScript 代码可以运行在浏览器或 nodejs 等环境中,每个环境的全局变量都不尽相同(如 nodejs 中没有 DOM 相关的全局变量)。在配置文件中可以自由的指定执行环境。

// .eslintrc.js
module.exports = {
  env: {
    browser: true,
    node: true,
  },
};

所有的环境可以在官网上查询。

指定全局变量

可以在配置文件或注释中指定额外的全局变量,false表明变量只读:

  • 注释:
/* global var1, var2 */
/* global var1:false, var2:false */
  • js 文件:
// .eslintrc.js
module.exports = {
  globals: {
    var1: true,
    var2: true,
  },
};

规则

在配置文件中可以设置一些规则。

这些规则的等级有三种:

  • "off" 或者 0:关闭规则。
  • "warn" 或者 1:打开规则,并且作为一个警告(不影响exit code)。
  • "error" 或者 2:打开规则,并且作为一个错误(exit code将会是1)。

例如:

  • js 文件
// .eslintrc.js
module.exports = {
  rules: {
    eqeqeq: 'off',
    curly: 'error',
  },
};
  • 注释文件
/* eslint eqeqeq: "off", curly: "error" */
/* eslint eqeqeq: 0, curly: 2 */

也可以在注释中关闭所有或者某个规则:

/* eslint-disable */
/* eslint-enable */

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

具体的规则可以在官网上找到,或者使用别人写好的配置,例如eslint-config-airbnb

使用方法

通过命令行工具来使用 eslint 。

eslint [options] file.js [file.js] [dir]

除了使用命令行还可以配合 webpack 或者配合编辑器的插件(如vscode-eslint)来使用。



作者:给我一炷香的时间
链接:http://www.jianshu.com/p/2bcdce1dc8d4
來源:简书
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

本文转载自:http://www.jianshu.com/p/2bcdce1dc8d4

共有 人打赏支持
王福林
粉丝 9
博文 93
码字总数 36521
作品 0
徐汇
程序员
在项目中如何使用ESLint提高代码质量

关于ESLint的版本,目前ESLint的稳定版本是v4.19.1,如果你看过ESLint的官方文档,就会知道官网推出了ESLint v5.0.0-alpha.1,这是ESLint的一个主要版本升级。由于这是预发布版本,ESLint尚未...

小欣妹妹
04/18
0
0
我是如何在公司项目中使用ESLint来提升代码质量的

ESLint:你认识我吗 ESLint是一个语法规则和代码风格的检查工具。 和学习所有编程语言一样,想要入门ESLint,首先要去它的官网看看:https://eslint.org/。 ESLint的版本问题 目前ESLint的稳...

闰土大叔
04/16
0
0
写更漂亮的javascript

用更合理的方式写 JavaScript 目录 声明变量 对象 数组 字符串 函数 箭头函数 模块 迭代器和生成器 属性 变量 提升 比较运算符和等号 代码块 注释 空白 逗号 分号 类型转换 命名规则 声明变量...

小红依
06/05
0
0
了解ESlint和关闭ESlint语法检测

vue-cli脚手架创建的项目默认使用ESlint规则,启动项目的时候因为各种语法报错,不得不先停下了解一下什么是ESlint,然后储备一下如何关闭ESlint语法检测。 【使用vue-cli快速搭建项目】:h...

四小七
05/11
0
0
Vue项目使用eslint + prettier规范代码风格

写在前面 团队开发的项目,如果没有对代码风格作要求,有多少团队成员,就当然会出现多少种不同的代码风格。因此,我们需要一种能够统一团队代码风格的工具,作为强制性的规范,统一整个项目...

FrankCheung
昨天
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

day63-20180821-流利阅读笔记-待学习

性别歧视在日本:“我是女生,所以社会不让我学医” 毛西 2018-08-21 1.今日导读 大家在看病的时候,有留意过女医生的比例吗?在性别歧视现象十分严重的日本,男医生和女医生的比例达到了惊人...

aibinxiao
45分钟前
2
0
Ubuntu18.04 显卡GF-940MX安装NVIDIA-390.77

解决办法: 下面就给大家一个正确的姿势在Ubuntu上安装Nvidia驱动: (a)首先去N卡官网下载自己显卡对应的驱动:www.geforce.cn/drivers (b)下载后好放在英文路径的目录下,怎么简单怎么来...

AI_SKI
今天
4
0
深夜胡思乱想

魔兽世界 最近魔兽世界出了新版本, 周末两天升到了满级,比之前的版本体验好很多,做任务不用抢怪了,不用组队打怪也是共享拾取的。技能简化了很多,哪个亮按哪个。 运维 服务器 产品 之间的...

Firxiao
今天
1
0
MySQL 8 在 Windows 下安装及使用

MySQL 8 带来了全新的体验,比如支持 NoSQL、JSON 等,拥有比 MySQL 5.7 两倍以上的性能提升。本文讲解如何在 Windows 下安装 MySQL 8,以及基本的 MySQL 用法。 下载 下载地址 https://dev....

waylau
今天
1
0
微信第三方平台 access_token is invalid or not latest

微信第三方开发平台code换session_key说的特别容易,但是我一使用就带来无穷无尽的烦恼,搞了一整天也无济于事. 现在记录一下解决问题的过程,方便后来人参考. 我遇到的这个问题搜索了整个网络也...

自由的开源
今天
3
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部