Code style uniformity: Use Husky, Prettier, ESLint to automatically format and inspect code when it is submitted.

The introduction

This requirement is mainly because the editors used by members of the group are not uniform, and the code styles are different. Therefore, if the code is formatted, it is difficult to distinguish the modified code in the code review stage. Of course, there are other benefits to having a uniform code style, but I won’t cut to the punch here.

Look at the effect

The source file

You can see there are a lot of red lines because prettier doesn’t conform to the rule for prettier, in which case esLint would report errors and that’s the red line you see. We’ll talk about how to configure it later. Let’s look at what happens at commit time.

Comparing the above image, you can see that the code has been formatted. In this case, we will change it to remove the error reported by ESLint. Pay attention toHelloWorld()There was a deliberate error, and we didn’t add a semicolon.

Submit again.

The code becomes

You can see beforeHelloWorld()The error is gone, and the semicolon is added automatically. This is done using esLint’s auto-fix feature.

To summarize: when we submit code, it will format it for us, then use ESLint to check the code and fix errors automatically, and report errors if they can’t be fixed. The commit will not be committed if an error is reported.

Here’s how to configure it.

Tools used

• Husky. A git hook tool that uses pre-commit hooks. In layman’s terms, Husky does something for you before you commit.
• Prettier. A very popular code formatting tool, you can easily find it in the editor of various plug-ins, such as vscode,atom,webstom can be found. It is used here to format code before it is submitted.
• Eslint. Code review tool. Eslint could also do some formatting, but Prettier already does that pretty well, so I didn’t use ESLint for formatting, just for error checking.
• Lint – staged. Execute custom instructions in your submission. Don’t let 💩 slip into your codebase. — Lint-passage

The installation

Install eslint

npm i -D eslint babel-eslint eslint-config-airbnb eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-react
Copy the code

Install the prettier

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

Install Husky, Lint-staged

npm i -D husky lint-staged pretty-quick
Copy the code

Prettier configuration

• Prettier code formats the core
• eslint-plugin-prettierPlugins can makeeslintuseprettierRule checks and uses the –fix option. Red line that ESLint prompts if the format is wrong as before.
• eslint-config-prettierPlugins, as I said earliereslintWill also check the code format, this plug-in is to turn off all unnecessary or possible followprettierRules that create conflicts.

Add the following configuration to eslintrc.json:

{
 "extends": ["airbnb"."plugin:prettier/recommended"],}Copy the code

This configuration does three things:

1. makeeslint-plugin-prettierTo take effect
2. Do not conform to theprettier/prettierAn error will be reported for the rule. That’s the red line from the previous screenshot.
3. makeeslint-config-prettierTo take effect. Where esLint overwrites configuration where prettier conflicts with prettier.

prettierThe configuration file

Prittier profiles support many different types, as can be seen here. Prettierrrc I use the. Prettierrrc format because I’ve tried other formats, but vscode only prettierrrc. To generate the configuration, you can use try it out on the official website. The export configuration is available at the lower left corner. This configuration is basically all that the style asks below, specific can undertake according to individual hobby configuration.

{
  "printWidth": 120.// The maximum number of characters in a line
  "tabWidth": 2.// The number of characters occupied by TAB
  "useTabs": false.// Whether to use TAB instead of space
  "semi": true.// Use a semicolon after each sentence
  "singleQuote": true.// Whether to use single quotation marks
  "jsxSingleQuote": false.// Whether JSX uses single quotes
  "trailingComma": "all".// End of array comma.
  "bracketSpacing": false.// {foo: xx}还是{ foo: xx }
  "jsxBracketSameLine": false./ / see's official website
  "arrowParens": "always" // Whether to use ()
}
Copy the code

Eslint configuration

Direct configuration:

{
  "extends": ["airbnb"."plugin:prettier/recommended"].// ESLint extends rules
  "parserOptions": {
    "ecmaVersion": 7."sourceType": "module"."ecmaFeatures": {
      "jsx": true}},"parser": "babel-eslint".// Resolve THE ES6 improt error
  "env": { // eg If browser is not configured, esLint will report undefined
    "es6": true."browser": true."node": true
  },
  "plugins": ["react"."jsx-a11y"."import"]."rules": {
    "class-methods-use-this": 0."import/no-named-as-default": 0."react/jsx-filename-extension": [
      "error",
      {
        "extensions": [".js".".jsx"}]}}Copy the code

Husky hook pre-commit configuration

  "husky": {
    "hooks": {
      "pre-commit": "lint-staged" // pre-commit, the hook before commit}},"lint-staged": {
    // The range of folder and file types can be configured here
    "src/**/*.{jsx,tsx,ts,js,json,css,md}": [
      "prettier --write".// Format prettier first
      "eslint --fix".// Use esLint for automatic fixes
      "git add" // Execute git if it passes]},Copy the code

Husky will call pre-commit hooks before you commit, execute Lint-staged code, and format code if it doesn’t conform to Prettier configuration. It will then check with esLint’s rules and stop the commit if it doesn’t conform to the rules and can’t be fixed automatically. If they pass, the code is added to the stage, and then commit.

The pit of other

1. The tail comma

TrailingComma is only useful on line breaks: trailingComma is configured as all

function HelloWorld({greeting = "hello", greeted = '"World"', silent = false, onMouseOver,}) {
	let noTrailingComma = [a , b,c]
}
Copy the code

After formatting is

function HelloWorld({
  greeting = "hello",
  greeted = '"World"',
  silent = false,
  onMouseOver, //There's a comma here}) {
  let noTrailingComma = [a, b, c]; // Notice that there is no comma after c
}

Copy the code

2. Vscode configuration

My vscode defaults to using globally installed eslint, not project-native, so I need to update the global version of the eslint plugin. If you know how to configure it, let me know.

At the end

If you do not understand or I write unclear, have a question, welcome to correct ~

Please refer to lion1ou.win/2020/06/23/ for an article