❤
npm
Sign UpSign In

@byvue/lint-check

0.0.2 • Public • Published

@byvue/lint-check

支持 vue2、vue3 项目进行 eslint 和 stylelint 代码检查及其相关操作

  1. 支持自动修复（借助 eslint 和 stylelint 自动修复功能）

  2. 支持将代码检查结果输出为 json/html/pdf

  3. 支持输出结果以文件路径为维度统计或者以问题类型为维度统计

  4. 支持自定义检查规则

  5. 支持给项目添加 eslint、stylelint 检查功能，并在提交 git 前进行检查，如果检查失败则不允许提交

Warn

  1. 仅支持 vue2 与 vue3

  2. css 预处理器只内置了 less

  3. 未对 ts 进行兼容

Install

npm i @byvue/lint-check -g

Usage

在需要操作的项目根目录下执行相关命令

可以使用 npx @byvue/lint-check help 查看相关命令，npx @byvue/lint-check help 命令 查看相关命令的参数

可以使用 npx @byvue/lint-check 命令 参数 执行相关逻辑，命令及其参数列表如下

  init [options]    初始化插件运行配置
      --override  将默认配置文件覆盖到当前目录
      --project   给项目添加 lint 配置，可选值 vue2 | vue3
  report [options]  生成报告
      --eslint     只对 eslint 检查并生成报告
      --stylelint  只对 stylelint 检查并生成报告
      --by-type    以问题类别为维度统计数据
      --to-json    以 json 格式输出问题
  lint [options]    执行lint检查
      --eslint     只使用 eslint 检查
      --stylelint  只使用 stylelint 检查
      --fix        是否开启自动修复模式

初始化

项目添加 lint 功能
  1. pacakge.json 添加了 eslint、stylelint 相关检查的快捷指令，安装相关依赖
    1. yarn lint 进行eslint 检查
    2. yarn lint:fix 进行eslint 检查并自动修复
    3. yarn css 进行stylelint 检查
    4. yarn css:fix 进行 stylelint 检查并自动修复
  2. 根目录下新增 eslint 和 stylelint 的配置文件
  3. 新增 git 提交前校验逻辑及其依赖
// 给 vue2 项目生成 lint 检查功能，并在 git 前校验
npx @byvue/lint-check init --project vue2
// 给 vue3 项目生成 lint 检查功能，并在 git 前校验，需要注意如果 vue api 是自动引入，需要项目中存在 .eslintrc-auto-import.json 文件
npx @byvue/lint-check init --project vue3
插件配置初始化

注：后面代码检查和生成报告前建议先初始化

// 初始化配置，会在执行命令的目录下生成一个 lint.config.js，方便修改后根据配置实现后续功能
npx @byvue/lint-check init
// 同上，此外还会将默认的 eslint 和 stylelint 的规则都生成出来，方便修改后根据配置实现后续功能
npx @byvue/lint-check init --override

代码检查

// 对项目代码进行 lint 检查，检查结果输出在控制台上，包括 eslint 和 stylelint
npx @byvue/lint-check lint
// 同上，不过是只针对 eslint
npx @byvue/lint-check lint --eslint
// 同上，不过是只针对 stylelint
npx @byvue/lint-check lint --stylelint

// 对项目代码进行 lint 检查，将能修复的自动修复，并将不能修复的检查结果输出在控制台上
npx lint-check lint --fix
// 同上，不过是只针对 eslint
npx @byvue/lint-check lint --eslint --fix
// 同上，不过是只针对 stylelint
npx @byvue/lint-check lint --stylelint --fix

生成报告

报告示例

生成的报告样子类似如下：html 默认打开是折叠状态，pdf 则是全部打开状态，可以看到错误类型，代码所在文件及其行号列号

案例1：问题类型为维度统计（执行命令中带有 --by-type）

  • 对 eslint 和 stylelint 分类统计
  • 以问题维度细化统计，可以看到问题规则名、问题详细说明、问题个数与级别；可以点击折叠/展开问题详情
    • 展开后是多条文件信息，每条信息上可以看到问题所在文件路径和行列号
前端代码检查报告--我是测试项目
609 problems (369 errors, 240 warnings) - 报告生成时间：2024/4/26 16:07:50

eslint                                             200 problem (200 error, 0 warnings)
[-] 【eol-last】Newline not allowed at end of file      1 Error
3:3                                                    \aaa.js
stylelint                                          409 problem (169 error, 240 warnings)
[+] 【selector-max-id】Expected "#app" to have no ...    1 Error
[-] 【prettier/prettier】Delete "␍" (prettier/prettier)  3 Error
46:2                                                    \src\ddd.vue
46:8                                                    \src\ddd.vue
46:12                                                   \src\ccc.vue

案例2：文件路径为维度统计

  • 对 eslint 和 stylelint 分类统计
  • 以文件维度细化统计，可以看到文件路径，文件问题总数；可以点击折叠/展开问题详情
    • 展开后是多条问题信息，每条问题信息上可以看到问题代码所在行号列号、问题级别、问题详细说明、问题规则
