前言
在前端开发中,代码风格的规范和检查是非常重要的,而 stylelint 是其中一个比较流行的 CSS 代码检查工具。与此同时,GitHub 也是前端开发中常用的代码托管平台。本文将介绍一个与 stylelint 和 GitHub 结合使用的 npm 包:stylelint-formatter-github。
什么是 stylelint-formatter-github
stylelint-formatter-github 是一个 stylelint 的格式化插件,它可以将 stylelint 的输出结果转化为适合在 GitHub 上显示的格式,并且支持在 GitHub Pull Request 的评论中展示代码检查结果。
安装和使用
安装
使用 npm 安装 stylelint-formatter-github:
npm install stylelint-formatter-github --save-dev
使用
在使用 stylelint 检查 CSS 文件时,可以使用 stylelint-formatter-github 来格式化输出结果。
stylelint "**/*.css" --custom-formatter node_modules/stylelint-formatter-github
即可在终端上以 GitHub 格式输出检查结果。
如果需要将检查结果展示在 GitHub Pull Request 的评论中,还需要进行以下操作:
获取 GitHub Personal access token;
在项目根目录下创建
.github
目录,在该目录下创建CODEOWNERS
文件,并在其中添加待检查的 CSS 文件路径。
例如,在 .github/CODEOWNERS
中添加 *.css @username
表示检查项目中所有的 CSS 文件,并在评论中 @username 提醒开发人员进行代码检查。
- 在 CI/CD 中配置环境变量
GITHUB_ACCESS_TOKEN
,并将 Personal access token 值作为其值。
这样,在 CI/CD 运行时,stylelint-formatter-github 就能够将代码检查结果自动发送到 GitHub Pull Request 中,方便开发人员查看和处理。
示例代码
以下是一段使用 stylelint-formatter-github 进行代码检查并将检查结果发送到 GitHub Pull Request 中的示例代码:
-- -------------------- ---- ------- ----- -- --- ------------- ------ -------- ------------ ----- ----- -------- ------------- ------ - ----- -------- ---- ----- ------------------- - ----- --- -- ------- ----------- ----- --------------------- ----- ------------- ---- - ----- ------- ------------ ---- --- ------- - ----- --- ---- --- ---- - --- --- ---- -- - -- --- - -- ---- ---- ------- ---- -------- -- ---- - -- - ----- ------- -- ---- ------- ----- --------------------------------------- ---- ------------- --- -------------------- -- ----- -------- - ------ ---- ----- -------- --- --- ---------------------------- -- --- -------- ------ ----------- --------- ------- --- ---------- -- ----------- --- ---------- --
总结
本文介绍了 stylelint-formatter-github 的使用方法,能够方便地将 stylelint 的代码检查结果转化为适合展示在 GitHub 上的格式,并且支持在 GitHub Pull Request 的评论中进行展示,方便开发人员进行协作和代码校验。希望本文能够对大家在前端开发中进行代码规范规范的检查有所帮助。
来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/5f408b61dbf7be33b2567218