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

代码提交前eslint检测，git commit拦截"/>

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

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

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

使用xima

• 什么是xima

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

• xima如何使用

  在终端执行：

    npm install xima -g项目中加入ximanpm 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时效果