前端工程工作流规范

栏目: 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
复制代码

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

人机交互:以用户为中心的设计和评估

人机交互:以用户为中心的设计和评估

董建明、傅利民、[美]沙尔文迪 / 清华大学出版社 / 2003-9-1 / 28.00

本书综述部分介绍了与“用户为中心的设计和评估”方法相关的背景知识及发展概况。其后,分3篇分别介绍了解用户、用户界在设计和可用性评估的内容及一些相关的研究专题。最后,第11章讨论了在组织中实施以用户为中心的设计的专题。本书主要面向的读者包括:软件或网站的设计人员。同时本书也可成为“现代人因工程学”及“以用户为中心的设计”的教材,还可作为软件或网站公司经理的提高用户满意度或提升公司形象的手册。一起来看看 《人机交互:以用户为中心的设计和评估》 这本书的介绍吧!

HTML 压缩/解压工具
HTML 压缩/解压工具

在线压缩/解压 HTML 代码

Markdown 在线编辑器
Markdown 在线编辑器

Markdown 在线编辑器

RGB HSV 转换
RGB HSV 转换

RGB HSV 互转工具