ESLint

规范化标准

规范化是我们践行前端工程化中重要的一部分

常见的规范化实现方式：

1、ESLint工具使用

2、定制ESLint校验规则

3、ESLint对TypeScript的支持

4、ESLint结合自动化工具或者Webpack

5、基于ESLint的衍生工具

6、Stylelint工具的使用

EsLint介绍

1、ESLint是目前最为主流的JavaScript Lint工具监测JS代码质量

2、ESLint很容易统一开发者的编码风格

3、ESLint可以帮助开发者提升编码能力

ESLint安装

1、ESLint安装步骤

（1）初始化项目

（2）安装ESLint模块为开发依赖

（3）通过CLI命令验证安装结果

2、使用

（1）初始化项目的package.json

yarn init --yes

（2）安装ESLint

npm install eslint --save-dev

（3）查看ESLint版本

yarn eslint --version

ESLint快速上手

1、ESLint检查步骤

（1）编写“问题”代码

（2）使用eslint执行检测；index.js为检查路径

npx eslint .\index.js

（3）完成eslint使用配置

npx eslint --init

（4）使用--fix修正代码风格

npx eslint .\index.js --fix

ESLint结合自动化工具

1、集成之后，ESLint一定会工作

2、与项目统一，管理更加方便

ESLint结合Webpack

1、安装对应模块

2、安装eslint模块

3、安装eslint-loader模块

4、初始化.eslint.js配置文件

ESLint结合Webpack后续配置

全局安装Vue.cli

npm install @vue/cli -g

创建vue项目

vue create ldy-vue-app

ESLint检查TypeScript

配置eslint

npx eslint --init

Stylelint认识

1、Stylelint使用介绍

（1）提供默认的代码检查规则

（2）提供CLI工具，快速调用

（3）通过插件支持Sass Less PostCSS

（4）支持Gulp或Webpack集成

2、安装stylelint

npm install stylelint -D

3、使用

npx stylelint ./index.css

4、配置

module.exports = {
    extends:[
        "stylelint-config-standard",
        "stylelint-config-sass-guidelines"
    ]
}

Prettier的使用

安装prettier

npm install prettier -D

使用

npx prettier style.css --write

npx prettier . --write

Git Hooks介绍

代码提交至仓库之前未执行lint工作

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

Git Hook也称之为git钩子，每个钩子都对应一个任务

通过shell脚本可以编写钩子任务触发时要具体执行的操作