前端规范化标准

规范化是前端工程化的重要一项

为什么要有规范标准

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

哪里需要规范化标准

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

实施规范化的方法

• 编码前人为的标准约定
• ESLint工具使用
• 制定ESLint校验规则
• ESLint对TypeScript的支持
• ESLint结合自动化工具或者webpack
• 基于ESLint的衍生工具
• Stylelint工具的使用

ESLint介绍

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

ESLint安装

npm i eslint -D
npx eslint --init

建议选第三个

不用在语句的末尾添加分号



不同的环境

ESLine配置注释

const str = "${name} is a coder" // eslint-disable-line (no-template-curly-in-string 忽略指定的规则)

ESLine结合vue（现代化项目）

ESLine检查TypeScript

一定要先安装TypeScript

安装npm插件

Stylelint的认识

yarn add stylelint -D
yarn add stylelint-config-standard // 共享配置
yarn add stylelint-config-sass-guidelines // 校验sass
npx stylelint ./index.css
npx stylelint ./index.sass

创建.stylelintrc.js文件

module.exports = {
 extends: [
	"stylelint-config-standard",
	"stylelint-config-sass-guidelines" 
	] // 继承配置
}

Prettier的使用

前端代码格式化工具

yarn add prettier -D
npx prettier
npx prettier style.css --write
npx prettier . --write // 格式化所有文件

Git Hooks

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

Husky可以实现Git Hooks的使用需求

yarn add husky -D
yarn add lint-staged -D

在package.json中

"scripts":{
	"test": "eslint ./index.js",
},
"husky": {
	"hooks": {
		"pre-commit": "lint-staged" // npm run test 只校验
	 }
},
"lint-staged": {
	"*.js": [
		"eslint", // 检查
		// 可做自动修改操作
		"git add" // 将处理过的代码重新 add 到 git 中
	]
}