npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

rokid-flint

v0.1.4

Published

前端代码约束配置工具

Downloads

4

Readme

rokid-flint

rokid-flint 是前端规约 Lint 工具,可以为项目一键接入规约、一键扫描和修复规约问题,保障项目的编码规范和代码质量。

背景

引入了多个业界流行的 Linter 作为规约配套,并根据规约内容定制了规则包,它们包括:

| 规约 | Lint 工具 | 规则包 | | -------- | -------- | -------- | | 《JavaScript 编码规约》 《TypeScript 编码规约》 《React 编码规约》 《Node.js 开发规约》 | ESLint | eslint-config-airbnb | | 《CSS 编码规约》 | stylelint | stylelint-config-standard | | 《Git 规约》 | commitlint

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

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

CLI 使用

安装

在终端执行:

npm install rokid-flint -g

安装完成后,可执行 rokid-flint -h 以验证安装成功。

使用

rokid-flint init:一键接入

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

rokid-flint init

具体会做以下事情:

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

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

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

rokid-flint scan:一键扫描

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

rokid-flint scan

支持下列参数:

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

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

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

rokid-flint fix:一键修复

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

rokid-flint fix

支持下列参数:

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

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

rokid-flint commit-file-scan 提交文件扫描

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

支持下列参数:

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

rokid-flint commit-msg-scan 提交信息扫描

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