前端规范

75 阅读1分钟

参考自:构建前端代码预提交检查(Husky、Lint-staged)

1. 配置eslint

这里采用百度的ecomfe/eslint-config配置 eslint,流程如下:
(1)安装
npm i -D eslint @babel/eslint-parser @babel/eslint-plugin @ecomfe/eslint-config eslint-plugin-san。
(2)配置.eslintrc.js文件

module.exports = {
    extends: [
        '@ecomfe/eslint-config',
        '@ecomfe/eslint-config/san',
    ],
    // 或者
    // extends: [
    //  '@ecomfe/eslint-config',
    //  'plugin:san/strongly-recommended',
    // ]
};

2. 安装husky

npm i -D huksy@4.3.8

3. 安装lint-staged

npm i -D lint-staged@14.0.1
注意:lint-staged是文件级别的,如你只修改了文件A的第N行的代码,lint-staged不是仅仅作用于第N行,而是会作用于整个文件A。

4. 配置 package.json

"lint-staged": {
  "*.{js,san}": [
    "eslint"
  ]
},
"husky": {
  "hooks": {
      "pre-commit": "lint-staged"
  }
},

运行git add 文件名、git commit ...,在提交前会运行eslint检验提交代码的规范。