前言
在前端开发中，很难避免 CSS 代码的存在，而一份高质量的 CSS 代码需要有一定的规范和格式。这时候我们就需要使用 stylelint 来检查 CSS 代码的规范性。
stylelint 是一个 CSS 的 Lint 工具，它会检查你的 CSS 代码是否符合预先设定的规范。而 styleint-config-twbs-bootstrap 则是 stylelint 在 Bootstrap 框架下的配置，它可以快速地帮助开发者检查 Bootstrap 项目中的 CSS 代码。
本文主要介绍如何使用 stylelint-config-twbs-bootstrap 进行 CSS 规范性检查，包括安装、配置以及使用方法。
安装
运行以下命令安装 stylelint 和 stylelint-config-twbs-bootstrap：
npm install stylelint stylelint-config-twbs-bootstrap --save-dev
配置
在项目根目录下创建 .stylelintrc.json 文件，并写入以下代码：
{
"extends": "stylelint-config-twbs-bootstrap"
}这样，就可以使用 stylelint-config-twbs-bootstrap 配置来检查项目中的 CSS 代码了。当然，你也可以根据项目需求进行配置的更改。
使用方法
样例代码如下，存储在 index.css 中：
-- -------------------- ---- ------- ---- - ------- -- -------- -- - ---------- - ---------- ------- ------- - ----- - -------- - -------- ----- ------- --- ----- ----- -
运行以下命令进行 CSS 规范性检查：
npx stylelint index.css
样例代码中，container 和 wrapper 的类名都符合 Bootstrap 容器和包装器的命名规范，而 body 的部分样式则不符合规范。运行以上命令，结果如下：
index.css 2:3 ✖ Unexpected property "margin" (declaration-property-unit-blacklist) 3:3 ✖ Unexpected property "padding" (declaration-property-unit-blacklist) ✖ 2 problems (0 errors, 2 warnings)
stylelint 检测到了 margin 和 padding 的使用不规范，并给出了警告。在实际开发中，我们会写更多的样式规则，使用 stylelint 进行检测能够避免给项目带来不必要的问题。
结论
在前端开发中，CSS 的规范性十分重要，使用 stylelint-config-twbs-bootstrap 可以帮助我们快速地检查 Bootstrap 项目中的 CSS 代码是否符合规范。本文介绍了 stylelint 配置和使用方法，希望能够帮助到你在实际开发中写出更加规范的 CSS 代码。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/162639