前端代码规范以及git校验

目的

• 前端代码保存自动校验并修改成规范代码
• git commit 时自动校验，修改后若是代码还不规范时阻止提交

需要的工具

"eslint": "^7.11.0",
"eslint-config-airbnb": "^18.2.0",
"eslint-config-prettier": "^6.11.0",
"eslint-plugin-import": "^2.22.0",
"eslint-plugin-jsx-a11y": "^6.3.1",
"eslint-plugin-prettier": "^3.1.4",
"eslint-plugin-react": "^7.20.6",
"eslint-plugin-react-hooks": "^4.1.2",
"husky": "^4.3.0",
"lint-staged": "^10.4.0",
"pre-commit": "^1.2.2",
"prettier": "^2.1.2"

上面是所需要的依赖包，airbnb是集成的代码规范，prettier是自动修改代码为符合规范的代码，husky、lint-staged、pre-commit是用来实现git提交校验代码还有其他的是react有关的

依赖安装完成之后

执行 ./node_modules/.bin/eslint --init 后会在文件根目录下出现.eslintrc.js文件，之后修改成下面的配置

module.exports = {
  env: {
    browser: true,
    es2021: true,
    node: true,
  },
  extends: ["react-app", "airbnb", "plugin:prettier/recommended"],
  parserOptions: {
    ecmaFeatures: {
      jsx: true,
    },
    ecmaVersion: 12,
    sourceType: "module",
  },
  plugins: ["react"],
  rules: {
    "react/jsx-filename-extension": [1, { extensions: [".js", ".jsx"] }],
    "no-use-before-define": ["error", { functions: false, classes: false }],
    "no-console": 0,
  },
};

里面的rules配置项是自定义的代码规则， 如果需要可以在根目录下新增.eslintignore文件，配置校验代码需要忽略的文件

package.json

"scripts":{
 "lint": "lint-staged",
}
"pre-commit": [
    "lint"
  ],
  "husky": {
    "hooks": {
      "pre-commit": "lint-staged",
      "commit-msg": "echo $HUSKY_GIT_PARAMS"
    }
  },
  "lint-staged": {
    "src/**/*.js": [
      "eslint --fix --ext .js",
      "prettier --write",
      "git add"
    ]
  },

完成上面配置后，git提交代码时就可自动校验修改代码

vscode配置

setting 配置中添加

{
  //自动格式化
  "editor.formatOnSave": true,
  // eslint配置项，保存时自动修复
  "editor.codeActionsOnSave": {
    "source.fixAll": true
  },
  // 默认使用prettier格式化支持的文件
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "vetur.format.defaultFormatter.html": "prettier"
}

以上完成之后 就实现了最开始的两个目的