头图

Stylelint 是一个强大、先进的 CSS 代码检查器(linter),可以帮助你规避 CSS 代码中的错误并保持一致的编码风格。

Stylelint 的强大源于:

  • 拥有超过 100 条内置规则 来检查最新的 CSS 语法和功能
  • 支持 插件 以创建你自己的规则
  • 自动 修复 大多数代码格式上的问题
  • 支持创建或扩展 可共享的配置
  • 可定制,让其而符合你的需求
  • 经过 15000 多次的单元测试,保证其健壮性
  • 被大型公司所采用,例如 Google 和 GitHub

还可以被扩展为:
能够从 HTML、Markdown 和 CSS-in-JS 对象以及模板文本中提取 内嵌的样式代码
解析 类似 CSS 的语法,例如 SCSS、Sass、Less 以及 SugarSS

安装依赖

pnpm install stylelint stylelint-config-html stylelint-config-recommended-scss stylelint-config-recommended-vue stylelint-config-standard stylelint-config-standard-scss stylelint-config-recess-order postcss postcss-html -D
依赖作用描述
stylelintstylelint 核心库
stylelint-config-htmlStylelint 的可共享 HTML(和类似 HTML)配置,捆绑 postcss-html 并对其进行配置。
stylelint-config-recommended-scss扩展 stylelint-config-recommended 共享配置,并为 SCSS 配置其规则
stylelint-config-recommended-vue扩展 stylelint-config-recommended 共享配置,并为 Vue 配置其规则
stylelint-config-standard打开额外的规则来执行在规范和一些 CSS 样式指南中发现的通用约定,包括:惯用 CSS 原则,谷歌的 CSS 样式指南,Airbnb 的样式指南,和 @mdo 的代码指南。
stylelint-config-standard-scss扩展 stylelint-config-standard 共享配置,并为 SCSS 配置其规则
stylelint-config-recess-order属性的排序(插件包)
postcsspostcss-html 的依赖包
postcss-html用于解析 HTML(和类似 HTML)的 PostCSS 语法

安装插件
image.png
在目录的 .vscode 文件夹下新建 settings.json:

{
    "editor.formatOnSave": true,
    "editor.codeActionsOnSave": {
        "source.fixAll.stylelint": true
    },
    "stylelint.enable": true,
    "stylelint.validate": ["css", "less", "postcss", "scss", "vue", "sass", "html"],
    "files.eol": "\n"
}

配置 StyleLint(.stylelintrc.cjs):

// @see: https://stylelint.io

module.exports = {
    root: true,
    // 继承某些已有的规则
    extends: [
        "stylelint-config-standard", // 配置 stylelint 拓展插件
        "stylelint-config-html/vue", // 配置 vue 中 template 样式格式化
        "stylelint-config-standard-scss", // 配置 stylelint scss 插件
        "stylelint-config-recommended-vue/scss", // 配置 vue 中 scss 样式格式化
        "stylelint-config-recess-order", // 配置 stylelint css 属性书写顺序插件,
    ],
    overrides: [
        // 扫描 .vue/html 文件中的 <style> 标签内的样式
        {
            files: ["**/*.{vue,html}"],
            customSyntax: "postcss-html",
        },
    ],
    rules: {
        "function-url-quotes": "always", // URL 的引号 "always(必须加上引号)"|"never(没有引号)"
        "color-hex-length": "long", // 指定 16 进制颜色的简写或扩写 "short(16进制简写)"|"long(16进制扩写)"
        "rule-empty-line-before": "never", // 要求或禁止在规则之前的空行 "always(规则之前必须始终有一个空行)"|"never(规则前绝不能有空行)"|"always-multi-line(多行规则之前必须始终有一个空行)"|"never-multi-line(多行规则之前绝不能有空行)"
        "font-family-no-missing-generic-family-keyword": null, // 禁止在字体族名称列表中缺少通用字体族关键字
        "scss/at-import-partial-extension": null, // 解决不能使用 @import 引入 scss 文件
        "property-no-unknown": null, // 禁止未知的属性
        "no-empty-source": null, // 禁止空源码
        "selector-class-pattern": null, // 强制选择器类名的格式
        "value-no-vendor-prefix": null, // 关闭 vendor-prefix (为了解决多行省略 -webkit-box)
        "no-descending-specificity": null, // 不允许较低特异性的选择器出现在覆盖较高特异性的选择器
        "value-keyword-case": null, // 解决在 scss 中使用 v-bind 大写单词报错
        "selector-pseudo-class-no-unknown": [
            true,
            {
                ignorePseudoClasses: ["global", "v-deep", "deep"],
            },
        ],
    },
    ignoreFiles: ["**/*.js", "**/*.jsx", "**/*.tsx", "**/*.ts"],
};

效果展示:
当你在格式化代码的时候,stylelint会自动帮我们调整css样式位置,防止回流重绘

它能为你做什么
Stylelint 能帮助你 规避错误,例如

  • 无效的内容,例如:错误的 grid 定义
  • 有效但有问题的内容,例如:重复的选择器
  • 位置内容,例如:拼写错误的属性名

并能强化规则,例如:

  • 禁止某些内容,例如:特定的数值单位
  • 强制命名规范,例如:针对自定义属性名
  • 设置边界,例如:ID 选择器的数量
  • 指定某些标记符号,例如:最新的处理颜色的函数
    建议在使用 Stylelint 的同时使用格式化工具 Prettier。代码检查工具和格式化工具是互相补充的,能够辅助你编写一致且正确的代码。

参考资料:
配置参考Geeker-Admin:样式规范工具(StyleLint)
官网:Stylelint官网


兔子先森
405 声望17 粉丝

致力于新技术的推广与优秀技术的普及。