vue react项目结合xima进行代码提交前eslint检测，git commit拦截

vue react项目结合xima进行eslint检测及修复

目前新进了一个项目，需要搭建框架对前端代码规范进行约束，不符合规范的无法提交git commit，保证了代码的质量，这里记录一下搭建过程哦

使用xima

• 什么是xima

  xima 是《集团前端规约》的配套工具，可以为工程一键接入规约、一键扫描和修复规约问题，保障工程的编码规范和代码质量。简而言之是一个帮我们检测出项目中的eslint的错误以及自动修复eslint的npm包，https://www.npmjs.com/package/xima

• xima如何使用

  在终端执行：

    npm install xima -g
    项目中加入xima
    npm i xima -D
    安装各种依赖：如工具依赖，包括 ESLint、stylelint、commitlint 等；配置依赖，包括 eslint-config-ali、stylelint-config-ali、@commitlint/config-ali 等
    写入各种配置文件（到工程根目录）：包括 .eslintrc.js、.eslintignore、.stylelintrc.js、.stylelintignore、commitlint.config.js、.prettierrc.js、.editorconfig、.vscode/settings.json 等；此外还会写入一个 xima.config.js 文件，包含 xima 工具的一些配置，如启用的功能、黑名单等
    配置 git commit 卡点：使用 husky + lint-staged 设置代码提交卡点，在 git commit 时会运行 xima scan，若有规约问题则阻止提交 

安装配置为

 "devDependencies": {
    "xima": "^0.3.0"，
    "lint-staged": "^10.0.7",
    "eslint":"6.7.2",
    "eslint-config-ali":"^12.1.0",
    "stylelint":"^13.13.1",
    "stylelint-config-ali":"^0.4.1",
    "stylelint-config-standard":"^22.0.0",
    "stylelint-scss":"^3.19.0"
  },

• xima scan：一键扫描

在工程的根目录执行命令，即可扫描工程的代码规约问题：

• xima fix：一键修复
  在工程的根目录执行命令，即可自动修复工程的代码规约问题：

package.json的script中添加

    "xima-scan": "xima scan",
    "xima-fix": "xima fix"

commit-m 命名规范拦截 husky使用

• 在做前端工程化时husky可以说是一个必不可少的工具。husky可以让我们向项目中方便添加git hooks。通常情况下我只需要如下两步就可在项目中引入并设置好husky：

• 将husky添加到项目的开发依赖中

    npm install -D husky

• 使用husky对git上传进行拦截，相当于git hooks钩子
  package.json添加

 "husky": {
    "hooks": {
      "commit-msg": "xima exec commitlint -E HUSKY_GIT_PARAMS",
      "pre-commit": "xima exec lint-staged"
    }
  }

git commit-m检测eslint及stylelint并拦截

在我们介绍了Husky、Commitlint之后，来看一个前端文件过滤的工具Lint-staged，代码的格式化肯定会涉及到文件系统，一般工具会首先读取文件，格式化操作之后，重新写入。对于较大型的项目，文件众多，首先遇到的就是性能问题，虽然如Eslint之类的也有文件过滤配置，但毕竟还是对于匹配文件的全量遍历，如全量的.js文件，基本达不到性能要求，有时还会误格式化其他同学的代码，因此我们引入Lint-staged，一个仅仅过滤出Git代码暂存区文件(被committed的文件)的工具。

    npm install --save-dev lint-staged husky

首先明确一下，Lint-staged仅仅是文件过滤器，不会帮你格式化任何东西，所以没有代码规则配置文件，需要自己配置一下，如：.eslintrc、.stylelintrc等，然后在package.json中引入。

"gitHooks": {
    "pre-commit": "lint-staged"
  },
  "lint-staged": {
    "**/*.{js,jsx,ts,tsx}": "xima exec eslint",
    "**/*.{css,scss,less,acss}": "xima exec stylelint"
  },

项目中配置对应文件

项目提交git时效果