SCSS 规则
// stylelint.config.js
module.exports = {
extends: [
'stylelint-config-twbs-bootstrap',
],
};
注意
stylelint 规则参考 stylelint-config-twbs-bootstrap，但是由于需要整理的内容非常多，在开发过程中，仍以实际的 stylelint 检查为准。本章内容仅供参考
规则一览
提示
SCSS 的 stylelint 规则继承于 CSS 规则
危险
使用 .scss 语法，永远不要使用原始的 .sass 语法！
| 来源 | 规则名称 | 配置值 | 描述 |
|---|---|---|---|
| stylelint-config-recommended-scss | annotation-no-unknown | null | 禁止未知的注解 |
| stylelint-config-recommended-scss | at-rule-no-unknown | null | 禁止未知的 at 规则 |
| stylelint-config-recommended-scss | comment-no-empty | null | 禁止空注释 |
| stylelint-config-recommended-scss | function-no-unknown | null | 禁止未知的函数 |
| stylelint-config-recommended-scss | media-query-no-invalid | null | 禁止无效的媒体查询 |
| stylelint-config-recommended-scss | scss/at-rule-no-unknown | true | 禁止未知的 SCSS at 规则 |
| stylelint-config-recommended-scss | scss/declaration-nested-properties-no-divided-groups | true | 禁止嵌套属性被分成多个组 |
| stylelint-config-recommended-scss | scss/dollar-variable-no-missing-interpolation | true | 禁止缺少插值的美元变量 |
| stylelint-config-recommended-scss | scss/function-unquote-no-unquoted-strings-inside | true | 在 unquote 函数中禁止未引号的字符串 inside |
| stylelint-config-recommended-scss | scss/load-no-partial-leading-underscore | true | 禁止加载带有前导下划线的部分文件 |
| stylelint-config-recommended-scss | scss/load-partial-extension | 'never' | 禁止部分文件扩展名 |
| stylelint-config-recommended-scss | scss/no-duplicate-mixins | true | 禁止重复的 mixin |
| stylelint-config-recommended-scss | scss/operator-no-newline-after | true | 禁止操作符后换行 |
| stylelint-config-recommended-scss | scss/operator-no-newline-before | true | 禁止操作符前换行 |
| stylelint-config-recommended-scss | scss/operator-no-unspaced | true | 禁止操作符没有空格 |
| stylelint-config-standard-scss | at-rule-empty-line-before | ["always", {"except": ["blockless-after-blockless", "first-nested"], "ignore": ["after-comment"], "ignoreAtRules": ["else"]}] | at 规则前需要空行 |
| stylelint-config-standard-scss | import-notation | 'string' | 导入 notation 使用字符串 |
| stylelint-config-standard-scss | scss/at-else-closing-brace-newline-after | 'always-last-in-chain' | else 关闭括号后换行 |
| stylelint-config-standard-scss | scss/at-else-closing-brace-space-after | 'always-intermediate' | else 关闭括号后空格 |
| stylelint-config-standard-scss | scss/at-else-empty-line-before | 'never' | else 前禁止空行 |
| stylelint-config-standard-scss | scss/at-else-if-parentheses-space-before | 'always' | else if 括号前空格 |
| stylelint-config-standard-scss | scss/at-function-parentheses-space-before | 'never' | 函数括号前禁止空格 |
| stylelint-config-standard-scss | scss/at-function-pattern | ["^(-?[a-z][a-z0-9]*)(-[a-z0-9]+)*$"] | 函数名称模式 |
| stylelint-config-standard-scss | scss/at-mixin-parentheses-space-before | 'never' | mixin 括号前禁止空格 |
| stylelint-config-standard-scss | scss/dollar-variable-colon-space-before | 'never' | 美元变量冒号前禁止空格 |
| stylelint-config-standard-scss | scss/dollar-variable-pattern | ["^(-?[a-z][a-z0-9]*)(-[a-z0-9]+)*$"] | 美元变量名称模式 |
| stylelint-config-standard-scss | scss/percent-placeholder-pattern | ["^(-?[a-z][a-z0-9]*)(-[a-z0-9]+)*$"] | 占位符模式 |
| stylelint-config-twbs-bootstrap | no-invalid-position-at-import-rule | null | 禁止无效位置的 @import 规则 |
| stylelint-config-twbs-bootstrap | scss/at-extend-no-missing-placeholder | null | 禁止 extend 缺少占位符 |
| stylelint-config-twbs-bootstrap | scss/at-function-named-arguments | 'never' | 禁止函数使用命名参数 |
| stylelint-config-twbs-bootstrap | scss/at-if-closing-brace-newline-after | null | if 关闭括号后换行 |
| stylelint-config-twbs-bootstrap | scss/at-if-closing-brace-space-after | null | if 关闭括号后空格 |
| stylelint-config-twbs-bootstrap | scss/at-if-no-null | null | 禁止 if 中使用 null |
| stylelint-config-twbs-bootstrap | scss/at-mixin-argumentless-call-parentheses | 'always' | 无参数 mixin 调用时需要括号 |
| stylelint-config-twbs-bootstrap | scss/at-mixin-pattern | null | mixin 名称模式 |
| stylelint-config-twbs-bootstrap | scss/at-rule-conditional-no-parentheses | null | 条件 at 规则禁止括号 |
| stylelint-config-twbs-bootstrap | scss/comment-no-empty | null | 禁止空注释 |
| stylelint-config-twbs-bootstrap | scss/dimension-no-non-numeric-values | true | 禁止尺寸使用非数字值 |
| stylelint-config-twbs-bootstrap | scss/dollar-variable-colon-space-after | 'at-least-one-space' | 美元变量冒号后至少一个空格 |
| stylelint-config-twbs-bootstrap | scss/dollar-variable-empty-line-before | null | 美元变量前空行 |
| stylelint-config-twbs-bootstrap | scss/double-slash-comment-empty-line-before | null | 双斜杠注释前空行 |
| stylelint-config-twbs-bootstrap | scss/double-slash-comment-whitespace-inside | null | 双斜杠注释内部空格 |
| stylelint-config-twbs-bootstrap | scss/function-quote-no-quoted-strings-inside | null | 在 quote 函数中禁止引号字符串 inside |
| stylelint-config-twbs-bootstrap | scss/media-feature-value-dollar-variable | null | 媒体特征值使用美元变量 |
| stylelint-config-twbs-bootstrap | scss/no-global-function-names | null | 禁止全局函数名 |
| stylelint-config-twbs-bootstrap | scss/selector-no-redundant-nesting-selector | true | 禁止冗余的嵌套选择器 |
Vue 专属规则
// stylelint.config.js
module.exports = {
extends: [
'stylelint-config-recommended-vue/scss',
],
};
| 来源 | 规则名称 | 配置值 | 描述 |
|---|---|---|---|
| stylelint-config-recommended-vue | selector-pseudo-class-no-unknown | [true, { ignorePseudoClasses: ["deep", "global", "slotted"] }] | 禁止未知的伪类选择器，但忽略 Vue 特定的伪类（如 deep、global、slotted） |
| stylelint-config-recommended-vue | selector-pseudo-element-no-unknown | [true, { ignorePseudoElements: ["v-deep", "v-global", "v-slotted"] }] | 禁止未知的伪元素选择器，但忽略 Vue 特定的伪元素（如 v-deep、v-global、v-slotted） |