Eslint + Prettier + stylelint + Husky + Lint-staged + verifyCommitMessage

完成它， 你的工程将会有一个统一风格的格式化标准，并且不需要人为的关注是否有问题，在git commit 命令时，会对message 的内容进行校验，保证提交信息都符合规范。也会自动去格式化代码再提交。所以无需关心团队编码工具是否一致。

Reference Link:

1. eslint-config-prettier
2. stylelint

Prepare your environment

Install package that you need

简单方法将以下内容copy到你的文件中，然后执行yarn or npm install

// package.json
"devDependencies": {
    "@commitlint/cli": "^16.2.3",
    "@commitlint/config-conventional": "^16.2.1",
    "eslint": "^8.0.0",
    "eslint-config-prettier": "^8.3.0",
    "eslint-plugin-prettier": "^4.0.0",
    "eslint-plugin-react": "^7.26.1",
    "husky": "^7.0.2",
    "lint-staged": "^11.2.3",
    "prettier": "^2.4.1",
    "stylelint": "^13.13.1",
    "stylelint-config-standard": "^22.0.0",
    "stylelint-order": "^4.1.0"
}
复制代码

Stylelint

stylelint-order

该插件的作用是强制你按照某个顺序编写 css。例如先写定位，再写盒模型，再写内容区样式，最后写 CSS3 相关属性。这样可以极大的保证我们代码的可读性。

stylelint-config-standard

作用：配置 Stylelint 规则。 官方的代码风格 ：stylelint-config-standard。该风格是 Stylelint 的维护者汲取了 GitHub、Google、Airbnb 多家之长生成的。

stylelint-config-recess-order

stylelint-order 插件的第三方配置

// .stylelintrc
{
  "extends": ["stylelint-config-standard", "stylelint-config-recess-order"],
  "plugins": ["stylelint-order"],
  "rules": {
    "indentation": 4,
    "no-descending-specificity": null
  }
}
复制代码

Eslint config

eslint-config-prettier

用来覆盖和eslint冲突的不重要的规则，保证prettier的格式化不会被报错

eslint-plugin-prettier

prettier 格式化规则插件，默认会调用.prettierrc文件

prettier

prettier 格式化插件

// .eslintrc
{
  "env": {
    "browser": true,
    "es2021": true
  },
  "extends": ["eslint:recommended", "plugin:react/recommended", "plugin:prettier/recommended"],
  "parserOptions": {
    "ecmaFeatures": {
      "jsx": true
    },
    "ecmaVersion": "latest",
    "sourceType": "module"
  },
  "plugins": ["react"],
  "rules": {
    // "no-confusing-arrow": "off",
    // "no-mixed-operators": ["error", { "allowSamePrecedence": true }],
    // "arrow-parens": [2, "as-needed", { "requireForBlockBody": false }]
  }
}

复制代码

Husky + Lint-staged

1. Run install command

   npm set-script prepare "husky install"
   npm run prepare
   复制代码

2. Run git hooks command

   npx husky add .husky/pre-commit "npx lint-staged"
   npx husky add .husky/commit-msg "npx commitlint --edit $1"
   复制代码

3. Define lint-staged file

   // .lintstagedrc
   {
     "**/*.{js,jsx}": [
       "prettier --config .prettierrc --write",
       "eslint --fix"
     ],
     "**/*.less": [
       "stylelint --fix"
     ]
   }
   复制代码

4. Create the .commitlintrc，详细规则请看官方 rules

   {
      "extends": ["@commitlint/config-conventional"],
      "rules": {
        "body-leading-blank": [2, "always"],
        "footer-leading-blank": [1, "always"],
        "header-max-length": [2, "always", 108],
        "type-empty": [2, "never"],
        "scope-empty": [0],
        "subject-empty": [2, "never"],
        "subject-full-stop": [0],
        "type-case": [0],
        "scope-case": [0],
        "subject-case": [0],
        "type-enum": [
          2,
          "always",
          [
            "feat",
            "fix",
            "perf",
            "style",
            "docs",
            "test",
            "refactor",
            "build",
            "ci",
            "chore",
            "revert"
          ]
        ]
      }
    }
   复制代码

类型描述：

Vscode plugin

You can install some plugin eslint stylelint prettier to free your using. then I will provide the settings.

eslint

提供eslint的校验，保存自动修复功能

stylelint

提供样式文件的校验，保存自动修复的功能

prettier

提供prettier 保存自动格式化的功能

// .vscode -> settings.json
{
  "eslint.codeAction.showDocumentation": {
    "enable": true
  },
  "eslint.codeAction.disableRuleComment": {
    "enable": true
  },
  "eslint.validate": ["javascript", "javascriptreact"],
  "eslint.codeActionsOnSave.mode": "all",
  "eslint.run": "onSave",

  "editor.defaultFormatter": null,
  "editor.formatOnSave": false,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true,
    "source.fixAll.stylelint": true
  }
}
复制代码

Tips

.eslintrc 中 plugin:prettier/recommended 的实际含义：

// .eslintrc
{
  "extends": ["prettier"],
  "plugins": ["prettier"],
  "rules": {
    "prettier/prettier": "error"
  }
}
复制代码

如果你的团队觉得在每次的commit都进行代码的eslint 校验or修复太过于繁琐，可以使用pre-push 的hook钩子来处理，对应的命令可以在scripts中配置，然后调用即可。

  // package.json
  ...
  "scripts": {
    "prepare": "husky install",
    "eslint:ci": "eslint $(git diff HEAD --name-only | grep -E '^src/.*\\.(jsx|js)$' | xargs)",
    "stylelint:ci": "stylelint $(git diff HEAD --name-only | grep -E '\\.less$' | xargs) 'fake.none' --allow-empty-input"
  },
...
复制代码

// pre-push file
#!/bin/sh
. "$(dirname "$0")/_/husky.sh"

npm run eslint:ci
npm run stylelint:ci
复制代码