npm 包 stylelint-config-dev 使用教程-JavaScript中文网-JavaScript教程资源分享门户

在前端开发中，编写规范的 CSS 是非常重要的一个环节。而在编写 CSS 的过程中，统一的规范也非常重要。stylelint-config-dev 是一个 npm 包，可以帮助你快速配置 stylelint，使其符合常用的 CSS 规范。

安装

stylelint-config-dev 是一个 npm 包，可以通过 npm 命令安装：

--- ------- --------------------

使用

安装好 stylelint-config-dev 后，在项目中运行以下命令来生成 stylelint 配置文件：

--- --------- ------

生成配置文件后，按照提示进行选择即可。在选择 extends 时，选择 stylelint-config-dev 即可。

以下是一个示例的配置文件：

-------------- - -
  -------- -
    ----------------------------
    ------------------------------------
    ----------------------
  -
-

配置说明

stylelint-config-dev 模块集成了一些比较流行的 stylelint 配置，如 stylelint-config-standard 和 stylelint-config-recommended-scss，具体如下：

stylelint-config-standard

该配置包含了来自 stylelint-config-recommended 和 stylelint-config-css-modules 的规则，并且还加入了自定义的规则。其中有以下规则：

at-rule-empty-line-before: 在 at 规则之前要求或禁止空行。
at-rule-name-case: 指定 at 规则名称的大小写。
at-rule-name-space-after: 在 at 规则的名称后指定运算符后必须有一个或多个空格。
block-closing-brace-empty-line-before: 在块封装括号关闭之前需要或不允许空行。
block-closing-brace-newline-after: 在块封装括号关闭后需换行。
block-closing-brace-newline-before: 在块封装括号关闭之前会强制进行换行。
block-closing-brace-space-after: 在块封装括号的结束括号后需要一个或多个空格。
block-no-empty: 禁止空块。
block-opening-brace-newline-after: 在块封装括号打开后需要换行。
block-opening-brace-space-before: 在块封装括号打开前需要一个或多个空格。
color-hex-case: 指定十六进制颜色的大小写。
color-hex-length: 指定十六进制颜色是否使用缩写。
color-named: 要求（或禁止）命名的颜色值。
comment-empty-line-before: 评论之前需要空行。
comment-whitespace-inside: 注释分隔符内必须有一个空格。
custom-property-empty-line-before: 在自定义属性规则之前需要或不允许空行。
declaration-bang-space-after: 在有感叹号的声明之后指定一个或多个空格。
declaration-bang-space-before: 在有感叹号的声明之前指定一个或多个空格。
declaration-block-no-duplicate-properties: 在声明块中，禁止重复属性。
declaration-block-no-shorthand-property-overrides: 禁止缩写属性覆盖相关声明块中的其他声明。
declaration-block-semicolon-newline-after: 在语句块的分号后换行。（重要）
declaration-block-semicolon-newline-before: 在语句块的分号之前换行。（重要）
declaration-block-semicolon-space-after: 在语句块的分号后指定一个或多个空格。
declaration-block-semicolon-space-before: 在语句块的分号之前指定一个或多个空格。
declaration-block-single-line-max-declarations: 指定每行声明的最大数量。
declaration-block-trailing-semicolon: 在最后一个声明块之后需要或不允许拖尾分号。
declaration-colon-newline-after: 在声明的冒号后进行换行。
declaration-colon-space-after: 在声明的冒号后指定一个或多个空格。
declaration-colon-space-before: 在声明的冒号之前指定一个或多个空格。
declaration-empty-line-before: 在声明规则前需要或禁止空行。（重要）
font-family-name-quotes: 指定字体族名称是否需要用引号括起来。
function-comma-newline-after: 函数列表逗号之后在新行中需要或不需要换行。
function-comma-newline-before: 函数列表逗号之前需要或不需要换行。
function-comma-space-after: 在逗号后指定一个或多个空格。
function-comma-space-before: 在逗号之前指定一个或多个空格。
function-max-empty-lines: 指定函数适当的空行数量。
function-name-case: 指定函数名称的大小写。（重要）
function-parentheses-newline-inside: 指定函数括号内部换行。
function-parentheses-space-inside: 在函数的括号中指定一个或多个空格。
function-whitespace-after: 函数名称之后必须有一个或多个空格。
indentation: 指定缩进。（重要）
length-zero-no-unit: 禁止将零长度转换为其他单位。
max-empty-lines: 指定适当的最大空行数。
media-feature-colon-space-after: 指定执行媒体特征的冒号后的一个或多个空格。
media-feature-colon-space-before: 在执行媒体特征的冒号前指定一个或多个空格。
media-feature-name-case: 指定媒体特征名称的大小写。
media-feature-name-no-unknown: 禁止未知的媒体特征名称。
media-feature-name-no-vendor-prefix: 禁止使用带厂商前缀的媒体特征名称。
media-feature-parentheses-space-inside: 指定媒体特征括号内部的一个或多个空格。
media-feature-range-operator-space-after: 在介于媒体特征的范围中使用的操作符后面指定一个或多个空格。
media-feature-range-operator-space-before: 在介于媒体特征的范围中使用的操作符前指定一个或多个空格。
media-query-list-comma-newline-after: 在媒体查询列表中的逗号后在新行中需要或不需要换行。
media-query-list-comma-newline-before: 在媒体查询列表中的逗号之前需要或不需要换行。
media-query-list-comma-space-after: 在媒体查询列表中的逗号后指定一个或多个空格。
media-query-list-comma-space-before: 在媒体查询列表中的逗号之前指定一个或多个空格。
no-descending-specificity: 禁止具有较低特定性的选择器覆盖具有较高特定性的选择器。（重要）
no-duplicate-at-import-rules: 不允许在样式表中出现重复的 @import 规则。
no-duplicate-selectors: 在规则范围内禁止重复选择器。（重要）
no-empty-source: 禁止样式表为空。
no-eol-whitespace: 禁止行尾空格。
no-extra-semicolons: 禁止在声明块内使用多余的分号。
no-invalid-double-slash-comments: 禁止无效的单斜线注释。（重要）
no-missing-end-of-source-newline: 禁止结尾没有空行。（重要）
no-unknown-animations: 禁止未知的动画名称。
number-leading-zero: 要求或禁止小数点前的零。
number-no-trailing-zeros: 禁止数字中的拖尾零。
property-case: 指定属性名称的大小写。
property-no-unknown: 禁止未知的属性名称。
property-no-vendor-prefix: 禁止使用带厂商前缀的属性名称。
rule-empty-line-before: 在规则之前需要或禁止空行。（重要）
selector-attribute-brackets-space-inside: 在属性选择器中的括号内部指定一个或多个空格。
selector-attribute-operator-space-after: 在属性选择器中的运算符后面指定一个或多个空格。
selector-attribute-operator-space-before: 在属性选择器中的运算符前指定一个或多个空格。
selector-combinator-space-after: 在组合器之后需指定一个或多个空格。
selector-combinator-space-before: 在组合器之前需指定一个或多个空格。
selector-descendant-combinator-no-non-space: 在选择器中禁止容器选择器和后代组合器周围的换行符。
selector-max-id: 指定选择器中 ID 选择器的最大数量。
selector-no-qualifying-type: 禁止使用限定类型选择器。
selector-pseudo-class-case: 指定伪类名称的大小写。
selector-pseudo-class-no-unknown: 禁止未知的伪类选择器。
selector-pseudo-element-case: 指定伪元素名称的大小写。
selector-pseudo-element-colon-notation: 指定伪元素的表示法。
selector-pseudo-element-no-unknown: 禁止未知的伪元素选择器。
selector-type-case: 指定类型选择器的大小写。
selector-type-no-unknown: 禁止未知的类型选择器。
shorthand-property-no-redundant-values: 禁止在简写属性中使用冗余值。
string-quotes: 指定字符串使用引号。
unit-case: 指定单位的大小写。
value-keyword-case: 指定值关键词的大小写。
value-list-comma-newline-after: 声明中的逗号之后必须换行。
value-list-comma-newline-before: 声明中的逗号之前必须换行。
value-list-comma-space-after: 在关键字之后，值列表中的逗号之后必须有空格。
value-list-comma-space-before: 在关键字之前，值列表中的逗号之前必须有空格。
value-list-max-empty-lines: 声明中的值列表中可以有的最大行数。
value-no-vendor-prefix: 禁止使用带厂商前缀的值。

