前端工程工作流规范
栏目: JavaScript · 发布时间: 5年前
内容简介:在日常开发过程中,前端工程工作流程规范主要包括代码检查规范以及代码提交规范。而代码检查主要两个部分:语法检查及类型检查;代码提交规范主要是Git Commit Log规范。本文主要分享日常工作中,实现自动化工作流规范的几种工具:1、JavaScript语法检查 - ESLint
在日常开发过程中,前端工程工作流程规范主要包括代码检查规范以及代码提交规范。而代码检查主要两个部分:语法检查及类型检查;代码提交规范主要是Git Commit Log规范。
本文主要分享日常工作中,实现自动化工作流规范的几种工具:
1、JavaScript语法检查 - ESLint
2、JavaScript类型检查 - Flow
3、自动化代码检查规范 - husky + lint-staged
4、自动化代码提交规范 - husky + commitlint
JavaScript语法检查 - ESLint
文档: cn.eslint.org/docs/user-g…
安装
安装ESLint
npm install eslint --dev 复制代码
安装其他依赖
// babel-eslint 是对babel解析器的包装,使其能与ESLint兼容,支持对babel编译的代码进行检查 npm install babel-eslint -dev // eslint-config-react-app 此插件包括了使用Create React App创建的项目中默认的ESLint配置 npm install eslint-config-react-app --dev // eslint-plugin-react 此插件是与React语法相关的检查规则 npm install eslint-plugin-react --dev // eslint-plugin-jsx-a11y 此插件是与JSX语法相关的检查规则 npm install eslint-plugin-jsx-a11y --dev // eslint-plugin-import 此插件用于支持ES6的import/export语法检查 npm install eslint-plugin-import --dev // eslint-plugin-flowtype 此插件是与flow相关的检查规则,使用了flow的项目,需要引入 npm install eslint-plugin-flowtype --dev 复制代码
配置
.eslintrc.js
module.exports = { parser: 'babel-eslint', extends: ['react-app', 'plugin:flowtype/recommended'], plugins: ['react', 'flowtype', 'jsx-a11y', 'import'], rules: { // 【error】使用单引号 quotes: ['error', 'single'], // 句末不加分号 semi: ['error', 'never'], // 【warn】禁止未使用过的变量 'no-unused-vars': [ 'warn', { vars: 'all', args: 'none', }, ], ... } } 复制代码
检查
命令行
npx eslint src 复制代码
package.json
{ "scripts": { "lint": "eslint src" } } 复制代码
npm run lint 复制代码
JavaScrip静态类型检查 - flow
文档:flow.org/
安装
// 注意:对于使用react-native init创建的项目,flow-bin版本应使用 0.76.0 npm install flow-bin --dev 复制代码
配置
.flowconfig使用react-native init默认的配置即可
检查
命令行
npx flow check 复制代码
package.json
{ "scripts": { "staged_flow": "flow focus-check" } } 复制代码
npm run staged_flow 复制代码
husky + lint-staged 自动化代码检查流程
上面介绍了通过eslint对JavaScript语法进行检查,通过flow对JavaScript静态类型检查,而在实际开发过程中,为了提高开发效率,应该只对本次提交所修改的文件进行检查,而不是每次都对所有文件进行检查。
这就需要使用 lint-staged 来实现。使用如下:
// 安装 $ npm install --save-dev lint-staged 复制代码
// 配置 package.json { "lint-staged": { "src/**/{*.js,*.jsx}": [ "yarn run lint", "yarn run staged_flow" ] }, } 复制代码
而我们使用 husky 来更方便的使用 Git Hooks。使用如下:
// 安装 $ npm install husky --save-dev 复制代码
// 配置 package.json { "husky": { "hooks": { "pre-commit": "lint-staged" } } } 复制代码
以上就是配置 pre-commit
Git Hook,支持每次提交前,执行 lint-staged
,即对此次提交所修改的文件进行代码检查。从而实现了代码流程的自动化。
Git Commit Log 规范
开发过程中,需要规范不仅仅只有代码上的规范,还有很重要的一部分则是Git Commit Log规范。
Git Commit Log规范最为流行的则是Angular规范。使用 commitlint 自动化规范流程,使用如下:
// 安装 $ npm install --save-dev @commitlint/config-conventional @commitlint/cli // 添加配置文件 $ echo "module.exports = {extends: ['@commitlint/config-conventional']}" > commitlint.config.js 复制代码
通过配合 husky 配置 Git Hooks。如下:
// 配置 package.json { "husky": { "hooks": { "commit-msg": "commitlint -e $GIT_PARAMS" } } } 复制代码
以上,就能实现 Git Commit Log 规范流程自动化,非常方便。规范了 Git Commit Log,就能直接使用 Git Commit Log 来自动生成 changelog,使用 conventional-changelog-cli ,如下:
// 安装 $ npm install --save-dev conventional-changelog-cli // 使用 $ npx conventional-changelog -p angular -i CHANGELOG.md -s 复制代码
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网
猜你喜欢:- 前端工作流中的hooks
- gulp打造前端自动化工作流
- 使用webpack4打造自己的前端工作流
- Gulp4 前端自动化工作流配置
- 前端工程化:围绕Jenkins打造工作流的过程
- LegoFlow 开源 v2.0 版本,前端工作流客户端
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
硅谷产品:36讲直通世界级产品经理
曲晓音 / 电子工业出版社 / 2018-10 / 59
《硅谷产品:36讲直通世界级产品经理》是Facebook资深产品经理曲晓音撰写的产品实战教程,立足于作者在Facebook、Instagram、Microsoft、Atlassian等硅谷科技公司的工作经验,分享硅谷先进的产品思维和方法论,用实际案例带领读者了解硅谷产品经理的所想所做。 《硅谷产品:36讲直通世界级产品经理》适合产品经理从业者、想要提升产品理解能力的技术运营人员、刚刚入行或者......一起来看看 《硅谷产品:36讲直通世界级产品经理》 这本书的介绍吧!