在前端开发中,markdown 已经成为常见的文档格式,不仅仅可以用于编写技术文档,也可以在开发过程中起到记录和沟通的作用。
但是,写 markdown 远远不够,我们还需要对其进行规范化、自动化的 lint 检查。这时,一个好的工具就变得尤为重要了。
remark-preset-lint-crowdstrike 是一个专门为 markdown 文件提供 lint 规范的 npm 包,下面,本文将介绍 remark-preset-lint-crowdstrike 的使用教程,帮助大家在自己的项目中使用和配置该工具。
安装和配置
使用 remark-preset-lint-crowdstrike 的第一步,就是要进行安装和配置。
安装 remark-preset-lint-crowdstrike
npm install --save-dev remark-cli remark-preset-lint-crowdstrike
配置 .remarkrc 文件
在项目的根目录下创建 .remarkrc 文件,并配置以下内容:
-- -------------------- ---- ------- - ---------- - - ------- - --------- -------------------------------- - - - -
展开代码
配置完成后,我们就可以使用 remark-preset-lint-crowdstrike 对 markdown 文件进行 lint 检查了。
规范约束
remark-preset-lint-crowdstrike 针对 markdown 文件的 lint 规范主要包括以下方面:
- 文件头部使用 YAML 格式注明标题、日期、作者等信息。
- markdown 标题层次结构不得超过 3 级。
- markdown 代码块需要注明语言类型。
- markdown 列表项不得包含多个段落。
- markdown 中引用图片链接需要添加 alt 文本。
除此之外,remark-preset-lint-crowdstrike 还包含了一些其他的约束规范,帮助我们提高 markdown 文件的规范化程度。
示例
在结束之前,我们来看一个 remark-preset-lint-crowdstrike 的使用示例。
假设我们有一篇 markdown 文件 test.md,内容如下:
-- -------------------- ---- ------- --- ------ ---- ----- ---------- ------- --- --- - --- -- --- ----------------展开代码
console.log('Hello, world!')
-- -------------------- ---- ------- -------- ------------------------ - ---- --------- - ---- ------------- - ------展开代码
然后,在命令行终端执行以下命令,即可使用 remark-preset-lint-crowdstrike 对该文件进行 lint 检查:
remark test.md
执行结果如下:
test.md 9:6-9:12 warning Missing language identifier in fenced code block remark/remark-lint 13:2-13:32 warning Image reference URLs should have an alt text prefix remark/remark-lint 17:3-17:45 warning List items should not contain multiple paragraphs remark/remark-lint ⚠ 3 warnings
可以看到,该文件中包含了 3 处不符合规范的地方,分别是第 9 行的代码块缺乏语言类型,第 13 行的图片引用没有添加 alt 文本,以及第 17 行的列表项包含了多个段落。
我们根据以上提示,修改这些不符合规范的地方,修改后的文件如下:
-- -------------------- ---- ------- --- ------ ---- ----- ---------- ------- --- --- - --- -- --- ----- ---------- ---- ----- ------------------- --------展开代码
这里是一张图片:
列表项1
这里只包含一个段落。
列表项2
引用一下别的地方说过的话:
这是一句话。
然后,再次运行 lint 检查:
remark test.md
此时,我们可以得到如下结果:
test.md
✓ No issues found
-- -------------------- ---- ------- ------------- ------------------------------ - -------- ----- ---- --------------- -- -- ----- --- - ------------------------------ -------------------------------- --------- ------------------------------------- -------- ---------------------------------------------------------------------- - ------------------------------------------------------------ -------- ------------------------------------------------------------------------------------展开代码