简介

Stylelint是一个强大、先进的css代码校验工具，与Eslint（js代码校验工具）类似；

现代前端开发离不开工程化，而Stylelint是前端工程化工具链中一员，专门针对 CSS 而来的

作用

1、避免CSS代码错误（能自动修复就修复，不能修复的高亮提示）
2、自动格式化CSS代码，统一CSS代码规范
3、自动优化CSS代码，对样式属性进行排序

安装

npm i stylelint -D

使用

1、命令行方式
2、Node.js接口方式
3、作为Postcss插件

集成

1、与代码编辑器/IDE集成
2、与构建工具集成
3、其他

官方推荐使用VS Code插件集成，操作方便又直观

配置文件

安装Stylelint之后，为了让它能按照我们要求的规则来校验（格式化/优化）CSS代码，需要一个Stylelint专属配置文件

种类

1、直接配置在package.json文件的stylelint属性
2、项目根目录下的.stylelintrc配置文件（可以加文件后缀，.json/yaml/js）
3、项目根目录下的stylelint.config.js配置文件，导出JS对象

module.exports = {
    extends: ["stylelint-config-standard-scss"],
    rules: {
        "color-hex-case": "upper",
        "color-no-invalid-hex": true,
        "indentation": 4
    }
}

插件

Stylelint提供了插件机制，用于自定义规则/规则集。说白了，就是Stylelint内置的170条规则无法满足你的需要时，你可以开发插件来提供自己的校验规则

例如：第三方插件stylelint-scss提供了校验scss的规则

预设配置

为了简化配置，Stylelint在配置文件中提供了继承机制，官方和第三方都提供了很多预设配置，例如

stylelint-config-standard、stylelint-config-standard-vue等，开发者根据需求自行选择使用：

常用预设配置介绍

1、stylelint-config-standard: 官方提供校验CSS标准预设规则集，它继承官方另一个预设stylelint-config-recommended

2、stylelint-config-standard-scss：提供校验SCSS标准预设规则集，它继承stylelint-config-standard与stylelint-config-recommended-scss

3、stylelint-config-standard-vue：提供校验vue文件中CSS/SCSS标准预设规则集，继承stylelint-config-standard

4、stylelint-config-html：提供解析html\htm\vue\php\xml等多文件内嵌样式的配置

5、stylelint-config-recess-order：提供优化样式顺序的配置

语法解析器

Stylelint默认只会解析CSS（非内嵌在html或vue文件中的CSS），为了能校验内嵌样式、Less、Scss/Sass等，Stylelint提供customSyntax来配置相应解析器，如下

Less使用postcss-less解析器
Sass使用postcss-sass解析器
Css-in-Js（.js/jsx/ts）使用 @stylelint/postcss-css-in-js
html/vue/xml/svelte等内嵌样式使用postcss-html

忽略配置

和其他代码校验工具一样，都提供了忽略配置文件.stylelintignore（在项目根目录），其内容如下：

node_modules
dist

在项目中，有些文件不希望使用Stylelint进行CSS代码校验，例如：第三方包/打包后的文件，我们就必须在此配置文件进行配置，可配置某类型文件/文件夹（包含文件夹下的文件）

VS Code插件

官方提供了 Stylelint for VS Code 插件，用于与VS Code集成，用于代码问题高亮显示和自动修复/格式化代码

VS Code的Stylelint插件依赖项目安装的Stylelint包，所以项目必须安装Stylelint包

配置

{
    "css.validate": false,
    "less.validate": false,
    "scss.validate": false,
    "editor.codeActionsOnSave": {
        "source.fixAll.stylelint": true
    },
    "stylelint.validate": [
        "css",
        "less",
        "postcss",
        "html",
        "scss",
        "vue",
        "sass"
    ]
}

前端学习日记 # Stylelint

简介

作用

安装

使用

集成