I believe that many friends will encounter the problem of formatting code when developing, especially when changing a computer or taking over a new project. Different styles of code make us very uncomfortable as developers. So how to unify the code style and how to make the code look elegant?

ESLint

First we install ESlint to format the Js code

npm i eslint -g
eslint --init
Copy the code

After the installation is complete, a.eslintrc.js file will be generated. Here I chose the standard.

The ESLint plugin is downloaded from the VSCODE plugin. With this plugin we can configure the following in VSCODE Settings:

 "editor.codeActionsOnSave": {
       "source.fixAll": true,
  },
Copy the code

Isn’t it easy, when you save the code, js is automatically formatted? If you want to format other files in your project, you can add them to package.json

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

StyleLint

StyleLint has no init method, we manually create.stylelintrc.js.

module.exports = { extends: ["stylelint-config-standard", "stylelint-config-recess-order"], plugins: ["stylelint-order"], rules: { "at-rule-no-unknown": [ true, { "ignoreAtRules": [" extends ", "tailwind"]}], "the selector - class - the pattern:" [/ / naming conventions - "^ ([a-z] [a - z0-9] *) (- / a - z0-9 +) * $", {" message" : "Expected class selector to be kebab-case"}], "string-quotes":"single", // single quotes},};Copy the code

Install stylelint

npm i stylelint  stylelint-config-recess-order stylelint-config-recommended stylelint-config-standard stylelint-order -D
Copy the code

Also download the StyleLint plugin from VSCODE plugin. Isn’t it simple? When you save the code, the CSS is automatically formatted. If you want to format other files in your project, you can add them to package.json

  "scripts": {
      "lint:css": "stylelint src/**/*.*ss --fix  --custom-syntax postcss-less",
  }
Copy the code

I’m using less here so I need postCSs-less.

Commitizen

Simply use Commitizen- normalize your Commit message

npm install -g commitizen
commitizen init cz-conventional-changelog --save --save-exact
Copy the code

Then, after you use git add., you can use git Cz instead of git commit -m.

Husky

Git cz: Git cz: git cZ: git cz: git cz: git cz

package.json

{ "scripts": { "prepare": "husky install" } }
Copy the code
npm i husky -D
npm run prepare
npx husky add .husky/pre-commit "npm run lint:css && npm run lint:js"
Copy the code

Is that enough? Git code error cannot be displayed

lint-staged

npm i lint-staged -D
Copy the code

Modify the pre – commit

- npm run lint:css & npm run lint:js
+ npx lint-staged
Copy the code

Create a.lintStageDRC file

{
  "*.js": "eslint --fix",
  "*.{css,less}": "stylelint --fix"
}
Copy the code

Mission accomplished!