ESLint+Prettier+commit Message + Changelog +standard-version Automatic specification practice

Introduction and Advantages

ESLint

ESLint official website in Chinese

ESLint is a tool for identifying and reporting pattern matches in ECMAScript/JavaScript code with the goal of ensuring code consistency and avoiding errors. Prettier is freer and more rigorous than Prettier, and can find errors in JS.

Prettier

Prettier website

Prettier parses code, reprinting well-formatted code using rules you set for yourself. Because Prettier Opinionated does not require too many rules, it supports more editors and formatting HTML, CSS, etc.

husky + lint-staged

Husky making warehouse

Lint – staged making warehouse

Husky makes it easy to share Git hook commands with teams by adding Git hook functionality to the package script, giving us the ability to call other commands directly without having to write the hook script in the project’s.git/hook.

Lint-staged inspect all files that git Add has added into them and execute the commands you need to execute on them.

Because running ESLint through the entire project each time before committing the code is time-consuming and prone to fatal bugs in older projects. To solve this problem, we introduced Husky + Lint-staged code that can only be eslinted from our commit modifications to make linting more meaningful. This way, you can ensure that no errors enter the repository and enforce code styles.

commitizen

Commitizen making warehouse

Commitizen is a tool for writing qualified Commit messages. When you Commit using Commitizen, you will be prompted to fill in all required Commit fields at Commit time.

commitlint

Commitlint making warehouse

Commitlint checks that your commit messages conform to the regular commit format.

conventional-changelog

But – changelog making warehouse

If all your Commits are in Angular format, the Change log can be automatically generated by the script when you release a new version.

The resulting document consists of the following three sections.

New features

Bug fixes

Breaking changes.

Each section lists the associated Commits and has links to them. Of course, the resulting document allows manual modification, so you can add additional content before Posting.

standard-version

Standard version – making the warehouse

Using standard-version for version control eliminates the need to manually tag git tags and generate Changelog.

ESLint introduced

The installation

NPM

npm install eslint --save-dev
Copy the code

Configuring Usage Rules

Create the files.eslintrc.js and.editorConfig in the root folder

