web学习笔记09-ESLint规则整理与实际应用

这篇是基于之前整理的一篇关于ESLint入门之后，在深入了解了相关内容的基础上又整理出来的一篇，百分之四十与之前差不多，只是多了部分常用的规则。

1.安装

1.1本地安装(运用到此项目)

$ npm install eslint --save-dev

1.2全局安装（运用到所有项目）

$ npm install -g eslint

2.配置

2.1使用 .eslintrc 文件

$ eslint --init

2.2在 package.json 中添加 eslintConfig配置块

2.3直接在代码文件中定义

2.3.1 禁用 ESLint：

/* eslint-disable */
var a = 100;
console.log(a);  
/* eslint-enable */

2.3.2 禁用一条规则：

/*eslint-disable no-console */
var a = 100;
console.log(a);
/*eslint-enable no-console */

2.3.3 调整规则：

/* eslint no-console:0 */
var a = 100;
console.log(a);

3.错误级别

• “off” or 0 - 关闭(禁用)规则
• “warn” or 1 - 将规则视为一个警告（并不会导致检查不通过）
• “error” or 2 - 将规则视为一个错误 (退出码为1，检查不通过)
• 有些规则还带有可选的参数。

4.常用规则

5.实际项目中使用（Gulp中使用）

5.1 安装插件

$ npm install gulp-eslint

5.2 应用

var gulp = require('gulp');
var eslint = require('gulp-eslint');
gulp.task('lint',function(){
    return gulp.src(['app/**/*.js']) //指定的校验路径
        .pipe(eslint({configFle:"./.eslintrc"})) //使用你的eslint校验文件
        .pipe(eslint.format())
});

输入命令行

$ gulp lint

就可以直接运行了相应的配置文件来校验文件了。

5.3 忽视

    你可以通过在项目根目录创建一个 .eslintignore 文件告诉 ESLint 去忽略特定的文件和目录。.eslintignore 文件是一个纯文本文件，其中的每一行都是一个 glob 模式表明哪些路径应该忽略检测。例如，以下将忽略所有的 JavaScript 文件：

**/*.js

    当 ESLint 运行时，在确定哪些文件要检测之前，它会在当前工作目录中查找一个 .eslintignore 文件。如果发现了这个文件，当遍历目录时，将会应用这些偏好设置。一次只有一个 .eslintignore 文件会被使用，所以，不是当前工作目录下的 .eslintignore 文件将不会被用到。

    Globs 匹配使用 node-ignore，所以大量可用的特性有：

• 以 # 开头的行被当作注释，不影响忽略模式。
• 路径是相对于 .eslintignore 的位置或当前工作目录。这也会影响通过 –ignore-pattern传递的路径。
• 忽略模式同 .gitignore 规范
• 以 ! 开头的行是否定模式，它将会重新包含一个之前被忽略的模式。

    除了 .eslintignore 文件中的模式，ESLint总是忽略 /node_modules/ 和 /bower_components/ 中的文件。

    例如：把下面 .eslintignore 文件放到当前工作目录里，将忽略 node_modules，bower_components 和所有以 .ts.js 或者 .coffee.js 为扩展名的文件以及 build/ 目录下除了 build/index.js 的所有文件。

# /node_modules/* and /bower_components/* ignored by default

# Ignore built files except build/index.js
build/*
!build/index.js

    如果相比于当前工作目录下 .eslintignore 文件，你更想使用一个不同的文件，你可以在命令行使用 –ignore-path 选项指定它。例如，你可以使用 .jshintignore 文件，因为它有相同的格式：

eslint --ignore-path .jshintignore file.js

    你也可以使用你的 .gitignore 文件：

eslint --ignore-path .gitignore file.js

    任何文件只要满足标准忽略文件格式都可以用。记住，指定 –ignore-path 意味着任何现有的 .eslintignore 文件将不被使用。请注意，.eslintignore 中的匹配规则比 .gitignore 中的更严格。