@whalecloud/eslint-config

v0.0.40-beta.11

Published

2 years ago

A set of default eslint configurations, ZTEsoft es6 & react eslint style.

0High
0Medium
0Low

whalecloud-developer

eslint

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文件。
- 在.eslintignore文件中通过首先忽略检测所有文件，然后指定要检测的文件目录的形式达到指定检测特定目录的代码的效果，注意*.js的写法，一定要告诉检测工具你需要检测的是这个目录下的所有js文件，否则你的设置可能失效。
- 由于我们按照CICD的默认设置将CI_Config目录创建在了项目的根目录下，所以在下图中的例外路径这里我们可以默认不填，如果没有将CI_Config目录按照约定设置在根目录下则需要在此重新设置路径，并且打开es6检测配置项
找到创建的流程点击构建，等待流程构建完毕，在下方找到对应的检测结果，点击即可查看，如下图：

IDE工具配置

Visual Studio Code (简称 VSCode / VSC) 是一款免费开源的现代化轻量级代码编辑器，软件跨平台支持 Win、Mac 以及 Linux，运行流畅，并且为我们提供了丰富的扩展工具，推荐使用它作为我们前端开发的工具，接下来我们将介绍如何在VSCode内配置实时检测和一键格式化的功能。

实时检测功能配置步骤：
1. 首先需要进入命令行工具（cmd）全局安装fish的eslint规则包，使用如下命令：
```
    $ npm i -g @whalecloud/eslint-config [email protected] --registry http://registry.npm.ztesoft.com
```
1. 使用VSCode打开项目，点击VSCode右侧工具栏中的扩展选项，搜索eslint，点击安装
2. 安装完成后重新打开VSCode即可在编写js代码时实时检测不符合规范的写法，并给出标红提示
一键格式化功能配置：
1. 使用VSCode打开项目，点击VSCode右侧工具栏中的扩展选项，搜索prettier，点击安装
2. 重新打开项目找到需要格式化的文件，右键选择格式化文档（快捷键：Shift+Alt+F)，即可一键解决代码中的空格、逗号、引号、单行长度等格式问题
温馨提示：以上工具的使用需要在项目的根目录中有.eslintrc.js和.prettierrc文件，如果使用fish-cli创建的项目中都会自动生成这两个文件，当然如果你已经按照上面的工具安装了fish-cli并且使用的fish es6lint命令对项目进行了检测，这时也会在你相应的目录中生成这两个文件，具体文件内容如下，请确保你的文件与此相同：