@[TOC](前端规范化学习笔记)

一、规范化标准

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

1. 为什么要有规范化标准？

软件开发需要多人协同
不同开发者具有不同的编码习惯和喜好
不同的喜好增加项目维护成本
每一个项目或是团队需要明确统一标准

2. 哪里需要规范化标准

代码、文档、甚至是提交日志
开发过程中人为编写的成果物
代码标准化规范最为重要

3. 实施规范化的方法

最初为人为约定标准
通过工具实现Lint，在编译之前按照指定规则去检查代码

二、ESLint 介绍

ESLint 官方文档

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

1 使用步骤

在项目中安装 ESLint 模块作为开发依赖
通过 CLI 命令验证安装结果
yarn eslint –init 初始化eslint配置
yarn eslint 校验文件(可以使用通配符)
yarn eslint 校验文件 –fix 自动按照规则修改代码风格

2. eslint 配置文件解析

eslint 配置文件配置选项的解释

module.exports = {
  // env 表示当前运行环境都支持的API有那些
  // eslint 会根据当前运行环境的配置去检查代码中所使用的 API 是否匹配当前环境所配置的内容
  env: {
    browser: true, // 表示支持浏览器环境的所有API
    es2021: true, // 表示支持ES2021的所提供的API
  },
  // 继承共享配置，这就是继承了standard风格的标准
  extends: [
    'standard'
  ],
  
  // parser: '@typescript-eslint/parser', // 语法解析器，比如我们要使用ts，ts有新的语法就需要配置这个
  
  // 设置语法解释器的配置，控制是否允许使用某个es版本的新特性，下面表示es12
  parserOptions: {
    ecmaVersion: 12
  },
  // 配置 eslint 校验规则的开启或是关闭
  // 详细的配置查看官方文档
  rules: {
    'no-alert': 'error' // off ||  warn || error
  },
  // 额外的声明在代码中可以使用的成员
  globals: {
    'reborn': 'readonly', // 此时配置了reborn ，在代码中就可以不定义使用reborn，eslint检查并不会爆出错误（！！！不过代码实际上是会有 REF Error）
  }
}

复制代码

3. ESLint 配置注释

ESLint 配置注释的作用，我们在实际的开发中可能会出现因为业务的需要写出来的代码不符合所定义的elsint规则，此时我们不可能去推翻之前所定义的规则。这时候我们可以通过配置注释的形式来告诉eslint忽略某个 eslint 的校验。

注意：为文件的某部分禁用警告的注释，告诉 ESLint 不要对禁用的代码报告规则的冲突。ESLint 仍解析整个文件，然而，禁用的代码仍需要是有效的 JavaScript 语法。

具体的更多的注释规则请查看官方文档

在这里插入图片描述

4. ESLint 在 gulp 中的支持

需要使用 gulp-eslint

// gulpfile.js
const { src, dest, parallel, series } = require('gulp')
const babel = require('gulp-babel')
const eslint = require("gulp-eslint")
const del = require('del')

const clean = () => {
  console.log('任务执行了')
  return del(['dist', 'temp'])
}

const scripts = () => {
  return src('./src/assets/scripts/*.js', { base: 'src' })
    .pipe(eslint()) // 默认情况eslint 只会根据规则去检查代码，gulp-eslint并不会阻止代码打包的进程
    .pipe(eslint.format()) // 打印错误信息
    .pipe(eslint.failAfterError()) // 发生错误时阻止任务构建
    .pipe(babel({ presets: ['@babel/preset-env'] }))
    .pipe(dest('dist'))
}




const test = series(clean, scripts)


module.exports = {
  clean,
  scripts,
  test
}
复制代码

在这里插入图片描述

5. ESLint 在 webpack 中的支持

webpack 中使用 ESLint 是通过在 loader 里面添加 eslint-loader 来处理

安装eslint ，初始化eslint配置
使用 eslint-loader

// webpack.config.js
 {
        test: /\.js$/, 
        exclude: /node_modules/, 
        use: 'babel-loader', 
      },
      {
        test: /\.js$/, 
        exclude: /node_modules/, 
        use: 'eslint-loader', 
      },  
复制代码

在不同的框架使用不同的eslint规则（具体去百度查找），通过eslint配置文件进行配置。

举react框架
安装 eslint-plugin-react

module.exports = {
  env: {
    browser: true,
    es2021: true
  },
  extends: [
    'standard',
    // 继承插件的规则 plugin:eslint插件名称/当前插件中的哪个插件配置(一个插件有多个配置)
    'plugin:react/all'
  ],
  parserOptions: {
    ecmaVersion: 12
  },
  rules: {
  },
 
}

复制代码

可以去 node_modules下去查看
config 对象中
在这里插入图片描述

6. Eslint 检查 TypeScript

在初始化 eslint 的时候，勾选使用 typescript 即可，然后选择下载配合eslint 的 ts 语法解析器的包，ts eslint 的插件

7. Stylelint 的认识

对css代码进行规则校验

提供默认的代码检查规则
提供 CLI 工具，快速调用
通过插件支持 Sss Less PostCSS
支持 Gulp 或是 Webpack

stylelint 使用方法与 eslint 基本一致

安装 stylelint
创建stylelint 的配置文件 .stylelintrc.js

// .stylelintrc.js
module.exports = {
// 与 eslint 不同的是 extends 这里的继承规则是需要填写全名称
  "extends": [
  // css 标准规则
    "stylelint-config-standard",
  // sass 标准规则
    "stylelint-config-sass-guidelines"
  ]
  // 。。。如果需要其他规则百度查找 安装依赖
}
复制代码

// package.json
"devDependencies": {
    "stylelint": "^13.13.1",
    "stylelint-config-sass-guidelines": "^8.0.0",
    "stylelint-config-standard": "^22.0.0"
  }
复制代码

stylelint 也同样提供了cli命令，运行命令检查代码

8. Prettier 前端代码格式化工具

Prettier使用

9. Git Hooks

为了解决代码提交到仓库前未执行 lint 工作从而使有问题的代码提交到仓库。

Git Hooks 是指 Git 在其工作的时候提供的了钩子函数是我们可以参与git的工作，我们可以在对应的钩子函数内编写一些shell脚本来执行某些操作。
在这里插入图片描述尝试修改pre-commit文件内容如下：

commit 更改代码

可是shell脚本我们根本不知道该怎么写，此时可以借助与 Husky 来

Husky
Git hooks 工具，是一个npm包，借助 Husky 可以帮助实现往 GIt 中添加 Hooks，我们不需要关注 shell 脚本该如何写，Husky 内部会自动完成。

Husky 6.0版本与之前的版本有天壤之别的变化
新旧版本之间的变化

新版本的HUsky 6.0+ 需要 Git 也升级到 2.9 +
在这里插入图片描述

lint-staged
有时候提交代码的时候我们是不需要给src下面的所有文件都进行eslint校验检查（项目大耗时，并还可能误格式化其他人的代码），只需要对本地暂存的代码进行eslint校验，这时候就需要一个过滤插件，lint-staged就是一个仅仅过滤出Git代码暂存区文件(被committed的文件)的工具。

yarn add eslint-staged -D

// package.json 文件 也可以在.lintstagedrc、lint-staged.config.js文件中

"lint-staged": {
// 对暂存区的代码的所有js文件，进行eslint --fix 命令， 并且再次添加到暂存区
    "*.js": [
      "eslint --fix",
      "git add"
    ]
  }
复制代码