Front-end engineering workflow specification

In daily development process, front-end engineering workflow specification mainly includes code inspection specification and code submission specification. And the code check is mainly two parts: grammar check and type check; The code submission specification is mainly the Git Commit Log specification.

This article mainly shares several tools to realize automated workflow specification in daily work:

1. JavaScript syntax checking – ESLint

2. JavaScript type check -flow

3. Automated code Inspection specifications – HusKY + Lint-Staged

4. Automated code submission specification – HusKY + CommitLint

JavaScript syntax checking – ESLint

Documents: cn.eslint.org/docs/user-g…

The installation

Install ESLint

npm install eslint --dev
Copy the code

Install additional dependencies

// babel-eslint is a wrapper around the Babel parser to make it compatible with ESLint, NPM install babel-eslint-dev // eslint-config-react-app This plugin includes the default ESlint configuration NPM for projects created using the Create React app Install eslint-config-react-app --dev // eslint-plugin-react NPM install eslint-plugin-react --dev eslint-config-app --dev eslint-plugin-react --dev // eslint-plugin-jsx-a11y NPM install eslint-plugin-jsx this plugin is a check rule related to JSX syntax-a11y --dev // eslint-plugin-import This plugin is used to support import/ for ES6exportNPM install eslint-plugin-import --dev // eslint-plugin-flowType NPM install eslint-plugin-import --dev // eslint-plugin-flowtype NPM install eslint-plugin-flowtype --devCopy the code

configuration

.eslintrc.js

module.exports = {
    parser: 'babel-eslint'.extends: ['react-app'.'plugin:flowtype/recommended'].plugins: ['react'.'flowtype'.'jsx-a11y'.'import'].rules: {
        // [error] use single quotes
        quotes: ['error'.'single'].// No semicolon at the end of the sentence
        semi: ['error'.'never'].// warn disallows unused variables
        'no-unused-vars': [
            'warn',
            {
              vars: 'all'.args: 'none',},],... }}Copy the code

check

The command line

npx eslint src
Copy the code

package.json

{
    "scripts": {
        "lint": "eslint src"}}Copy the code

npm run lint
Copy the code

JavaScrip static type check – flow

Documents: flow.org/

The installation

// Note: for projects created using react-native init, flow-bin should be 0.76.0 NPM install flow-bin --devCopy the code

configuration

Flowconfig use the default configuration of the React-native init

check

The command line

npx flow check
Copy the code

package.json

{
    "scripts": {
        "staged_flow": "flow focus-check"}}Copy the code

npm run staged_flow
Copy the code

Husky + Lint-Staged Automated code inspection processes

Eslint checks JavaScript syntax and Flow checks JavaScript static typing. In practice, you should check only the files you change this time instead of checking all the files each time.

This needs to be done using Lint-staged. Use as follows:

// Install $NPM install --save-dev lint-passageCopy the code

/ / configuration package. Json {" lint - staged ": {" SRC / * * / {*. Js, *. JSX}" : [" yarn run lint ", "yarn run staged_flow"]},}Copy the code

We use Husky to make it easier to use Git Hooks. Use as follows:

$NPM install husky --save-devCopy the code

Json {"husky": {"hooks": {"pre-commit": "lint-staged"}}}Copy the code

This is how to configure a pre-commit Git Hook that allows lint-staged code checks to be performed before each commit. Thus realizing the automation of code flow.

Git Commit Log specification

Git Commit Log specification is a very important part of Git Commit Log specification.

The most popular Git Commit Log specification is the Angular specification. Use the CommitLint automation specification process as follows:

$NPM install --save-dev @commitlint/config-conventional @commitlint/cli // Add configuration file $echo "module.exports = {extends: ['@commitlint/config-conventional']}" > commitlint.config.js
Copy the code

Configure Git Hooks with husky. As follows:

Json {"husky": {"hooks": {" commitlint-e $GIT_PARAMS"}}}Copy the code

Git Commit Log specification process automation, very convenient. Git Commit Log can be directly used to automatically generate changelog, using conventional- Changelog – CLI, as follows:

$NPM install --save-dev conventional-changelog-cli $NPX conventional-changelog -p angular-i changelog.md-s
Copy the code

Write in the last

The content I share in this article is used in my daily work, I hope it can be helpful to partners in need ~~~

If you like my articles, go to my personal blog star ⭐️