ESlint通关教程看完不信你还不会

1. 团队协作时你写的代码能否和别人格格不入2. 你写的代码可阅读能否极差3. 你写代码的时候能否经常犯少量低级错误导致报错。4. 你写代码能否毫无规范可言基本概念

ESLint 是一个开源的 Javascript 代码检查工具，由 Nicholas C. Zakas 于 2013 年 6 月创立。

官网

中文网

为什么要有 eslint

1. 代码检查是一种静态的分析,对大多数编程语言来说都会有代码检查，一般来说编译程序会内置检查工具。
2. Javascript 是一个动态的弱类型脚本语言，没有编译程序。查找代码的 bug 需要在执行的时候进行调试。
3. Eslint 可以帮助程序员在编码的过程中就发现问题。

常见的前台代码校验工具

1. 【JSLint】：最早Javascript语言校验工具，是Douglas Crockford开发的。因为该工具所有的语法规则，都是预设的，客户无法改变。也就是说，你写的代码风格只能跟Douglas Crockford的风格一模一样
2. 【JSHint】JSLint的后继者，最大特定就是允许客户自己设置自己的语法规则，写在项目根目录下面的.jshintrc文件。
3. 【ESLint】 初衷是为了让程序员可以创立自己的检测规则。ESLint 的所有规则都被设计成可插拔的。当然ESLint也提供了一整套默认的检测规则。
4. 现在的脚手架工具一般都集成了eslint，比方vue-cli和create-react-app。

很多同学或者者公司第一件事情就是把项目中的eslint校验给关闭了，而后即可以在代码中为所欲为，假如开启了eslint，他们会觉得这是带来了负担，而不是好处...

1. ESLint 依赖于 node 环境，必需有 node 版本>4.0 npm 版本>2

全局安装

假如你想使 ESLint 适用于你所有的项目，我们建议在全局安装

• 安装

yarn global add eslint

• 创立项目

mkdir demo01 cd demo01yarn init -y

• 初始化

eslint --init

有少量初始化的选项，选项不一样，默认的配置也会不一样，这些选项可以随便选，由于每个配置后期都会详细讲解

// 1. 你准备用eslint来干什么，选择默认的就可 To check syntax only // 仅仅使用eslint校验语法> To check syntax and find problems // 使用eslint校验语法并且发现问题 To check syntax, find problems, and enforce code style // 使用eslint校验语法，发现问题，执行代码风格// 2. 你的项目中使用了什么板块化语法， 选择默认的标准ES板块化语法就可> Javascript modules (import/export) CommonJS (require/exports) None of these// 3. 你的项目中用到了什么框架，选择没有 React Vue.js> None of these// 4. 你的项目运行在什么环境下，可以选择浏览器或者者node，使用按空格进行选择，可以多选 回车下一步>(*) Browser (*) Node// 5. 你的配置文件要生成什么格式的，选择JSON就可(其余几个后面会讲) Javascript YAML> JSON// 6. 你能否要使用npm安装他们(Y/N) 直接回车就可

• 创立src目录，新建index.js文件

mkdir srctouch index.js

index.js文件内容

function fn() { console.log('hello eslint')}

• 运行命令,校验代码

eslint src/index.js

• 结果

报了两个错误，

1. 函数定义了，但是没有使用
2. eslint推荐的规范中，不能在代码中使用console语句

C:\Users\HUCC\Desktop\eslint-learn\code\demo01\src\index.js 1:10 error 'fn' is defined but never used no-unused-vars 2:3 error Unexpected console statement no-console? 2 problems (2 errors, 0 warnings)

• 重新修改index.js

function fn() { alert('hello eslint')}fn()

• 重新执行命令

即可以看到不在报错了

eslint src/index.js

本地安装

假如你想让 ESLint 成为你项目构建系统的一部分，我们建议在本地安装

• 项目初始化

mkdir demo02cd demo02yarn init -y

• 安装

yarn add eslint -D

• 初始化

// 由于没有使用全局安装，因而全局环境是没有eslint命令的，需要使用当前项目中node_modules中的eslint命令./node_modules/.bin/eslint --init

假如觉得每次输入命令比较麻烦，可以使用npx

// 效果和./node_modules/.bin/eslint --init 是一样的// npx 会自动查找当前依赖包中的可执行文件，假如找不到，就会去 PATH 里找。假如仍然找不到，就会帮你安装！npx eslint --init

eslint的初始化过程和全局初始化的过程是一样的

• 创立src目录，新建index.js文件

mkdir srctouch index.js

index.js文件内容

function fn() { console.log('hello eslint')}

• 运行命令

// 还是需要运行本地的eslit命令./node_modules/.bin/eslint src/index.js// 也可以使用npx命令来运行npx eslint src/index.js

全局安装 vs 本地安装

• 全局安装
  • 优点：所有的项目都能生效，不用给每个项目都下载安装依赖包,
  • 缺点：版本被锁死，假如项目在另一台机器上运行，要求另一台机器也必需全局安装eslint，还有可能出现版本冲突。
• 本地安装：
  • 优点：只有在当前项目有效，所有的依赖包都是本地安装的，项目可移植性好，对全局环境没有要求。
  • 缺点：每个项目都需要安装依赖包
• 在项目中，推荐使用本地安装的方式

配置ESLint校验的脚本

假如在src中还有很多的js文件，都希望被eslint所校验，应该怎样办?

• 新添加src/util.js文件

cd srctouch util.js

写入以下内容

function fn() { alert('哈哈');;}fn()

• 使用命令校验

npx eslint src/util.js

• eslint报错了

// 多了一个分号2:15 error Unnecessary semicolon no-extra-semi

• 校验文件夹

我们可以使用eslint校验整个文件夹，而不是单个文件，这样会更加的方便少量

// 校验整个src文件夹npx eslint src

• 配置scripts脚本

假如每次输入npx也觉得麻烦，我们可以在package.json文件中配置脚本

"scripts": { "lint": "npx eslint src" }

使用命令进行校验

// 以后校验代码，只要要yarn lint命令，即可以对src目录下的文件进行校验了yarn linteslint配置文件详解

eslint中最核心的就是配置文件.eslintrc.json

配置文件初识

env: 用于指定脚本的运行环境，比方是浏览器端的环境或者者是node端的运行环境，env可以提供一组预约义的全局变量。globals：指定代码在运行过程中访问的除了env指定外的其余全局变量extends：规则继承，eslint预先定义好了一整套规则，假如你想使用比较流行的standard风格或者者Airbnb风格parserOptions: 解析器参数配置，假如需要解析jsx或者者更高版本的ES代码，需要使用rules: ESLint默认配置了大量的规则可以直接使用，我们也可以在rules中修改这些规则

rules的配置

ESLint默认提供了非常多的规则，所有的规则都在规则列表
在配置文件的rules中可以修改这些规则

前置：使用本地安装的方式在lesson03中初始化项目，这里不再进行演示

• 在src中新建index.js文件

index.js文件内容

function fn() { console.log('哈哈哈');}fn()

• 使用yarn lint进行校验