background

  1. The team has no uniform specification, each developer has his own preferences, and the code style is inconsistent. As a result, the entire file is automatically formatted when the content of a file is modified one bit at a time, and it takes a long time to trace back the modification point.

  2. For “obsessive-compulsive patients”, do not format the document in the mind like a knot, uncomfortable.

The selection

There are two existing formatting methods: esLint vs Prettier. Both can do formatting verification and can be fixed automatically for simple formatting problems, but I think:

Eslint:

  • I focus on the grammar check of JS files. For the format check, I need to write a lot of rules manually to match the style used by the team.

  • For small programs, WXML, WXSS and other file formats are more difficult;

Prettier:

  • More popular formatting tool module, specification is also more popular, suitable for most people’s coding habits;

  • You can use vscode’s minapp extension to format WXML files for small programs.

To sum up, use ESLint to validate JS syntax and Prettier to format code.

How does Prettier format

Install the prettier
npm install prettier -D
Copy the code
Package. json file to add script script
"scripts": {
    "prettier": "prettier --write ./**/*.{js,json,wxss,wxml,wxs}"
}
Copy the code

Prettier — Write formatting code, and for simpler fixes, Prettier automatically writes fixes.

{js,json, WXSS, WXML, WXS} is the file that matches all the js,json, WXSS, WXML, WXS suffixes in the current directory. If only one type of file is matched, remove the curly braces.

Adding the. Prettierrc configuration file

Add the file **. Prettierrc ** in the root directory of the project to configure the personalization of the default format for Prettier. For small program projects, add overrides rule, that is, WXML files are parsed with HTML interpreter, WXSS files with CSS interpreter, and WXS files with Babel interpreter.

{
    "trailingComma": "es5"."singleQuote": true."semi": true."tabWidth": 4."printWidth": 150."proseWrap": "preserve"."overrides": [{"files": "*.wxml"."options": { "parser": "html"}}, {"files": "*.wxss"."options": { "parser": "css"}}, {"files": "*.wxs"."options": { "parser": "babel"}}}]Copy the code

Running NPM Run prettier automatically formats the code.

Fix with Git hooks before commit

NPM run prettier -d would be too self-testing and cumbersome to require every developer to manually perform NPM run prettier -d before committing code to Git. So, is there a process for automatic formatting?

With Git hooks, run the formatting code automatically on pre-commit. NPM install husky (if this doesn’t work, remove node_modules and package-lock.json/ or yarn.lock and re-install NPM to make sure git’s pre-commit hook exists). Add the following configuration to package.json:

"husky": {
    "hooks": {
        "pre-commit": "npm run prettier"}},Copy the code

This will automatically format the code before committing it. If formatting errors occur, the code will not commit. However, with this configuration, every commit will validate all files in the project, which takes a long time.

We want to improve the speed of verification and only verify the files that are changed this time. NPM install lint-passage -d (tenantless

It should be noted that new versions of Lint-staged versions (v11.0.0 or above) require higher Node versions, and you can lower Lint-staged versions if you don’t want to ramp up Node versions. Package. json is configured as follows:

"lint-staged": {
    "*.{js,json,wxss,wxml,wxs}": "prettier --write",},"husky": {
    "hooks": {
        "pre-commit": "lint-staged"}},Copy the code

“.{js,json, WXSS, WXML, WXS}”: “prettier –write” Prettier verification and simple repair for these types of files If you have multiple rules, you can configure them as an array, for example:

"*.js": []"prettier --write"."eslint"]
Copy the code

Lint-staged validations can be performed only on files that Have been modified by Git this time, saving time.

How to format edit code automatically when vscode saves it

In the VSCode editor, install prettier and minApp extensions, then hold Down CTRL + comma, < CTRL +,>

Click on the first icon in the upper right corner to go to settings.json and add the following configuration to automatically format the code before saving the file with CTRL + S.

"[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[json]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
},
"minapp-vscode.wxmlFormatter": "prettier".Prettier used for formatting WXML (install the minapp extension first)
Copy the code