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"
},
项目中配置对应文件