统一团队协作的代码风格

目前在梳理团队项目时,发现很多代码不规范的问题,各式命名杂糅,风格迥异,看着就像一锅大杂烩,不利于代码的可读及维护。于是决定引入工具,采用eslint+prettier+husky+lint-staged方式,强制代码格式的统一。因为项目是使用create-react-app建立,因此在该脚手架上进行修改。

eslint与prettier

eslint重在代码质量,虽然也可以格式化,但是不如prettier专业。因此,采用eslint来规范代码,prettier来统一代码格式。eslint与prettier的协作,可以参考Integrating with Linters#ESLint

配置

一、 安装prettier、eslint-config-prettier、eslint-plugin-prettier和eslint-plugin-compat。

  • eslint-config-prettier用于禁用与prettier冲突的规则。
  • eslint-plugin-prettier将prettier当做eslint规则来运行。
  • eslint-plugin-compat检测使用的函数是否兼容浏览器。

统一团队协作的代码风格_第1张图片

二、移除 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需作为最后一个扩展,它做了三件事:

  1. 启用“eslint-plugin-prettier”。
  2. 在rules中设置“prettier/prettier”为error。
  3. 继承“eslint-config-prettier”的配置。

问题

  • 若是安装了ESlint 6.X版本,在vscode出现类似“Failed to load plugin 'compat' declared in 'test\mytest\.eslintrc.js': Cannot find module 'eslint-plugin-compat'”安装插件失败的信息提示,则可以通过将eslint版本降到5.X版本来解决。
  • 出现该警告“Warning: React version was set to "detect" in eslint-plugin-react settings, but the "react" package is not installed. Assuming latest React version for linting.”,则可在.eslintrc.js中加入以下内容来解决。
settings: {
    react: {
        version:  "999.999.999"
    }
},

husky和lint-staged

  • husky:在 .git/hooks 中写入 pre-commit 等脚本激活钩子,在 Git 操作时触发。
  • lint-staged:参考 Git 中 staged 暂存区概念,在每次提交时只检查本次提交的文件。保证了不会修改别人的文件。

因为husky可以调用githooks,lint-staged允许我们对git中的staged files运行脚本,两者相加,可用于防止团队成员无视eslint的报错,将代码风格不符合规范的代码提交到git仓库中。

配置

一、安装husky和lint-staged
yarn 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 操作时:

  1. 由于安装husky后其在.git/hooks中写入了pre-commit钩子,该钩子在 git commit 执行时被触发,执行npm run lint-staged脚本(即lint-staged命令);
  2. lint-staged的配置,就是利用linters对暂存区的文件路径应用过滤规则,匹配的文件将执行后面配置的任务,这里的任务就是调用项目中的prettier格式化文件,将格式化好的文件通过git add指令加入暂存区。调用项目中的eslint检查文件,发现报错就终止流程,不再进行commit操作。两任务并行运行。

统一团队协作的代码风格_第2张图片

参考自:
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 运行环境报警告的解决方案

你可能感兴趣的:(javascript,前端,react.js,es6)