npm 包 @tanshio/stylelint-config 使用教程

什么是 @tanshio/stylelint-config

@tanshio/stylelint-config 是一个基于 Stylelint 的规则配置包，旨在为开发者提供一套可靠的前端代码风格规范。

此规则配置包与 Airbnb CSS/Sass Styleguide 以及 BEM 命名规则相一致，确保了代码风格的统一性和可读性。

安装和使用

在项目的根目录下通过 npm 安装 @tanshio/stylelint-config：

npm install --save-dev @tanshio/stylelint-config

在项目的 .stylelintrc.js 文件中导入并继承 @tanshio/stylelint-config：

module.exports = {
  extends: ["@tanshio/stylelint-config"],
};

此时，你的项目规则已经基于 @tanshio/stylelint-config 进行了定制。

你可以在此基础上进行二次定制：

module.exports = {
  extends: ["@tanshio/stylelint-config"],
  rules: {
    // Add or override rules here
  },
};

此规则配置包包含以下规则：

• 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-closing-brace-space-before: 在块结束标志符前指定一个或多个空格。
• block-opening-brace-newline-after: 在块开始的括号之后指定一个换行符。
• block-opening-brace-newline-before: 在块的开始括号之前指定一个换行符。
• block-opening-brace-space-after: 在块的开始括号之后指定一个或多个空格。
• block-opening-brace-space-before: 在块的开始括号之前指定一个或多个空格。
• color-hex-case: 将 16 进制颜色转换为小写。
• color-hex-length: 强制使用短符号的 16 进制颜色。
• color-no-invalid-hex: 禁止无效的 16 进制颜色。
• comment-empty-line-before: 在注释块之前，要求一个空行。
• comment-no-empty: 不允许空注释。
• 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-calc-no-unspaced-operator: 禁止未分隔操作符的计算方法。
• function-comma-newline-after: 在函数中强制换行。
• function-comma-newline-before: 强制在函数中换行符。
• function-comma-space-after: 在函数中指定一个或多个空格。
• function-comma-space-before: 在函数中指定一个空格。
• function-linear-gradient-no-nonstandard-direction: 禁止使用不支持的方向名称定义的术语的 linear-gradient()。
• function-name-case: 强制要求函数名称为小写。
• function-parentheses-newline-inside: 在函数中强制换行符。
• function-parentheses-space-inside: 强制括号内有空格。
• function-url-quotes: 在 URL 中使用引号。
• function-whitespace-after: 在函数后指定一个或多个空格。
• indentation: 强制缩进的方式。
• keyframe-declaration-no-important: 禁止在 @keyframe 块中使用 important。
• keyframes-name-pattern: 在 @keyframes 中强制使用自定义名称模式。
• length-zero-no-unit: 禁止在值为 0 时省略单位。
• 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-duplicate-selectors: 禁止选择器中的重复类。
• no-empty-source: 禁止空样式文件。
• no-eol-whitespace: 禁止行尾空格。
• no-extra-semicolons: 禁止多余的分号。
• no-invalid-double-slash-comments: 禁止无效的双斜杠注释。
• no-missing-end-of-source-newline: 禁止在 CSS 中缺少末尾的空白行。
• no-unknown-animations: 禁止未知的 keyframe 名称。
• number-leading-zero: 禁止前导零，必须为整数省略 0。
• 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-pseudo-class-case: 强制要求伪类选择器名称为小写。
• selector-pseudo-class-no-unknown: 禁止单词伪类名称，并禁止未知的伪类选择器。
• selector-pseudo-class-parentheses-space-inside: 强制伪类选择器括号内的空格。
• selector-pseudo-element-case: 强制要求伪元素选择器名称为小写。
• selector-pseudo-element-colon-notation: 强制伪元素使用双冒号符号。
• selector-pseudo-element-no-unknown: 禁止未知的伪元素选择器。
• selector-type-case: 强制要求选择器类型名称为小写。
• selector-type-no-unknown: 禁止未知的选择器类型。
• selector-max-compound-selectors: 限制选择器中的复合选择器。
• shorthand-property-no-redundant-values: 禁止属性负荷最大的简写中使用不必要的值。
• string-no-newline: 禁止在字符串中使用换行符。
• time-min-milliseconds: 限制潜在的不必要的小数位。
• unit-case: 强制要求单位名称为小写。
• unit-no-unknown: 禁止出现未知的单位。
• value-keyword-case: 强制要求值关键字名称为小写。
• value-list-comma-newline-after: 在值列表中强制使用换行符。
• value-list-comma-newline-before: 在值列表中逗号之前强制使用换行符。
• value-list-comma-space-after: 在值列表中的逗号之后指定一个或多个空格。
• value-list-comma-space-before: 在值列表中的逗号之前指定一个空格。
• value-no-vendor-prefix: 禁止使用浏览器引擎前缀。

示例代码

/* .stylelintrc.js */
module.exports = {
  extends: ["@tanshio/stylelint-config"],
  rules: {
    // Add or override rules here
  },
};

总结

使用 @tanshio/stylelint-config 可以更方便地为项目定制代码风格规范，减少代码冲突与操作成本。希望本文可以对前端开发者有所帮助。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600554df81e8991b448d212c