前言
在前端开发中，代码规范是非常重要的一环。而 stylelint 是一个非常流行的 CSS 代码规范检查工具。而在使用 stylelint 时，我们可以通过使用预设配置来方便自己的规范代码风格。今天我们要介绍的是一个 npm 包 - stylelint-config-hostelworld，它是 hostelworld 在自己的项目中使用的 stylelint 预设配置，并已经在开源社区中发布。那么如何使用这个 npm 包呢？让我们一起来看看吧。
安装
使用 npm 安装 stylelint-config-hostelworld：
npm install stylelint-config-hostelworld --save-dev
使用
安装完毕后，我们需要在 stylelint 的配置文件中使用 stylelint-config-hostelworld 预设。首先在项目的根目录下新建一个 .stylelintrc 文件。
然后在 .stylelintrc 文件中配置 extends 属性：
{
"extends": "stylelint-config-hostelworld"
}这样我们就成功将 stylelint-config-hostelworld 预设引入到我们的项目中了。接下来，当我们使用 stylelint 来对代码规范进行检查时，就会使用这个预设。
规则
stylelint-config-hostelworld 预设配置了一些常见的规则，旨在提高 CSS 代码质量和可维护性。下面简单介绍一些常见的规则。
indentation
这个规则用于检查代码缩进是否正确。示例代码：
-- -------------------- ---- ------- -- ---- -- --------- - ------ ---- - -- --- -- --------- - ------ ---- -
declaration-block-single-line-max-declarations
这个规则用于检查单行声明块内的最大属性数量。示例代码：
-- -------------------- ---- ------- -- ---- -- --------- - ------ ---- - -- --- -- --------- - ------ ---- ----------------- ------- ------- --- ----- ----- ---------- ----- -
declaration-property-value-disallowed-list
这个规则用于检查禁用的属性和属性值。示例代码：
/* Good */
.selector { color: red; }
/* Bad */
.selector {
background-color: transparent;
}selector-max-id
这个规则用于检查选择器中 id 的数量。示例代码：
/* Good */
#selector { color: red; }
/* Bad */
#selector1#selector2 { color: red; }at-rule-no-unknown
这个规则用于检查未知的 at 规则。示例代码：
/* Good */
@charset "UTF-8";
/* Bad */
@font-face {
font-family: 'Font';
src: url('font.ttf');
}以上为一些规则的例子，stylelint-config-hostelworld 中还包含其他规则，可以进一步了解。
结论
以上就是 stylelint-config-hostelworld 的使用介绍，它可以帮助我们在项目中使用较为科学的 CSS 规范，提高代码质量和可维护性。我们可以通过学习和应用这个 npm 包，让自己的代码更加专业和优秀。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60056b2a81e8991b448e53d1