规范化是践行前端工程化中重要的一部分
为什么要有规范化标准:
软件开发需要多人协同,不同开发人员有着不同的编码习惯,不同的习惯增加项目维护成本,每个项目或团队需要明确统一的标准。
哪里需要规范化标准:
代码,文档,甚至提交的日志,开发过程中人为编写的成果物,代码最为重要。
如何实施规范化标准:
通过工具实现Lint,(刚有C语言的时候,有一些常见的代码问题是不能被编译器捕获到的,有人就开发了一个叫Lint的工具,用于在编译之前检查问题,后续这种工具,就都被称为Lint)
ESLint
目前最为主流的JavaScript Lint工具,检测代码质量,容易统一开发者的编码风格(缩进,分号等)
初次使用
npm install eslint --save-dev
npx eslint --init
npx是npm自带的一个工具,能执行npm包,简化了之前执行包的cli命令时的步骤,之前还要进入node_modules/.bin中
init过程就选择自己想要的就行了,之后会得到.eslintrc.js的初始文件
// .eslintrc.js
module.exports = {
"env": {
"browser": true, // 运行环境是浏览器,所以包含window,document等全局变量,还有node等其他选项
"es2015": true // ES2015中的全局变量例如promise,将可用
},
"extends": [
"standard" // 初始化时的选项,表示继承standard风格
],
"parserOptions": { // 设置语法解析器的相关配置
"ecmaVersion": 6, // 支持到es6,例如es7的语法async将不支持
"sourceType": "module"
},
"rules": { // 添加规则,更多规则可去官网查看
"no-alert": "error" // 使用alert会抛出警告,有off,warning,error三种可选
}
"globals": { // 添加全局成员
"qqqq": "readonly" // 以后可在全局直接使用qqqq变量
}
};
npx eslint ./index.js //校验文件
npx eslint ./index.js --fix //修复文件
配置注释
如果不可避免的某一处代码就是要违反一下规则,我们不能因为这一个点,就去推翻校验规则的配置
const str1 = "${name} is a coder" // eslint-disable-line no-template-curly-in-string
console.log(str1)
// eslint-disable-line [no-template-curly-in-string]就可忽略此行代码中的此规则
结合webpack
首先你拥有一个webpack的项目
- 安装eslint模块
- 安装eslint-loader模块
- 初始化.eslintrc.js配置文件
eslint检查肯定要在babel-loader编译之前进行,所以
// webpack.config.js
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: 'babel-loader'
},
{
test: /\.js$/,
enforce: 'pre', // 设置执行顺序,pre优先处理,post 最后处理
exclude: /node_modules/,
use: 'eslint-loader'
},
{
test: /\.css$/,
exclude: /node_modules/,
use: 'css-loader'
}
]
},
如果你的是react项目,因为它有一些jsx语法,所以需要安装一个eslint-plugin-react插件,并配置.eslintrc.js
// .eslintrc.js
module.exports = {
extends: [
'standard',
'plugin:react/recommended'
],
}
GitHooks配合ESLint
GitHook也称之为git钩子,每个钩子都对应一个任务,比如commit,push
通过shell脚本可以编写钩子任务触发时,要具体执行的操作。
我有一个test项目,从中可以看到.git=>hooks,hooks里面全都是各种时机的勾子。我们复制一份pre-commit.sample,删掉.sample
// pre-commit
#!/bin/sh
echo "YES YES"
然后执行git commit -m ""后你会发现输出了YES YES,这就简单的实现了git gook。接下来结合eslint,在提交前自动做检查。
我们前端人员大部分并不擅长写shell脚本,所以我们使用Husky来实现githooks的使用需求。
npm install husky -D
// package.json 中添加
{
"scripts": {
"lint": "eslint ."
},
"husky": {
"hooks": {
"pre-commit": "npm run lint"
}
}
}
再试一下commit,发现可以了。
后续还可以配合lint-staged,完成eslint后再自动格式化等操作。