Joney Li

eslint快速的上手

第一步：安装

yarn add eslint --dev

安装完成后，会在node_moudele下的bin文件夹内会加入一个可执行的二进制文件，使用它就能对代码进行校验

第二步：运行它

yarn eslint # 这样就能进行运行了

接下来我们以一个demo做例子，这个例子我们在这里就不去写他了，就是写一个错误的代码

先写一个错误的代码，让eslint 去检查他

使用起来也比较的简单

yarn eslint .\xxx.js  --fix 
# 这个就能去检查具体的指定的文件了

eslint 配置文件详解这个配置文件很重要， .eslintrc.js，可以自定义很多规则

module.exports = {
  env: {
    browser: true,
    es2020: true
  },
  extends: [
    'standard'
  ],
  parserOptions: {
    ecmaVersion: 11
  },
  rules: {
  }
}
 
# 注意这个时候你的验证规则还和你选择初始化的时候的风格有关，这些个配置会继承一部分。你可以仔细的去node_moudle下找到他们

下面的就是常见的env的配置详情，具体去看官方文档哈

eslint 配置注释

这个注释就是禁用

const str1 = "${name} is a coder" // eslint-disable-line no-template-curly-in-string 
 
console.log(str1)

eslint 结合自动化工具

这里的结合自动化工具，指代的是gullp

我们只需要在特定的gulp任务中的pipe管道加一个 plugins就好了

注意哈，eslint是需要安装的你更具体是安装就好了，安装好之后直接去运行对应的任务就好了

如果你遇到了全局变量的问题，你可以在配置文件中加已给全局配置属性就好了 .eslintrc.js

eslint 结合webpack

eslint集成在webpack，是通过loader处理的、（这里我们集成的项目是react项目不用creactApp创建的reactApp）

1、先去安装到webpack中

eslint 解析webpack 后续配置

我们对这个项目安装一个特殊的plugin用于支持 jsx 语法

yarn add esllint-plugin-react --dev
 
# 这个模块实际上就是一个eslit配置，你直接找源文件就好了

上述的配置就是自己去加，还有一种方式

plugin选项可以配置集成，如何使用继承下来的验证，就需要在rules中加入配置的前缀地址

eslint 检查 TypeScript

这里主要是完成配置ts的lint规则

StyleLint是个什么东西

这个东西和eslint差不多，这里就不多说了,注意哈需要安装依赖！

配置文件就是styleLintrc.js

Prettier的使用

这个东西就是一个自动格式化的代码的东西，别文件格式化代码是一个包，你需要安装它

执行命令就好了

yarn perttier style.css --write
# 进行某个文件的格式化并且重写写回去，同时你可以使用通配符和配置文件一次性搞定

GitHooks工具机制

GitHooks是提交git时的一种检查机制，

在.git/hooks下我们可以来加入一个pre.commit 钩子这些hooks文件需要说明的是：都是Linux脚本

Eslint 结合GitHooks

既然我们可以检测到这个hooks，那么我们就能做更多的操作了

更多的时候我们不常写 shell脚本，我们一般使用一个lib库安装到前端项目中 HusKy包

安装完成后，会发现项目的.git/hooks下多了很多shell配置

我们再json中加入一个配置项来提供脚本，这样就好了

实际上这里不复杂就是一个commit前githooks会发出一个hooks钩子，你拿到hooks后正在shell脚本中处理就好了，同事我们不必自己写shell我们可以借助一些lib辅助实现lint操作