Document your front-end workflow

Summarize a front-end workflow building process for future use. Create a simple template, then put it on NPM to create new content, which is convenient for direct NPM download template mainly using technology

  1. Eslint
  2. Prettier
  3. husky
  4. lint-staged
  5. commitlint
  6. commitizen

Base template code: template

Code specification

Code inspection tool

  • Eslint

  • Project integration

    • npm i eslint -D
npx eslint --init
Copy the code

    • The init command automatically generates.eslintrc.js

Code style tools

  • prettier

  • Project integration

    • npm i prettier eslint-config-prettier eslint-plugin-prettier -D
Copy the code

    • In. Eslintrc, “prettier” is added to extend to resolve the conflict between ESLint and prettier

      • Because the new version of ESlint-config-prettier is updated, you just need to write “prettierr”

    • Create the prettierrc

      // Configure it yourself
{
  "semi": false."tabWidth": 2."trailingComma": "none"."singleQuote": true."arrowParens": "avoid"
}
Copy the code

2. The git specification

Git has a number of hooks that allow us to perform different operations on code at different stages and control the standardization and accuracy of code submitted to the repository

2.1 Submitted code specification

  • pre-commit
  • Description: Determines whether the submitted code conforms to the specification through the hook function

2.2 Specification of submitted information

  • commit-msg
  • The hook function determines whether the commit information complies with the specification

2.3 Impact of submitted code

  • pre-push
  • Description: With hooks, tests are performed to avoid impacting previous content

tool

  • husky

    • Tools for manipulating Git hooks

  • lint-staged

    • Local staging code checking tool

  • commitlint

    • Commit Information verification tool

  • commitizen

  • Auxiliary Commit information, such as this, is provided by selecting input to standardize the commit information

The installation process

  • 1. Install code to verify dependencies

    • npm i lint-staged husky -D
npm set-script prepare "husky install" # Add script to package.json
npm run prepare Initialize husky by handing over git hooks to husky
Copy the code
      • Initializing husky creates a.husky folder in the root directory
    • npx husky add .husky/pre-commit "npx lint-staged"
Copy the code
      • Pre-commit Executes NPX Lint-staged directives

    • The root directory creates the.lintStageDRC.json file to control the checking and operation mode

  • 2. Install the submission information dependency

    • npm i commitlint @commitlint/config-conventional -D
npx husky add .husky/commit-msg 'npx --no-install commitlint --edit "$1"'
Copy the code

      • Commitlint/config-Conventional This is a standard configuration that identifies which specification is used to perform message validation. The default is the Angular commit specification

        type describe
        build Compile-related changes, such as releases, changes to project builds, or dependencies
        chore Other modifications, such as changing the build process, or adding dependent libraries, tools, and so on
        ci Continuous integration modification
        docs Document revision
        feat New features, new functions
        fix Modify the bug
        perf Optimization related, such as improved performance, experience
        refactor Code refactoring
        revert Roll back to the previous version
        style Code format modification, note not CSS modification
        test Test case modification

      • The commit-msg hook performs message validation

      • You can also use your own method to validate the content, see the message submission at vue@next

      • We can also use our own method, using the instructions to set it up

        • npx husky add .husky/commit-msg 'node [dir]/filename.js' # specify directory files
Copy the code

  • 3. Install auxiliary commit dependencies

    • npm i commitizen cz-conventional-changelog -D
Copy the code
      • Display information about installation commands and command lines
    • npm set-script commit "git-cz" # package.json add the commit directive and execute the 'git-cz' directive
Copy the code
      • Write the COMMIT directive
    • npx commitizen init cz-conventional-changelog --save-dev --save-exact
Copy the code
      • Initialize command line option information, otherwise there is no option

  • 4. Customize submission specifications

    • npm i -D commitlint-config-cz  cz-customizable
Copy the code

    • Changing commitlint.config.js to its own specification will override the previous one, so you don’t need to install the previous one

    • Increase. Cz – config. Js

    • In package.json, change the commit configuration to custom configuration

    • And then the transport looks like this

3. The test

Unit testing

  • jest
  • Test trilogy
  • input&output

Configuration jest

  • Go to the JEST document and add the content as required
  • www.jestjs.cn/docs/gettin…

Test runs for submitting code

  • npx husky add .husky/pre-push "npx test" Run through the test case before submitting the code
Copy the code

Mind mapping