wj-fe-lint
TypeScript icon, indicating that this package has built-in type declarations

1.1.4 • Public • Published

wj-fe-lint

wj-fe-lintGopherLint 前端编码规范工程化的配套 Lint 工具,可以为项目一键接入规范、一键扫描和修复规范问题,保障项目的编码规范和代码质量。

背景

我们引入了多个业界流行的 Linter 作为《阿里巴巴前端规范》的配套,并根据规范内容定制了规则包,它们包括:

规范 Lint 工具 npm 包
JavaScript 编码规范
TypeScript 编码规范
Node 编码规范
ESLint wj-fe-eslint-config
CSS 编码规范 stylelint wj-fe-stylelint-config
Git 规范 commitlint wj-fe-commitlint-config
文档规范 markdownlint wj-fe-markdownlint-config

可以看到这些 Linter 和规则包众多且零散,全部安装它们会给项目增加十几个依赖,接入和升级成本都比较高。

wj-fe-lint 收敛屏蔽了这些依赖和配置细节,提供简单的 CLI 和 Node.js API,让项目能够一键接入、一键扫描、一键修复、一键升级,并为项目配置 git commit 卡口,降低项目接入规范的成本。

CLI 使用

安装

在终端执行:

npm install wj-fe-lint -g

安装完成后,可执行 wj-fe-lint -h 以验证安装成功。

使用

wj-fe-lint init:一键接入

在项目根目录执行 wj-fe-lint init,即可一键接入规范,为项目安装规范 Lint 所需的依赖和配置。

