Shulou(Shulou.com)06/02 Report--

This article introduces the knowledge of "how to arm your code base quickly". In the operation of actual cases, many people will encounter such a dilemma, so let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!

1. Standardize commit information

First, take a look at the commit record of angular's code base, as shown in the figure:

We can use commitizen and husky to standardize the commit of the code base.

Install the following dependencies:

Npm install @ commitlint/cli @ commitlint/config-conventional husky-D

If you have not already installed commitizen, install it globally first:

Npm install commitizen-g

Add the husky field to the package.json.

{"husky": {"hooks": {"commit-msg": "commitlint-E HUSKY_GIT_PARAMS"}},}

Husky is a git hook tool, using husky, we can easily configure git hook scripts in package.json, such as pre-commit, pre-push, commit-msg and so on.

(1) create a commitlint.config.js file

Module.exports = {extends: ["@ commitlint/config-conventional"],}

From now on, please use git cz instead of git commit to submit information. Let's see what would happen if we wrote a random git commit-m 'fixbug'?

Use git cz to fill in the contents of commit.

Type description of git cz:

Although we can now standardize the submission of information, we may not like the default interaction, for example, a concise description is fine, do not want to prompt me to write a detailed description, then we can use cz-customizable to customize.

(2) Custom submission instructions

Install cz-customizable:

Npm install cz-customizable-D

Cz-customizable is a customizable Commitizen plug-in that helps achieve consistent commit message.

Cz-customizable is suitable for large teams to customize scope, and commit type.

Create a new .cz-config.js:

Create the. cz-config.js file under the project root:

The official has provided a configuration information, which can be checked at this address:

Https://github.com/leoforfree/cz-customizable/blob/master/cz-config-EXAMPLE.js