前端代码检查报告--我是测试项目
609 problems (369 errors, 240 warnings) - 报告生成时间：2024/4/26 16:07:50

eslint                                             200 problem (200 error, 0 warnings)
[-] \aaa.js                                        1 problem (1 error, 0 warnings)
3:3   Error  Newline not allowed at end of file.               eol-last
[+] \bbb.js                                        1 problem (1 error, 0 warnings)
[+] \ccc.js                                        1 problem (1 error, 0 warnings)
stylelint                                          409 problem (169 error, 240 warnings)
[-] \src\ddd.vue                                   4 problem (4 error, 0 warnings)
46:2  Error  Expected "#app" to have no ...                    selector-max-id
46:2  Error  Delete "␍" (prettier/prettier)                    prettier/prettier
46:8  Error  Delete "␍" (prettier/prettier)                    prettier/prettier
html 与 pdf
// 对项目代码进行 lint 检查，并将结果输出为 html 和 pdf
npx lint-check report
// 同上，不过是只针对 eslint
npx @byvue/lint-check report --eslint
// 同上，不过是只针对 stylelint
npx @byvue/lint-check report --stylelint
问题类型为维度统计

就是在上面的命令基础上新增 --by-type 即可

获得 json

除了 html、pdf 文件还会生成 lint.json，在上面的命令基础上新增 --to-json 即可

// 对项目代码进行 lint 检查，并将结果输出为 html 和 pdf
npx lint-check report --to-json
// 同上，不过是只针对 eslint
npx @byvue/lint-check report --eslint --to-json
// 同上，不过是只针对 stylelint
npx @byvue/lint-check report --stylelint --to-json

生成的格式如下

{
  "stylelint": [
    {
      "filePath": "\\xxxx\\index.vue",
      "messages": [
        {
          "ruleId": "color-hex-length",
          "severity": "error",
          "message": "Expected \"#FFFFFF\" to be \"#FFF\" (color-hex-length)",
          "line": 83,
          "column": 15
        }
      ],
      "errorCount": 1,
      "warningCount": 0
    }
  ],
  "eslint": [...]
}

如果有 by-type 则格式如下

{
  "stylelint": [
    {
      "ruleId": "color-hex-length",
      "severity": "error",
      "line": 83,
      "column": 15,
      "ruleMessage": "【color-hex-length-Expected】 \"#FFFFFF\" to be \"#FFF\" (color-hex-length)",
      "filePathes": [
        {
          "filePath": "\\xxx\\index.vue",
          "line": 83,
          "column": 15
        }
      ],
      "count": 1
    },
  "eslint": [...]
}

lint.config.json

可以通过 npx @vue/lint-check init [--override] 命令生成该配置文件

{
  "projectDir": "E:/xxx", # 项目根目录，取运行命令的路径
  "projectName": "police-ai", # 项目名称，init 初始化时会自动取根目录下的 package.json 下的 name
  "cmdType": "yarn", # 运行命令的工具 yarn | npm
  "outputDir": "lint-output", # 生成报告时的目录，可以是一个文件夹名，也可以是一个文件夹的绝对路径
  "codeType": "vue3", # 代码框架 vue2 | vue3
  "stylelint": { # stylelint 相关配置
    "files": "**/*.{vue,less,css}", # stylelint 检查代码匹配文件的规则
    "config": { # stylelint 配置文件中的内容，可以覆盖默认配置
      "ignoreFiles": [
        "dist/**",
        "node_modules/**"
      ]
    },
    "overridePath": ".eslintrc" # 替换默认的 stylelint 配置文件的路径，绝对路径 | 相对于 projectDir 的路径 | 空
  },
  "eslint": { # eslint 相关配置
    "files": "**/*.{js,jsx,vue}", # eslint 检查代码匹配文件的规则
    "config": { # eslint 配置文件中的内容，可以覆盖默认配置
      "ignorePatterns": [
        "node_modules",
        "dist",
        "public",
        ".husky",
        ".vscode",
        "*.d.ts"
      ]
    },
    "overridePath": "./.eslintrc" # 替换默认的 eslint 配置文件的路径，绝对路径 | 相对于 projectDir 的路径 | 空
  }
}

Question

  1. warning package-lock.json found. Your project contains lock files generated by tools other than Yarn. It is advised not to mix package managers in order to avoid resolution inconsistencies caused by unsynchronized lock files. To clear this warning, remove package-lock.json. 
    该问题可能是发生在给项目添加 lint 功能安装依赖的时候【如 npx @byvue/lint-check init --project vue3】，默认是使用 yarn 安装依赖，如果项目本身是 npm 安装依赖，根目录下已经有package-lock.json，可以修改 lint.config.json 中 cmdType 之后再次执行命令

Readme

Keywords

Package Sidebar

Install

npm i @byvue/lint-check

Weekly Downloads

1

Version

0.0.2

License

MIT

Unpacked Size

75.8 kB

Total Files

34

Last publish

Collaborators

  • webgao
  • zmm_8_4
Try on RunKit
Report malware