what

使用 eslint 和 prettie 再配合 husky 提高前端开发规范。

why

平时的开发中，开发规范必不可少，手动修改规范既不可靠，也非常繁琐，所以可以利用 eslint 和 prettie 自动修复以及规范化代码。

再配合 husky ，当开发者 commit 的时候，会自动校验，且尝试自动修复代码，一旦修复失败，则会放弃代码提交。

how

安装以下几个依赖：

// package.json
{
  // ...
  // 忽略其他代码
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "lint": "lint-staged"
  },
  "dependencies": {
    "eslint": "^7.25.0",
    "eslint-config-airbnb": "^18.2.1",
    "eslint-config-prettier": "^8.3.0",
    "eslint-import-resolver-alias": "^1.1.2",
    "eslint-plugin-import": "^2.22.1",
    "eslint-plugin-jsx-a11y": "^6.4.1",
    "eslint-plugin-prettier": "^3.4.0",
    "eslint-plugin-react": "^7.23.2",
    "husky": "^6.0.0",
    "lint-staged": "^10.5.4",
    "module-alias": "^2.2.2",
    "prettier": "^2.2.1"
  },
  "husky": {
    "hooks": {
      "pre-commit": "lint-staged"
    }
  },
  "lint-staged": {
    "**/*.js": [
      "eslint --fix",
      "git add"
    ]
  },
  "_moduleAliases": {
    "@root": ".",
    "@lib": "./lib"
  }
}

配置 .eslintrc.js

module.exports = {
  // 使用 airbnb, prettier 推荐的规范
  extends: ['airbnb', 'plugin:prettier/recommended'],
  parserOptions: {
    // 使用 es6
    ecmaVersion: 6,
    sourceType: 'module',
  },
  // 自定义规则
  rules: {
    'arrow-body-style': 0,
    strict: 0,
    'no-console': 0,
    'func-names': 0,
    'space-before-function-paren': 0,
    'no-param-reassign': 0,
    'import/no-dynamic-require': 0,
    'global-require': 0,
    'consistent-return': 0,
  },
  // 配置别名
  settings: {
    'import/resolver': {
      alias: {
        map: [['@', '.']],
        extensions: ['.js'],
      },
    },
  },
};

配置好之后，安装 vscode 插件 eslint，这样可以在项目编译前检查错误，另外需要重启 vscode 使配置生效。

接下来配置 husky，安装依赖后运行以下命令：

# husky v6 版本是需要先安装的，会在项目下生成 .husky 目录
node_modules/.bin/husky install

# 添加 pre-commit 钩子
node_modules/.bin/husky set .husky/pre-commit "npm run lint"

到此为止，项目就配置完了，接下来可以测试一下，修改一个文件，然后 commit 的时候，就会自动运行 npm run lint 了。

!注意如果 husky 没生效，一定要确认 git 是在 node_modules/.bin/husky set .husky/pre-commit “npm run lint” 之前初始化的。

总结

添加项目规范，可以保证项目的格式统一，养成良好的开发习惯。

（完）

作者: Kavience 本文链接: http://www.kavience.com/frontend/eslint-and-prettie-cooperate-with-husky-to-improve-frontend-development-specifications.html 转载请注明:《Eslint和prettie配合husky提高前端开发规范》转自 http://www.kavience.com/frontend/eslint-and-prettie-cooperate-with-husky-to-improve-frontend-development-specifications.html，原作者：Kavience 版权声明: 自由转载-非商用-非衍生-保持署名（创意共享3.0许可证）
分类
frontend
标签
eslint