具体会做以下事情:

  • 安装各种依赖:包括 Linter 依赖,如 ESLintstylelintcommitlintmarkdownlint 等;配置依赖,如 wj-fe-eslint-configwj-fe-stylelint-configwj-fe-commitlint-configwj-fe-markdownlint-config
  • 写入各种配置文件,包括:
    • .eslintrc.js.eslintignore:ESLint 配置(继承 wj-fe-eslint-config)及黑名单文件
    • .stylelintrc.js.stylelintignore:stylelint 配置(继承 wj-fe-stylelint-config)及黑名单文件
    • commitlint.config.js:commitlint 配置(继承 wj-fe-commitlint-config
    • .markdownlint.json.markdownlintignoremarkdownlint 配置及黑名单文件
    • .prettierrc.js:符合规范的 Prettier 配置
    • .editorconfig:符合规范的 editorconfig
    • .vscode/extensions.json:写入规范相关的 VSCode 插件推荐,包括 ESLintstylelintmarkdownlintprettier
    • .vscode/settings.json:写入规范相关的 VSCode 设置,设置 ESLintstylelint 插件的 validate保存时自动运行 fix,如果选择使用 Prettier,会同时将 prettier-vscode 插件设置为各前端语言的 defaultFormatter,并配置保存时自动格式化
    • wj-fe-lint.config.jswj-fe-lint 包的一些配置,如启用的功能等
  • 配置 git commit 卡口:使用 husky 设置代码提交卡口,在 git commit 时会运行 wj-fe-lint commit-file-scanwj-fe-lint commit-msg-scan 分别对提交文件和提交信息进行规范检查。wj-fe-lint commit-file-scan 默认仅对 error 问题卡口,如果你想对 warn 问题也卡口,可以增加 --strict 参数以开启严格模式

注 1:如果项目已经配置过 ESLint、stylelint 等 Linter,执行 wj-fe-lint init 将会提示存在冲突的依赖和配置,并在得到确认后进行覆盖:

注 2:如果项目的 .vscode/ 目录被 .gitignore 忽略,可以在拉取项目后单独执行 wj-fe-lint init --vscode 命令写入 .vscode/extensions.json.vscode/settings.json 配置文件

wj-fe-lint scan:一键扫描

在项目的根目录执行命令,即可扫描项目的规范问题:

支持下列参数:

  • -q --quiet 仅报告 error 级别的问题
  • -o --output-report 输出扫描出的规范问题日志
  • -i --include <dirpath> 指定要进行规范扫描的目录
  • --no-ignore 忽略 eslint 的 ignore 配置文件和 ignore 规则

注 1:事实上,你可以在任意目录执行 wj-fe-lint scan wj-fe-lint 会根据文件类型、JSON 等特征嗅探项目类型。但我们还是推荐在执行过 wj-fe-lint init 的项目根目录执行 wj-fe-lint scan,以得到最准确的扫描结果。

注 2: wj-fe-lint 会根据项目内有无 eslint 和 stylelint 配置文件判断使用项目的配置文件还是 wj-fe-lint 默认配置进行扫描。若使用项目的,在未安装依赖时会帮其安装(执行 npm i)。若使用项目配置扫描失败,则使用默认配置扫描

wj-fe-lint fix:一键修复

在项目的根目录执行命令,即可修复部分规范问题:

支持下列参数:

  • -i --include <dirpath> 指定要进行修复扫描的目录
  • --no-ignore 忽略 eslint 的 ignore 配置文件和 ignore 规则

注意请 review 下修复前后的代码,以免工具误修的情况。

wj-fe-lint commit-file-scan 提交文件扫描

在 git commit 时对提交文件进行规范问题扫描,需配合 git 的 pre-commit 钩子使用。

支持下列参数:

  • -s --strict 严格模式,对 warn 和 error 问题都卡口,默认仅对 error 问题卡口

wj-fe-lint commit-msg-scan 提交信息扫描

git commit 时对 commit message 的格式进行扫描(使用 commitlint),需配合 husky 的 commit-msg 钩子使用。

Node.js API 使用

安装

npm install wj-fe-lint --save

API

init:初始化

  • wj-fe-lint.init(config):将项目一键接入规范,效果等同于 wj-fe-lint init

示例:

(await wj) -
  fe -
  lint.init({
    eslintType: 'react',
    enableESLint: true,
    enableStylelint: true,
    enableMarkdownlint: true,
    enablePrettier: true,
    disableNpmInstall: false,
  });

config 参数如下:

参数 类型 默认值 说明
cwd string - 项目绝对路径
eslintType ESLintType - 语言和框架类型,如果不配置,等同于 wj-fe-lint init,控制台会出现选择器,如果配置,控制台就不会出现选择器
enableESLint boolean true 是否启用 ESLint,如果不配置默认值为 true,即默认启用 ESLint
enableStylelint boolean - 是否启用 stylelint,如果不配置,等同于 wj-fe-lint init,控制台会出现选择器,如果配置,控制台就不会出现选择器
enableMarkdownlint boolean - 是否启用 markdownlint,如果不配置,等同于 wj-fe-lint init,控制台会出现选择器,如果配置,控制台就不会出现选择器
enablePrettier boolean - 是否启用 Prettier
disableNpmInstall boolean false 是否禁用自动在初始化完成后安装依赖
ESLintType
  • default: JavaScript 项目(未使用 React 和 Vue 的 JS 项目)
  • react: JavaScript + React 项目
  • vue: JavaScript + Vue 项目
  • typescript/default: TypeScript 项目(未使用 React 和 Vue 的 TS 项目)
  • typescript/react: TypeScript + React 项目
  • typescript/vue: TypeScript + Vue 项目
  • es5: ES5 及之前版本的 JavaScript 老项目

配置

wj-fe-lint 基于一份配置进行扫描(但你也可以零配置使用),支持的配置参数有:

参数 类型 默认值 说明
enableESLint boolean true 是否启用 ESLint
enableStylelint boolean true 是否启用 stylelint
enableMarkdownlint boolean true 是否启用 markdownlint
enablePrettier boolean - 是否启用 Prettier
eslintOptions ESLint.Options - ESLint 配置项,若未设置将使用执行目录下或内置的默认 eslintrc 和 eslintignore 进行扫描
stylelintOptions stylelint.LinterOptions - stylelint 配置项,若未设置将使用执行目录下或内置的默认 stylelintrc 和 stylelintignore 进行扫描
markdownlintOptions markdownlint.Options - markdownlint 配置项,若未设置将使用执行目录下或内置的默认 markdownlint 配置文件进行扫描

wj-fe-lint 会读取执行目录下的 wj-fe-lint.config.js 作为配置文件。wj-fe-lint init 会在执行目录下新增如下的 wj-fe-lint.config.js 文件:

module.exports = {
  enableESLint: true,
  enableStylelint: true,
  enableMarkdownlint: true,
  enablePrettier: true,
};

常见问题

TypeScript 项目扫描性能问题

如果你的 TS 项目 commit 卡口和 wj-fe-lint scan 运行时间很长,可以通过如下在 .eslintrc.js 中增加以下配置提升性能:

module.exports = {
  parserOptions: {
    project: [], // for lint performance
    createDefaultProgram: false, // for lint performance
  },
  rules: {
    '@typescript-eslint/dot-notation': 0, // for lint performance
    '@typescript-eslint/restrict-plus-operands': 0, // for lint performance
  },
};

Readme

Keywords

Package Sidebar

Install

npm i wj-fe-lint

Weekly Downloads

1

Version

1.1.4

License

ISC

Unpacked Size

140 kB

Total Files

76

Last publish

Collaborators

  • woniuya