目前在梳理团队项目时,发现很多代码不规范的问题,各式命名杂糅,风格迥异,看着就像一锅大杂烩,不利于代码的可读及维护。于是决定引入工具,采用eslint+prettier+husky+lint-staged方式,强制代码格式的统一。因为项目是使用create-react-app建立,因此在该脚手架上进行修改。
eslint重在代码质量,虽然也可以格式化,但是不如prettier专业。因此,采用eslint来规范代码,prettier来统一代码格式。eslint与prettier的协作,可以参考Integrating with Linters#ESLint
一、 安装prettier、eslint-config-prettier、eslint-plugin-prettier和eslint-plugin-compat。
二、移除 package.json 中的 eslintConfig 字段,创建 .eslintrc.js 文件,添加以下内容:
module.exports = { extends: [ "react-app", "plugin:compat/recommended", "plugin:prettier/recommended" ], env: { browser: true, node: true, es6: true }, settings: { react: { version: "999.999.999" } }, rules: { "jsx-a11y/anchor-is-valid": "off", "spaced-comment": "error", "id-length": "error", "no-console": process.env.NODE_ENV === "production" ? "error" : "off", "no-debugger": process.env.NODE_ENV === "production" ? "error" : "off", "no-const-assign": "error", "new-cap": "error" }};
rules里面的内容可根据团队规范自定义添加。
plugin:prettier/recommended
需作为最后一个扩展,它做了三件事:
settings: { react: { version: "999.999.999" }},
因为husky可以调用githooks,lint-staged允许我们对git中的staged files运行脚本,两者相加,可用于防止团队成员无视eslint的报错,将代码风格不符合规范的代码提交到git仓库中。
一、安装husky和lint-stagedyarn add husky lint-staged --dev
二、在scripts中添加
"lint-staged": "lint-staged","lint-staged:js": "eslint --ext .js,.jsx"
在package.json中添加以下内容
"husky": { "hooks": { "pre-commit": "npm run lint-staged" }},"lint-staged": { "**/*.{js,jsx,json}": [ "prettier --write", "git add" ], "**/*.{js,jsx}": "npm run lint-staged:js"},
当开发者执行 git commit 操作时:
husky
后其在.git/hooks
中写入了pre-commit
钩子,该钩子在 git commit 执行时被触发,执行npm run lint-staged
脚本(即lint-staged
命令);lint-staged
的配置,就是利用linters
对暂存区的文件路径应用过滤规则,匹配的文件将执行后面配置的任务,这里的任务就是调用项目中的prettier格式化文件,将格式化好的文件通过git add指令加入暂存区。调用项目中的eslint检查文件,发现报错就终止流程,不再进行commit操作。
两任务并行运行。参考自:
Formatting Code Automatically
eslint-plugin-prettier
husky
lint-staged
ESLint fails to load plugins when using ESLint 6.x
利用 git 钩子做代码提交前的检查
React 15.x升级到16.x 运行环境报警告的解决方案
联系客服