/ / .cz-config.js module.exports = {types: [{value: 'feat', name:' feat: a new feature'}, {value: 'fix', name:' fix: a bug fix'}, {value: 'docs', name:' docs: Documentation only changes'}, {value: 'style' Name: 'style: Changes that do not affect the meaning of the code\ n (white-space, formatting, missing semi-colons, etc),}, {value:' refactor', name: 'refactor: A code change that neither fixes a bug nor adds a feature',}, {value:' perf', name: 'perf: A code change that improves performance' }, {value: 'test', name:' test: Adding missing tests'}, {value: 'chore', name:' chore: Changes to the build process or auxiliary tools\ n and libraries such as documentation generation',}, {value: 'revert', name:' revert: Revert to a commit'}, {value: 'WIP' Name: 'WIP: Work in progress'},], scopes: [{name:' accounts'}, {name: 'admin'}, {name:' exampleScope'}, {name: 'changeMe'}], allowTicketNumber: false, isTicketNumberRequired: false, ticketNumberPrefix:' TICKET-', ticketNumberRegExp:'\ d {1J 5}, / / it needs to match the value for field type. Eg.: 'fix' / * scopeOverrides: {fix: [{name:' merge'}, {name: 'style'}, {name:' e2eTest'}, {name: 'unitTest'}]}, * / override the messages, defaults are as follows messages: {type: "Select the type of change that you're committing:" Scope:'\ nDenote the SCOPE of this change (optional):', / / used if allowCustomScopes is true customScope: 'Denote the SCOPE of this change:', subject:' Write a SHORT, IMPERATIVE tense description of the change:\ n, body: 'Provide a LONGER description of the change (optional). Use "|" to break new line:\ nfarmer, breaking: 'List any BREAKING CHANGES (optional):\ nfarmer, footer:' List any ISSUES CLOSED by this change (optional). E.g.: # 31, # 34:\ n Are you sure you want to proceed with the commit above?', confirmCommit: 'Are you sure you want to proceed with the commit above?',}, allowCustomScopes: true, allowBreakingChanges: [' feat', 'fix'], / / skip any questions you want skipQuestions: [' body'], / / limit subject length subjectLimit: 100,}

Types: describe what the nature of the modification is, bugfix or feat, and define it here.

Scopes: once defined, we can select scope through the up and down keys

ScopeOverrides: define scope for each type

AllowBreakingChanges: as set to ['feat',' fix'] above, only if we type choose feat or fix will we be asked about breaking message.

AllowCustomScopes: set to true. When scope is selected, empty and custom can be selected. As the name implies, selecting empty means scope default. If custom is selected, you can enter the information yourself.

SkipQuestions: specify which steps to skip, for example, skip the detailed description we just mentioned, and set it to scope: ['body']. Assuming that our project does not involve the associated issue, we can set it to scope: [' body', 'footer']

SubjectLimit: length limit of description

According to the description of the field, it is recommended that if you want to customize the submission rules and modify and verify locally, the company's internal code base does not need to manage issue. In addition, I do not like to write long descriptions, so I dropped body and footer to skip.

Cz-customizable will first look for the. cz-config.js or. Config/cz-config.js in the root directory of the project, and if it cannot be found, it will look in the home directory We can also manually specify the path to the configuration file in package.json.

"config": {"commitizen": {"path": "node_modules/cz-customizable"}, "cz-customizable": {"config": "config/path/to/my/config.js"}}

Now, we have standardized the commit information, but not the submitted code. In a code base, there are often two spaces / four spaces mixed, some places write; some do not write; the style is not uniform. For example, we want the code submitted to the git library to pass the eslint check or pass the test. We can do these things with the help of the hook pre-commit.

two。 Check before code submission

Installation dependencies:

Npm install lint-staged-D

Hook using pre-commit

"husky": {"hooks": {"pre-commit": "lint-staged"}}, "lint-staged": {"* * / * .js": ["prettier-- write", "eslint"]}

After this configuration, the file to be submitted (not the entire project) will be formatted by prettier and checked by eslint each time it is submitted, and then the commit will be successful.

(1) eslint and prettier configuration

My project is the react project, the following is my configuration.

Install eslint and prettier related dependencies:

Npm install eslint eslint-config-prettier eslint-plugin-promise eslint-plugin-react eslint-plugin-react-hooks prettier babel-eslint-D

Create a new .prettierrc.js

Of course, you can also configure it in the prettier field of package.json, where I configure it as a separate file for later maintenance.

Module.exports = {printWidth: 100, / / Line break singleQuote: true,// using single quotation marks over 100 in length

If you have some files that do not need to be formatted by prettier, you can create a new .prettierformats file, as follows:

Dist node_modules public

Create a new .eslintrc.js file

Here is my configuration:

Module.exports = {settings: {pragma: 'React', version:' detect'}}, / / babel parser to support ES6/7 features parser: 'babel-eslint', parserOptions: {ecmaVersion: 7, ecmaFeatures: {experimentalObjectRestSpread: true, jsx: true}, sourceType:' module'}, extends: ['prettier' 'prettier/react'], plugins: [' promise', 'react',' react-hooks'], env: {browser: true, es6: true, node: true}, rules: {'no-compare-neg-zero': 2, / / prohibit comparison with-0' no-cond-assign': 2 / / prohibit the assignment operator 'no-console': 1 in conditional expressions, / / disable console' no-constant-condition': 1, / / prohibit the use of constant expression' no-control-regex': 1 in conditions, / / prohibit the use of control characters' no-debugger': 2 in regular expressions, / / disable debugger' no-dupe-args': 2 / / prohibit duplicate parameter 'no-dupe-keys': 2' in function definition, / / prohibit duplicate key 'no-duplicate-case': 2 in literal quantity of object, / / prohibit duplicate case tag' no-const-assign': 1, / / prohibit modification of variable 'no-empty': 1' declared by const / / prohibit empty statement blocks' no-empty-character-class': 2, / / prohibit the use of empty character set 'no-ex-assign': 2' in regular expressions, / / prohibit the reassignment of abnormal parameters of catch clauses' no-extra-boolean-cast': 1, / / prohibit unnecessary Boolean conversions' no-extra-semi': 1 / / prohibit unnecessary semicolon 'no-func-assign': 2, / / prohibit reassignment of function declaration' no-inner-declarations': 0, / / prohibit variable declaration or function declaration in nested blocks. There is no need to prohibit 'no-invalid-regexp': 2, / / prohibit invalid regular expression string' no-irregular-whitespace': 1 in RegExp constructor. / / prohibit irregular whitespace 'no-obj-calls': 2' outside strings and comments, / / prohibit calling global objects as functions For example, Math () JSON () 'no-regex-spaces': 1, / / disables multiple spaces' no-sparse-arrays': 1 in the literal quantity of regular expressions, / / disables sparse arrays' no-unexpected-multiline': 1, / / prohibits confusing multiline expressions' no-unreachable': 1. / / prohibit the unreachable code 'no-unsafe-finally': 2 after return, throw, continue and break statements, / / prohibit the control flow statement' no-unsafe-negation': 1'in the finally statement block, / / prohibit the use of the negative operator 'use-isnan': 2 on the left Operand of the relational operator, / / require that the NaN be checked with isNaN () Such as isNaN (foo) instead of foo = = NaN 'valid-typeof': 2, / forces the typeof expression to be compared to a valid string (such as' undefined', 'object',' boolean', 'number',' string', 'function','symbol')' no-case-declarations': 1, / / the lexical declaration 'no-empty-pattern': 2 is not allowed in the case clause / prohibit the use of empty deconstruction mode 'no-fallthrough': 2, / / prohibit case statements from failing' no-global-assign': 2, / / disable assignment to native objects or read-only global objects' no-octal': 1, / disable octal literals' no-redeclare': 1, / / prohibit multiple declarations of the same variable 'no-self-assign': 1 / / disable self-assignment of 'no-unused-labels': 1, / / disable the occurrence of unused marks' no-useless-escape': 1, / / disable unnecessary escape characters' no-delete-var': 2, / / prohibit deletion of variables' no-undef': 2, / / disable the use of undeclared variables Unless they are mentioned in the / * global * / comment 'no-unused-vars': 1, / / prohibit the occurrence of unused variables' constructor-super': 2, / / require a call to super () in the constructor 'no-class-assign': 2, / / prohibit assigning values to classes' no-dupe-class-members': 2 / / prohibit duplicates of the name 'no-new-symbol': 2' in class members, / / prohibit the use of 'no-this-before-super': 2' by the Symbol and new operators, / / prohibit the constructor Use this or super 'require-yield': 2 before calling super (). / / yield' no-mixed-spaces-and-tabs': 1 in generator function is required. / / space is not applicable. Tab mixes' react/forbid-prop-types': [1, {forbid: ['any']}], / / prohibits some propTypes' react/prop-types': 1, / / does not check 'react/jsx-closing-bracket-location': 1 for props types, / / verifies the position of the closing parenthesis in JSX' react/jsx-curly-spacing': [1, {when: 'never', children: true}] / / strengthen or disable spaces in curly braces in JSX attributes and expressions. 'react/jsx-key': 2, / / verify that JSX has the key attribute' react/jsx-max-props-per-line': [1, {maximum: 1}] in an array or iterator, / / limit the maximum number of props on a single line in JSX 'react/jsx-no-duplicate-props': 2, / / prevent repeated props' react/jsx-no-undef': 1 in JSX / / prohibit undeclared variables' react/no-string-refs': 1, / / Using string literals in ref attributes is deprecated 'react/jsx-uses-react': 1 in JSX, / / prevent reactions from being mistakenly marked as unused' react/jsx-uses-vars': 1, / / prevent variables used in JSX from being mistakenly marked as unused 'react/no-danger': 1 / / prevent the use of the dangerous JSX attribute 'react/no-did-update-set-state': 2, / / prevent the use of setState' react/no-did-mount-set-state': 0 in componentDidUpdate, / / prevent the use of setState 'react/no-direct-mutation-state': 2 in componentDidUpdate, / / prevent this.state assignments' react/no-unknown-property': 2 / / prevent the use of unknown DOM attribute 'react/prefer-es6-class': 1, / / enforce ES5 or ES6 class' react/react-in-jsx-scope': 0 for React components, / / when using JSX Must introduce React 'react/sort-comp': 0, / / force component method order' react/sort-prop-types': 0, / / force component property order 'react/jsx-sort-props': 1,' react/no-deprecated': 1, / / do not use deprecated method 'react/jsx-equals-spacing': 1 / / enforce or prohibit the space 'react/wrap-multilines': 0,' comma-dangle': 1 around the equal sign in the JSX attribute, / / object literal quantifier cannot end with a comma 'react/no-multi-comp': 0, / / prevent each file from having multiple component definitions' flowtype/generic-spacing': 0 / / flowtype/space-after-type-colon': specification before and after the type in angle brackets of the generic object / / react-hooks' react-hooks/rules-of-hooks': 'error',' react-hooks/exhaustive-deps': 'warn'}} That's all for "how to arm your code base quickly". Thank you for reading. If you want to know more about the industry, you can follow the website, the editor will output more high-quality practical articles for you!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.