stylelint-config-recommended-scss

该配置包含了一些针对 SCSS 的规则，并且还加入了自定义的规则。其中有以下规则：

at-rule-no-unknown: 禁止未知的 at 规则。
scss/at-extend-no-missing-placeholder: 禁止使用缺少的占位符选择器扩展。
scss/at-function-pattern: 为自定义 SCSS 函数强制使用模式。
scss/at-import-no-partial-leading-underscore: 禁止使用下划线开头的文件作为导入文件的文件名。
scss/at-import-partial-extension-blacklist: 禁止在导入的文件名中指定特定的扩展名。
scss/at-mixin-argumentless-call-parentheses: 禁止在无参数混合的函数调用中使用括号。
scss/at-mixin-pattern: 为自定义 SCSS 混合强制使用模式。
scss/comment-no-empty: 禁止空注释。
scss/declaration-nested-properties: 禁止在声明中使用套嵌属性。
scss/dimension-no-non-numeric-values: 禁止在在维度值（长度、角度、时间或频率）之前使用非数值。
scss/function-color-relative: 禁止颜色函数参数使用与其值无关的相对值。
scss/function-quote-no-quoted-strings-inside: 禁止在引号内使用引号。
scss/function-unquote-no-unquoted-strings-inside: 禁止在未引用字符串内使用未引用字符串。
scss/map-keys-quotes: 要求 SCSS 映射键使用引号。
scss/media-feature-value-dollar-variable: 指定媒体功能的值必须使用变量。
scss/operator-no-unspaced: 禁止在括号和操作符之间的运算符周围使用空格。
scss/selector-no-redundant-nesting-selector: 禁止在嵌套选择器中使用冗余的选择器。
scss/selector-no-union-class-name: 禁止使用交集（&）运算符链接几个类名。

stylelint-config-dev

该配置包含了一些个人开发的规则，用于限制 CSS 代码规范。其中有以下规则：

dev/no-important: 禁止使用 important。
dev/no-negative-value: 禁止使用带负数值的属性。
dev/no-unused-class: 禁止出现未使用的类。
dev/no-useless-box-sizing: 禁止在 box-sizing 中使用 border-box 计算式。
dev/reduce-z-index: 限制 z-index 的嵌套深度。
dev/scale-unit: 强制使用 rem 单位。

结语

stylelint-config-dev 可以帮助我们遵循一套通用的 CSS 规范，将 CSS 写的更加优美。在实际的开发中，可以根据项目需求进行灵活的配置。但是，我们在使用样式检测工具时，不仅仅需要遵循规范，还需要注重代码的可读性和 maintainability。

来源：JavaScript中文网，转载请联系管理员！本文地址：https://www.javascriptcn.com/post/5eedc830b5cbfe1ea06122e0