module.exports = {
  env: {
    browser: true.es2021: true.node: true,},extends: ["eslint:recommended"].parserOptions: {
    ecmaVersion: 12.sourceType: "module",},globals: {
    // Applet global variables
    __DEV__: true.__WECHAT__: true.__ALIPAY__: true.__wxConfig: true.App: true.Page: true.Component: true.Behavior: true.wx: true.getApp: true.getCurrentPages: true,},rules: {
    // This is my configuration, you can refer to the official team configuration
    "linebreak-style": ["error"."unix"].// newline style
    quotes: ["error"."single", { avoidEscape: true}]./ / single quotation marks
    semi: ["error"."always"]./ / a semicolon
    "no-mixed-spaces-and-tabs": [2.false].// Do not mix TAB and space
    "object-curly-spacing": [0."never"].// Whether unnecessary Spaces are allowed in braces
    "no-multiple-empty-lines": [2, { max: 2}].// Multiple blank lines are not allowed
    "brace-style": [2."1tbs", { allowSingleLine: true}].// if while function {must be on the same line as if, Java style.
    "no-redeclare": 2.// Disallow variable declarations repeatedly
    "no-trailing-spaces": 1.// No Spaces after the end of a line
    "no-unused-vars": [2, { vars: "all".args: "none"}].// Can't make out unused variables or parameters
    "default-case": 2.// Switch statements must end with default
    "prefer-const": 2.// Unassigned constants use const
    "template-curly-spacing": 1.Bad: {people. Name} correct {people. Name}
    "array-bracket-spacing": [2."never"]./ / there is a redundant space whether to allow the empty array Bad: [' foo ', 'bar'] Good: [' foo ', 'bar'];
    "brace-style": [2."1tbs", { allowSingleLine: true}].// Braces style
    "key-spacing": [2, { beforeColon: false.afterColon: true}].// Spaces before and after the colon}};Copy the code

.editorconfig

root = true

[*]
charset = utf-8
indent_style = space
indent_size = 2
end_of_line = lf
insert_final_newline = true
trim_trailing_whitespace = true

Copy the code

Method of use

To fix the code file, enter the following code in the terminal

// Install ESLint globally
eslint --fix index.js // fix is followed by the file name
// EsLint is not installed globally
npx eslint --fix index.js // fix is followed by the file name
Copy the code

Configure the following code in package.json

"scripts": {
    "lint": "npx eslint --fix **/*.js",},Copy the code

You can then type the following code in the terminal to implement ESLint formatting for the entire project

npm run lint
Copy the code

Prettier to introduce

The installation

NPM

npm install prettier --save-dev
Copy the code

Configuring Usage Rules

The.prettierrc.js file is created in the root folder. Prettier is Opinionated code formatter, so there are relatively few configuration items.

module.exports = {
  // Use 4 Spaces for indentation
  tabWidth: 2.// Instead of indentation, use Spaces
  useTabs: false.semi: true.singleQuote: true.overrides: [
    // Format WXSS/WXML using CSS/HTML rules
    {
      files: "*.wxss".options: {
        parser: "css",}}, {files: "*.wxml".options: {
        parser: "html",},},],};Copy the code

Method of use

To fix the code file, enter the following code in the terminal

// Install prettier globally
prettier --fix index.js // fix is followed by the file name
// No prettier is installed globally
npx prettier --write index.js // fix is followed by the file name
Copy the code

Configure the following code in package.json

"scripts": {
    "prettier": "npx prettier--write **/*.js",},Copy the code

You can then type the following code in the terminal to implement ESLint formatting for the entire project

npm run prettier
Copy the code

ESLint is used in combination with Prettier

Since both formats the code, we don’t want repetitive formatting and unnecessary conflicts, so we install middleware to ensure that both work in harmony

The installation

npm install --save-dev eslint-config-prettier
npm install --save-dev eslint-plugin-prettier
Copy the code

Configuration Method

Modify some configuration items in.eslintrc.js

module.exports = {
  extends: ["eslint:recommended"."plugin:prettier/recommended"].plugins: ["prettier"]};Copy the code

Husky + Lint-passage introduced

The installation

NPM

npm install husky --save-dev
npm install lint-staged --save-dev
Copy the code

Configuring Usage Rules

Configure in package.json

{
  "husky": {
    "hooks": {
      "pre-commit": "lint-staged"}},"lint-staged": {
    "miniprogram/**/*.js": [
      "npx eslint --fix"."prettier --write"."git add"]}}Copy the code

Commitizen

The installation

npm install commitizen --save-dev
// Initialize the general update log adapter with NPX
npx commitizen init cz-conventional-changelog --save-dev --save-exact
Copy the code

Configuring Usage Rules

Configure in package.json

{
	"scripts": {
		"commit": "cz"}}Copy the code

Method of use

After git add commits code, you can use either NPM run commit or NPX cz to prompt for a commit message

git add .
npm run commit
// npx cz
Copy the code

Hit the pit

Commitizen can be used in conjunction with Husky to execute commitizen in git commit hooks. But at the very least, using this method in Windows can cause commitizen to repeat the prompt every time it is typed, creating an unfriendly interaction, so it is not recommended to use it in conjunction with Husky in Windows.

The issue is mentioned in the GitHub repository issue, but there is no solution.Issue the url

Commitlint

The installation

npm install --save-dev @ commitlint / config-conventional @ commitlint / cli
Copy the code

Configuring Usage Rules

Configure in package.json

{
	"husky": {
    	"hooks": {
      		"pre-commit": "lint-staged".// This is the previous configuration
      		"commit-msg": "commitlint -E HUSKY_GIT_PARAMS"}}},Copy the code

New commitlint. Config. Js

module.exports = {
  extents: ["@commitlint/config-conventional"].rules: {
    "body-leading-blank": [1."always"]."footer-leading-blank": [1."always"]."header-max-length": [2."always".72]."scope-case": [2."always"."lower-case"]."subject-case": [
      2."never"["sentence-case"."start-case"."pascal-case"."upper-case"]],"subject-empty": [2."never"]."subject-full-stop": [2."never"."."]."type-case": [2."always"."lower-case"]."type-empty": [2."never"]."type-enum": [
      2."always"["build"."chore"."ci"."docs"."feat"."fix"."improvement"."perf"."refactor"."revert"."style"."test",],],},};Copy the code

Method of use

Git commit automatically checks your commit information for compliance with the specification

Hit the pit

Although the initial steps in the GitHub repository are used to generate commitlint.config.js files with the following code, the generated files are decoded utF-16 in a Windows environment, so an error will be reported when run automatically. Therefore, it is recommended that you manually create a commitlint.config.js and enter the above code to configure it.

conventional-changelog

The installation

 npm install --save-dev conventional-changelog-cli
Copy the code

Configuring Usage Rules

Configure in package.json

{
	"scripts": {
		"version": "npx conventional-changelog -p angular -i CHANGELOG.md -s"}}Copy the code

Method of use

npm run version
// Alternatively, skip the configuration and use the following code
npx conventional-changelog -p angular -i CHANGELOG.md -s
// If you want to generate all the changes so far
npx conventional-changelog -p angular -i CHANGELOG.md -s -r 0
Copy the code

standard-version

The installation

npm install --save-dev standard-version
Copy the code

Configuring Usage Rules

Configure in package.json

{
  "scripts": {
    "release": "npx standard-version"}}Copy the code

Method of use

npm run release
#Or use the following code without configuration
npx standard-version
#Using the above two methods, the default is to build the next large version, if you want to manually specify the version numberNPM run release -- -r 1.1.0Copy the code

Git operation specification summary

  1. Submit code
git add .
npm run commit
git pull origin master
git push origin master
Copy the code
  1. Version update

After submitting all pre-launch code

NPM run release -- -r 1.0.0 #Copy the code