fishx lint
fishx lint
是一个代码质量检查和美化工具,封装了 eslint
,prettier
,lint-staged
,husky
等,无门槛使用。它提供了两种代码检测方式,既可以配置只对提交的代码进行检查,也可以指定路径,对指定路径下的代码进行检查,方便灵活使用。
为什么
当前为了保证代码质量的最佳实践是 ci
时做全局 lint
,提交代码只对变更代码进行 lint
,但这一套流程涉及的包众多,也需要繁琐的配置,但这一切都可以简化,这就是 fishx lint
存在的意义。
安装
-
全局使用 如果想在全局使用
fishx lint
可以全局安装:$ npm install -g @fishx/cli
-
项目中使用:
$ npm install @fishx/cli
使用
-
对提交的代码进行校验
在
package.json
文件的scripts
中添加:+ "husky": { + "hooks": { + "pre-commit": "fishx lint --eslint --staged" + } + }
在每次
commit
代码的时候会对提交到暂存区的代码进行校验: -
使用
dir
参数自定义指定检测文件。检测你所指定的目录下所有
js
文件(不递归检测,只检测指定的当前目录下的js
),所以确保你指定的目录下存在js
文件。$ fishx lint --eslint '/Users/qifutao/Documents/workspace/fishx-desktop-pro/src/pages/AppMgr/*.js'
检测指定目录下所有子目录中的
js
文件:$ fishx lint --eslint '/Users/qifutao/Documents/workspace/fishx-desktop-pro/src/**/*.js'
指定多个要检测的
js
文件路径,多个路径之间使用逗号进行分隔:$ fishx lint --eslint '/Users/qifutao/Documents/workspace/fishx-desktop-pro/src/pages/AppMgr/**/*.js,/Users/qifutao/Documents/workspace/fishx-desktop-pro/src/pages/Button/**/*.js,/Users/qifutao/Documents/workspace/fishx-desktop-pro/src/pages/Login/**/*.js'
支持指定相对路径进行检测
$ fishx lint --eslint 'src/pages'
-
使用
--format
参数指定控制台的输出格式 目前支持的输出格式如下:- checkstyle
- codeframe
- compact
- html
- jslint-xml
- json
- junit
- stylish (默认)
- table
- tap
- unix
- visualstudio
举个
🌰 :$ fishx lint --eslint --format=table 'src/pages'
-
配置忽略检测文件
使用编辑器在要检测的项目根目录下创建
.eslintignore
文件,在该文件中配置需要忽略检测的文件路径,一行配置一个路径,例如以下就是忽略检测所有的文件:**/*.js
当
ESLint
运行时,在确定哪些文件要检测之前,它会在当前工作目录中查找一个.eslintignore
文件。如果发现了这个文件,当遍历目录时,将会应用这些偏好设置。一次只有一个.eslintignore
文件会被使用,所以,不是当前工作目录下的.eslintignore
文件将不会被用到。该文件的路径写法遵循了glob
语法:- *:匹配一个路径部分中0或多个字符, 注意不匹配以.开始的路径,比如.a
- **: 匹配0个或多个子文件夹
- ?:匹配一个字符
- {a,b}: 匹配a或者b, a和b也是通配符,可以由其他通配符组成
- !: 排除文件,如!a.js表示排除文件a.js
格式规范如下:
- 以 # 开头的行被当作注释,不影响忽略模式。
- 路径是相对于 .eslintignore 的位置或当前工作目录。
- 忽略模式同 .gitignore 规范。
- 以 ! 开头的行是否定模式,它将会重新包含一个之前被忽略的模式。
- 除了 .eslintignore 文件中的模式,ESLint总是忽略 /node_modules/* 和 /bower_components/* 中的文件。
例如以下写法,就是首先忽略所有 js ,然后去除忽略
code/portal/src/main/webapp/modules/
下的所有js ,最终可以达到指定检测该目录中 js 的效果:**/*js !code/portal/src/main/webapp/modules/**/*.js
-
使用
--prettier
代码美化-
对提交的代码进行美化
$ fishx lint --prettier --staged
-
对指定路径下的代码进行美化
$ fishx lint --prettier 'src/'
-
-
使用
--format
对代码自动修复执行如下命令可以对代码进行自动修复
-
对提交的代码进行修复
$ fishx lint --eslint --fix --staged
-
对指定路径下的代码进行修复
$ fishx lint --eslint --fix 'src/pages'
-
参数说明
$ Usage: fishx-lint [options] [dir]
# 对指定路径 lint
fishx-lint --eslint 'src/'
# 只对提交的代码进行 lint
fishx-lint --staged --eslint
Flags:
--staged, -S only lint git staged files [boolean] [default: false]
--prettier, -p format code with prettier [boolean] [default: false]
--eslint, -e enable lint javascript [boolean] [default: false]
--fix, -f fix all eslint and stylelint auto-fixable problems [boolean] [default: false]
--format, -F output format of console [string] [default: stylish]
--cwd, -c current working directory [default: process.cwd()]
问题解决
常见问题
Q: 有没有配置文件
A: fishx lint
默认会读取工程根目录下的默认配置文件,如果配置文件不存在,会自动生成 .eslintrc
、.prettierrc
和 .editorconfig
配置文件。
默认的配置文件如下:
-
.eslintrc.js
module.exports = { extends: '@whalecloud/eslint-config', }
-
.prettierrc
{ "singleQuote": true, "trailingComma": "all", "printWidth": 150, "overrides": [ { "files": ".prettierrc", "options": { "parser": "json" } } ] }
-
.editorconfig
# http://editorconfig.org root = true [*] indent_style = space indent_size = 2 end_of_line = lf charset = utf-8 trim_trailing_whitespace = true insert_final_newline = true [*.md] trim_trailing_whitespace = false [Makefile] indent_style = tab
如何创建自己的CI/CD检测流程
-
进入ZCM(10.45.80.26/portal)并登陆,点击有上角菜单——>开发中心——>持续构建,如下图:
-
进入持续构建页面后点击新建构建,进入新建页面如下图,配置自己的代码归属,在语言模板处选择Java+Js,最后选择要构建的的镜像,点击next
-
在以下页面选择产品模块,如果没有找到需要的产品则需要创建产品,完成后点击next进行下一步
-
在该页面打开“是否需要代码分析选项”,之后一直点击next到最后一步点击create
-
在如下界面中的点击“代码下载”选项配置代码下载的类型、路径、用户名、密码和要下载的分支,配置完成后点击“save"保存即创建完成
-
配置例外文件并打开es6检测配置项,首先需要在项目的CI_Config目录下创建.eslintignore文件,其写法参见“配置忽略检测文件”部分,然后在如下界面中的点击“代码分析”选项,将其中例外路径配置为CI_Config文件的路径,如果不填默认CI_Config在项目的根目录下,并且打开es6检测配置项,完成后点击“save"保存即创建完成,下面以ngportal为例进行配置:
- 首先进入ngportal的根目录下的CI_Config目录下创建.eslintignore文件。
-
找到创建的流程点击构建,等待流程构建完毕,在下方找到对应的检测结果,点击即可查看,如下图:
IDE工具配置
Visual Studio Code (简称 VSCode / VSC) 是一款免费开源的现代化轻量级代码编辑器,软件跨平台支持 Win、Mac 以及 Linux,运行流畅,并且为我们提供了丰富的扩展工具,推荐使用它作为我们前端开发的工具,接下来我们将介绍如何在VSCode内配置实时检测和一键格式化的功能。
-
实时检测功能配置步骤:
- 首先需要进入命令行工具(cmd)全局安装
fish
的eslint
规则包,使用如下命令:
$ npm i -g @whalecloud/eslint-config eslint@5.16.0 --registry http://registry.npm.ztesoft.com
- 首先需要进入命令行工具(cmd)全局安装
-
一键格式化功能配置:
-
温馨提示:以上工具的使用需要在项目的根目录中有
.eslintrc.js
和.prettierrc
文件,如果使用fish-cli创建的项目中都会自动生成这两个文件,当然如果你已经按照上面的工具安装了fish-cli并且使用的fish es6lint
命令对项目进行了检测,这时也会在你相应的目录中生成这两个文件,具体文件内容如下,请确保你的文件与此相同:
注意事项
- fishx cli es6检测多层目录每层都有eslintrc.js文件时不优先读取执行命令的目录下的配置文件而是找根目录下的配置文件,导致检测出错,需要补充root:true选项即可修复