inlint v0.3.3
InLint
InLint 是《印嘉科技前端规范》的配套 Lint 工具,可以为项目一键接入规范、一键扫描和修复规范问题,保障项目的编码规范和代码质量。
背景
我们引入了多个业界流行的 Linter 作为《印嘉科技前端规范》的配套,并根据规范内容定制了规则包,它们包括:
| 规范 | Lint 工具 | 规则包 |
|---|---|---|
| 《JavaScript 编码规范》 《TypeScript 编码规范》 《Node.js 开发规范》 | ESLint | eslint-config-inplus |
| 《CSS 编码规范》 | stylelint | stylelint-config-inplus |
| 《Git 规范》 | commitlint | commitlint-config-inplus |
可以看到这些 Linter 和规则包众多且零散,全部安装它们会给项目增加十几个依赖,接入和升级成本都比较高。
InLint 收敛屏蔽了这些依赖和配置细节,提供简单的 CLI 和 Node.js API,让项目能够一键接入、一键扫描、一键修复、一键升级,并为项目配置 git commit 卡口,降低项目接入规范的成本。
CLI 使用
安装
在终端执行:
npm install inlint -g安装完成后,可执行 inlint -h 以验证安装成功。
使用
inlint init:一键接入
在项目根目录执行 inlint init,即可一键接入规范,为项目安装规范 Lint 所需的依赖和配置。

具体会做以下事情:
- 安装各种依赖:包括 Linter 依赖,如 ESLint、stylelint、commitlint等;配置依赖,如 eslint-config-inplus、stylelint-config-inplus、commitlint-config-inplus等
- 写入各种配置文件,包括:
.eslintrc.js、.eslintignore:ESLint 配置(继承 eslint-config-inplus)及黑名单文件.stylelintrc.js、.stylelintignore:stylelint 配置(继承 stylelint-config-inplus)及黑名单文件commitlint.config.js:commitlint 配置(继承 commitlint-config-inplus).prettierrc.js:符合规范的 Prettier 配置.editorconfig:符合规范的 editorconfig.vscode/extensions.json:写入规范相关的 VSCode 插件推荐,包括 ESLint、stylelint、prettier 等.vscode/settings.json:写入规范相关的 VSCode 设置,设置 ESLint 和 stylelint 插件的 validate 及保存时自动运行 fix,如果选择使用 Prettier,会同时将 prettier-vscode 插件设置为各前端语言的 defaultFormatter,并配置保存时自动格式化inlint.config.js:inlint 包的一些配置,如启用的功能等
- 配置 git commit 卡口:使用 husky 设置代码提交卡口,在 git commit 时会运行
commitlint和inlint commit-file-scan对提交文件和提交信息进行规范检查。inlint commit-file-scan默认仅对 error 问题卡口,如果你想对 warn 问题也卡口,可以增加--strict参数以开启严格模式
注 1:如果项目已经配置过 ESLint、stylelint 等 Linter,执行
inlint init将会提示存在冲突的依赖和配置,并在得到确认后进行覆盖:注 2:如果项目的 .vscode/ 目录被 .gitignore 忽略,可以在拉取项目后单独执行
inlint init --vscode命令写入.vscode/extensions.json和.vscode/settings.json配置文件
inlint scan:一键扫描
在项目的根目录执行命令,即可扫描项目的规范问题:

支持下列参数:
-q--quiet仅报告 error 级别的问题-o--output-report输出扫描出的规范问题日志-i--include <dirpath>指定要进行规范扫描的目录--no-ignore忽略 eslint 的 ignore 配置文件和 ignore 规则
注 1:事实上,你可以在任意目录执行
inlint scan,inlint 会根据文件类型、JSON 等特征嗅探项目类型。但我们还是推荐在执行过inlint init的项目根目录执行inlint scan,以得到最准确的扫描结果。注 2:inlint 会根据项目内有无 eslint 和 stylelint 配置文件判断使用项目的配置文件还是 inlint 默认配置进行扫描。若使用项目的,在未安装依赖时会帮其安装(执行 npm i)。若使用项目配置扫描失败,则使用默认配置扫描
inlint fix:一键修复
在项目的根目录执行命令,即可修复部分规范问题:

支持下列参数:
-i--include <dirpath>指定要进行修复扫描的目录--no-ignore忽略 eslint 的 ignore 配置文件和 ignore 规则
注意请 review 下修复前后的代码,以免工具误修的情况。
Node.js API 使用
安装
npm install inlint --saveAPI
init:初始化
- inlint.init(config):将项目一键接入规约,效果等同于
inlint init
示例:
await inlint.init({
eslintType: 'vue',
enableESLint: true,
enableStylelint: true,
enablePrettier: true,
disableNpmInstall: false,
})config 参数如下:
| 参数 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| cwd | string | - | 项目绝对路径 |
| eslintType | ESLintType | - | 语言和框架类型,如果不配置,等同于 inlint init,控制台会出现选择器,如果配置,控制台就不会出现选择器 |
| enableESLint | boolean | true | 是否启用 ESLint,如果不配置默认值为 true,即默认启用 ESLint |
| enableStylelint | boolean | - | 是否启用 stylelint,如果不配置,等同于 inlint init,控制台会出现选择器,如果配置,控制台就不会出现选择器 |
| enablePrettier | boolean | - | 是否启用 Prettier |
| disableNpmInstall | boolean | false | 是否禁用自动在初始化完成后安装依赖 |
ESLintType
index: JavaScript 项目(未使用 Vue 和 React 的 JS 项目)vue: JavaScript + Vue 项目vue3: JavaScript + Vue3 项目react: JavaScript + React 项目node: Node.js 项目typescript/index: TypeScript 项目(未使用 Vue 和 React 的 TS 项目)typescript/vue: TypeScript + Vue 项目typescript/vue3: TypeScript + Vue3 项目typescript/react: TypeScript + React 项目typescript/node: TypeScript + Node 项目es5: ES5 及之前版本的 JavaScript 老项目
scan:扫描
- inlint.scan(config): 扫描当前项目代码,效果等同
inlint scan
示例:
await inlint.scan({
cwd: path.resolve(__dirname, '../fe'),
include: '.',
fix: false,
quiet: false,
outputReport: false,
})| 参数 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| cwd | string | - | 项目绝对路径 |
| include | string | cwd | 指定要进行规约扫描的目录 |
| quiet | boolean | false | 仅报告错误信息 |
| fix | boolean | false | 是否自动修复扫描到问题 |
| outputReport | boolean | false | 输出扫描出的规约问题日志 |
| config | Config | - | 指定要运行的 linter,优先级高于 inlint.config.js,不传该参数则默认读取 inlint.config.js 作为 config |
配置
inlint 基于一份配置进行扫描(但你也可以零配置使用),支持的配置参数有:
| 参数 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| enableESLint | boolean | true | 是否启用 ESLint |
| enableStylelint | boolean | true | 是否启用 stylelint |
| enablePrettier | boolean | - | 是否启用 Prettier |
| eslintOptions | ESLint.Options | - | ESLint 配置项,若未设置将使用执行目录下或内置的默认 eslintrc 和 eslintignore 进行扫描 |
| stylelintOptions | stylelint.LinterOptions | - | stylelint 配置项,若未设置将使用执行目录下或内置的默认 stylelintrc 和 stylelintignore 进行扫描 |
inlint 会读取执行目录下的 inlint.config.js 作为配置文件。inlint init 会在执行目录下新增如下的 inlint.config.js 文件:
module.exports = {
enableESLint: true,
enableStylelint: true,
enablePrettier: true,
}2 years ago
2 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
