本文转载于SegmentFault社区

作者：Lewis92

前言

stylelint 是一个强大和现代的 CSS 审查工具，有助于开发者推行统一的代码规范，避免样式错误。其支持 less、sass 这类预处理器，目前 stylelint 有一百多条校验规则，并且还在逐步增加。

一、stylelint 具体什么作用

stylelint 有一百多条校验规则, 这些规则可以分为三类：

• 用于校对风格的规则：针对空格(比如说冒号附近的空格)、换行、缩进等等。

• 用于判别代码可维护性的规则：判断在CSS选择器中是否有使用某个ID，或者在某条声明当中是否应用了important关键词。

• 用于判断代码错误的规则：检测错误的HEX颜色写法或者某条简写属性是否会覆盖其他的声明语句。

二、安装依赖

1.安装 stylelint

npm i -D stylelint stylelint-config-stand

2.安装适配预处理语法的插件，以 sass 为例：

npm i -D stylelint-scss

3.安装 webpack 插件

npm i -D stylelint-webpack-plugin

三、通过 npm 命令运行

// package.json{ "scripts": { "lint:css": "stylelint **/*.{html,vue,css,sass,scss,less}" }}

可以手动在命令行运行：

npm run lint:css

四、通过 webpack 插件运行

// vue.config.jsconst StyleLintPlugin = require('stylelint-webpack-plugin');module.exports = { ... configureWebpack: { plugins: [new StyleLintPlugin({ files: ['**/*.{vue,htm,html,css,sss,less,scss,sass}'], fix: false, // 是否自动修复 cache: true, // 是否缓存 emitErrors: true, failOnError: false, })], },};

五、编写配置

按以下顺序查找，任何一项有值，就会结束查找

1.在 package.json 中的 stylelint 属性指定规则

2.在 .stylelintrc 文件中指定，文件格式可以是 JSON 或 YAML。也可以给该文件加扩展名，.stylelintrc.json、 .stylelintrc.yaml、 .stylelintrc.yml、 .stylelintrc.js。

3.stylelint.config.js 文件，该文件 exports 一个配置对象

rules

默认情况下未打开任何规则，也没有默认值。必须明确配置每个规则才能将其打开

defaultSeverity

只支持 “warning" 和 ”error" 两种，用于定义全局默认的报错等级

extends

可以扩展现有配置(无论是自己的配置还是第三方配置)

plugins

插件是社区构建的规则或规则集，支持方法，工具集，非标准 CSS功能或非常特定的用例。

processors

处理器是由社区构建的功能，它们挂接到stylelint的管道中，在其进入stylelint的过程中修改代码，并在其退出时修改结果。

我们不鼓励使用内置语法因为处理器与autofix功能不兼容。

ignoreFiles

忽略特定文件，node_modules 是默认情况下忽略的目录。但是，如果 ignoreFiles 设置了，则将其覆盖。

注意: 这不是忽略大量文件的有效方法。如果您想有效地忽略很多文件，请使用 .stylelintignore 或调整文件范围。

// stylelint.config.jsmodule.exports = { defaultSeverity: 'error', extends: ['stylelint-config-standard'], // 官方推荐 rules: { },};

六、忽略文件

在项目跟目录添加.stylelintignore 文件，配置规则与 .gitignore 、.eslintignore 规则一样。

# .stylelintignore# 旧的不需打包的样式库*.min.css# 其他类型文件*.js*.jpg*.png*.eot*.ttf*.woff*.json# 测试和打包目录/test//dist/

七、stylelint 与 eslint 同时使用 git-hooks 配置

// package.json{ ... "lint-staged": { "*.{html,vue,css,sass,scss,less}": [ "npm run lint:css" ] }， "gitHooks": { "pre-commit": "lint-staged" },}

- END -