ESLint和git Hooks

serendipity_tang
1,233 阅读5分钟

规范化标准

  1. 为什么要有规范标准
    多人协同开发，不同的人不同的习惯和喜好，会增加项目的维护成本，所以需要明确统一的标准
  2. 哪里需要规范标准
    代码文档甚至是提交日志等所有认为编写的产物，其中代码规范标准化最为重要，直接决定了项目的质量，也决定了项目的可维护性，包括统一关键词和操作符左右的空格，代码缩进方式，是否使用分号结尾，变量函数的命名规范等
  3. 实施规范化的方法
    编码前认为约定标准
    通过工具实现Lint

常见的规范化实现方式

  • ESLint 工具的使用
  • 定制ESLint校验规则
  • ESLint对TypeScript的支持
  • ESLint结合自动化工具或者webpack对项目自动化lint操作
  • 基于ESLint的衍生工具
  • Stylelint工具的使用

ESLint介绍

  • 最为主流的js Lint工具监测js代码质量
  • ESlint很容易统一开发者的编码风格
  • Eslint可以帮助开发者提升编码能力

无论是提供项目代码质量的原因还是提升自己的代码编码水平，这都是很有必要的

ESLint安装步骤

  • 初始化项目npm init -y
  • 安装ESLint模块为开发依赖npm i eslint --dev
  • 通过CLI命令验证安装结果npx eslint --version

npx是npm包最新版本内置的命令，可以直接找到node_modules/.bin目录中的cli程序

ESLint快速上手

npx exlint --init选择一些合适的配置 然后自动下载一些配置，就可以使用eslint校验文件了，但是事实操作的时候，遇到了一个问题 遇见这样的问题，可能是还有部分依赖没有下载完成，造成这样的原因是什么，我也不清楚，直接npm i就可以了，然后根据抛出的问题，下载其他缺失的插件，就可以愉快的进行代码风格和问题代码了

需要注意的是，当我们的代码中存在语法错误时，eslint是无法检查问题代码和代码风格的，当我们开始lint检查文件时，会先抛出语法错误，语法错误解决完成之后，才会相应的进行代码风格的lint检查

我们还可以通过--fix参数自动修正代码风格的问题

然后手动解决--fix不能解决的问题之后，再次运行npx eslint ./01-prepare.js --fix就好了

eslint可以找出代码中的语法错误，代码不合理，风格不统一，可以自动修复代码中的绝大多数问题

ESLint 配置文件解析

.eslintrc.js中的熟悉解析

  • parseOptions中的版本检测，影响的是语法检测，不代表是否可用
  • 高版本语法是否可以用 还是需要env中设置es6:true
  • rules配置eslint中每种配置的校验的开启和关闭
  • extends属性继承一些共享的配置，可以是数组，多个
  • global属性，设置全局对象属性

ESLint 配置注释

// eslint-disable-line eslint工作时会忽略当前所在行的代码

配置注释还可以声明全局变量、修改某个规则的配置、临时开启某个环境等等

ESLint结合自动化工具

可以把集成到自动化构建的工作流中

  1. eslint 集成过后，一定会去工作
  2. 与项目统一，管理更加方便

与gulp集成
需要安装eslint模块、和gulp-eslint模块 在gulp的配置文件编译js的script管道中，添加

.pipe(plugins.eslint())
.pipe(plugins.eslint.format())	// eslint执行完成之后，使用这个方法，有错误会在控制台打印错误信息
.pipe(plugins.eslint.failAfterError()) // eslint在检查到错误之后，将终止用户管道

// 如果使用的自动加载插件的`gulp-load-plugins`,那么不需要手动载入`gulp-eslint`模块了

与webpack集成
webpack是通过loader机制来实现eslint与webpack的集成 eslint-loader

第一种方法：直接把js解析的use修改成一个数组，添加eslint-loader，放在数组后面，先执行
{
    test:/.js$/,
    use: [
        'babel-loader',
        'eslint-loader'
    ],
},
第二种方法，新增一个js解析的loader，添加一个enforce:'pre'
{
    test:/.js$/,
    use: 'eslint-loader',
    enforce:'pre'  // 解析js文件时，优先使用eslint-loader
},

eslint-plugin-react,下载之后，直接在配置文件中

eslint对于ts的支持

首先需要npm eslint --init去配置ts的eslint相关选项

配置文件中

是配置ts选项后自动生成的，作用是配置一个语法解析器，ts相对于普通的js会有很多的特殊的语法，所以需要制定一个语法解析器

Pretter 的使用，文件格式化插件

安装npm i prettier -D
使用npx prettier xxx --write,自动格式化文件，支持各种样式的文件格式化，包括.js .vue .ts .css .jsx .md .scss .html .json等

git Hooks介绍

通过git Hooks在代码提交之前强制lint

  • Git Hook也称之为git钩子，每个钩子都对应一个任务
  • 通过shell脚本可以编写钩子任务触发时要具体执行的操作

Husky可以实现前端对于Git Hooks的使用需求，有了这个插件，我们就可以在不编写shell脚本的情况下，使用git钩子所带来的一些功能

npm i Husky --dev

npm i lint-staged --dev可以配合husky继续做一些其他的功能

在package.json中，scripts中配置"precommit":"lint-staged"

然后添加配置

也可以将eslint --fix替换为"prettier --write",这样的配置就会自动格式化代码，不过不能依赖这一类的格式化代码，作为一个有追求的前端开发，我们要养成手写出格式化代码的能力。

这样的话简单的lint工作流就做好了，

avatar
文章
阅读
粉丝