前端工程化实战 - 规范化标准

规范化标准概述

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

为什么要有规范会标准？

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

哪里需要规范化标准？

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

实施规范化的方法：

编码前人为的标准约定
通过工具实现 Lint

常见的规范化实现方式：

• ESLint 工具使用
• 定制 ESLint 校验规则
• ESLint 对 TypeScript 的支持
• ESLint 结合自动化工具或者 Webpack
• 基于 ESLint 的衍生工具
• StyleLint 工具的使用

ESLint

ESLint 介绍

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

ESLint 快速上手

ESLint 安装步骤：

1.初始化项目

npm init --yes

2.安装 ESLint 模块为开发依赖

npm install eslint -D

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

npx eslint --version

ESLint 检查步骤：

• 初始化配置文件npx eslint --init
• 编写“问题”代码，使用 eslint 执行检测 npx eslint ./01-prepare.js ，加上参数 --fix 可以自动修复格式问题
• 当代码中存在语法错误时，eslint 没法检查问题代码

ESLint 配置文件解析

// .eslintrc.js

module.exports = {
  env: { // 标记当前代码最终的运行环境
    browser: true, // 代码运行在浏览器环境
    es2020: true 
  },
  extends: [ // 记录共享配置
    'standard' // 如果需要在多个项目共享一个eslin配置，可以定义一个公共配置文件并在此集成
  ],
  parserOptions: { // 设置语法解析器的相关配置 控制是否允许使用某一个ES版本的语法
    ecmaVersion: 11
  },
  rules: { // 配置eslint中每一个校验规则的开启/关闭
    'no-alert': "error" // 内置规则名称： off/warn/error
  },
  global: { // 额外声明代码中可使用全局成员 最新版本默认配置已不再体现
    // 例如要使用jQuery对象
    "jQuery": "readonly"
  }
}

env 环境示例：

ESLint 配置注释

• 将配置通过注释的方式写在脚本文件中，再去执行代码校验

// 使用注释临时禁用指定规则
const str1 = "${name} is a coder" // eslint-disable-line no-template-curly-in-string 

console.log(str1)

注释的方式不仅可以禁用某个规则，还可以：

• 声明全局变量
• 修改某个规则的配置
• 临时开启某个环境

如有需要，可以通过这个链接，找到对应文档使用。

ESLint 结合自动化工具（gulp-eslint）

• 集成之后，ESLint 一定会工作
• 与项目统一，管理更加方便

前置工作：

1. 项目代码
2. 完成相应的依赖安装
3. 安成 eslint 模块安装
4. 完成 gulp-eslint 模块安装
5. 初始化 .eslintrc.js 配置文件

• 结合 gulp 使用，通过 .pipe(plugins.eslint()) .pipe(plugins.eslint.format()) .pipe(plugins.eslint.failAfterError()) 让其工作

ESLint 结合 Webpack（eslint-loader）

• Webpack 可以通过 loader 机制实现 eslint 的检测工作

前置工作：

1. 项目代码
2. 完成相应的依赖安装
3. 安成 eslint 模块安装
4. 完成 eslint-loader 模块安装
5. 初始化 .eslintrc.js 配置文件

• 在 webpack.config.js 文件配置 eslint-loader 应用在 .js 文件中
• 安装相关插件，如：eslint-plugin-react
• 修改 .eslintrc.js 的配置

// .eslintrc.js

module.exports = {
  ...
  rules: {
    'react/jsx-uses-react': "error" // 可以数字2代替
    'react/jsx-uses-vars': "error"
  },
  plugins: [
    'react'
  ]
}

• 也可以使用共享配置recomended降低使用成本

// .eslintrc.js

module.exports = {
  ...
  extends: [
    ...
    'plugin: react/recomended' // plugin：插件名称/配置名字
  ],
  ...
  rules: {
    // 'react/jsx-uses-react': "error"
    // 'react/jsx-uses-vars': "error"
  },
  plugins: [
    // 'react'
  ]
}

ESLint 检查 TypeScript

• 初始化项目
• 安装 eslint typescript
• 初始化 .eslintrc.js 配置文件，注意当询问 use TypeScript ? 是要选择 yes

// .eslintrc.js

module.exports = {
  ...
  parser: '@typescript-selint/parser', // 指定一个语法解析器
  ...
}

• 执行 npx eslint .\index.ts

Stylelint

Stylelint 介绍

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

Stylelint 快速上手

• 安装 stylelint npm i stylelint -D
• 安装 standard 插件 npm i stylelint-config-standard -D
• 创建 .stylelintrc.js 配置文件，并修改 extends 字段

// .stylelintrc.js

module.exports = {
    extends: 'stylelint-config-standard'
}

• 执行 npx stylelint ./index.css，加上参数 --fix 可以自动修复部分格式问题
• 检查 sass 文件，执行 npm i stylelint-config-sass-guidelines -D，修改 .stylelintrc.js 文件中的 extends 为数组，添加 sass 插件

// .stylelintrc.js

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

Prettier

Prettier 介绍

• Prettier 几乎可以完成所有类型文件的格式化工作

Prettier 快速上手

• 安装， npm i prettier -D
• 检查某个文件并输出检查结果，npx prettier style.css
• 检查并格式化某个文件，npx prettier style.css --write
• 检查并格式化项目所有文件，npx prettier . --write

ESLint 结合 Git Hooks

Git Hooks 介绍

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

• 使用 lint 的目的就是保证提交到仓库的代码是没有问题的

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

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

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

Git Hooks 快速上手

• 希望通过 Git Hooks 钩子在代码提交前强制实现对代码的 lint 操作
• 很多前端开发者并不擅长使用 shell
• Husky 可以实现 Git Hooks 的使用需求 npm i husky -D，然后在 package.json 中添加如下配置

// package.json

{
  ...
  "scripts": {
    "test": "eslint ./index.js"
  }
  ...
  "husky": {
    "hooks": {
      "pre-commit": "npm run lint"
    }
  }
}

• 配合 lint-stage 使用，npm i lint-staged -D

// package.json
{
  ...
  "scripts": {
    "test": "eslint ./index.js",
    "precommit": "lint-staged"
  }
  ...
  "husky": {
    "hooks": {
      "pre-commit": "npm run precommit"
    }
  },
  "lint-staged": {
    "*.js*": [
      "eslint",
      "git add"
    ]
  }
}