前端规范化标准

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

规范化介绍

为什么要有规范化标准

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

哪里需要规范化标准

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

实施规范化的方法

• 编码前人为的标准约定
• 通过工具实现Lint
• ESLint对TypeScript的支持
• ESLint结合自动化工具或者Webpack
• 基于ESLint的衍生工具
• Stylelint工具的使用

ESLint介绍

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

ESLint 安装

ESLint 安装步骤：

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

ESLint 检查步骤

• 编写“问题”代码
• 初始化eslint yarn eslint --init
• 使用 eslint 执行检测 yarn eslint 文件路径
• 完成 eslint 使用配置

ESLint 配置文件解析

代码运行环境：

ESLint 配置注释

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

console.log(str1)

http://eslint.cn/docs/user-guide/configuring#configuring-rules

ESLint 结合自动化工具

• 集成之后， ESLint 一定会工作
• 与项目统一，管理更加方便
  注意：1、需要安装eslint和gulp-eslint/ eslint-loader模块。
  2、初始化 .eslintrc.js 配置文件

Stylelint 使用介绍

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

Prettier 的使用

通用的前端代码格式化工具，可以格式化各种类型的文件。
yarn prettier 文件路径/. --write //直接覆盖为格式化后的代码

Git Hooks 介绍

代码提交至仓库之前未执行 lint 工作，通过 Git Hooks 在代码提交前强制 lint。

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

//package.json中添加
"husky": {
	"hooks": {
		"pre-commit": "npm run test"
	}
}