我正在参加「掘金·启航计划」

本文不涉及stylelint的原理、使用优势，重点在于stylelint的安装等过程以及在VS code和 webstorm 等开发者工具中的配置，实现css的自动格式化。

一、安装包以及相关插件

相关安装包

// 快捷命令: npm i stylelint stylelint-config-recess-order stylelint-config-standard stylelint-order stylelint-scss -D
 
"devDependencies": {
  ...
  "stylelint": "^13.8.0", // 主功能包
  "stylelint-config-recess-order": "^2.3.0", // stylelint-order插件，推荐排序规则
  "stylelint-config-standard": "^20.0.0", // 基础规则库
  "stylelint-order": "^4.1.0", // css属性顺序检查插件
  "stylelint-scss": "^3.18.0", // scss检测插件
  ...
}

增加自动修复命令

"stylelint": "stylelint \"src/**/*.{css,scss,vue}\"  --fix" // 文件类型根据实际情况配置

二、配置文件

module.exports = {
  processors: [],
  plugins: ['stylelint-order', 'stylelint-scss'],
  extends: ['stylelint-config-standard', 'stylelint-config-recess-order'], // 这是官方推荐的方式
  rules: {
    // at-rule-no-unknown: 屏蔽一些scss等语法检查
    'at-rule-no-unknown': null,
    'scss/at-rule-no-unknown': true,
    'scss/selector-no-redundant-nesting-selector': true,
    'font-family-no-missing-generic-family-keyword': null,
    'no-descending-specificity': null,
  }
}

其他的规则可以参考官方网站：stylelint.io/

三、husky增加提交检测（husky安装省略）

.lintstagedrc中增加stylelint配置

{
  ...
  "src/**/*.{css,scss,vue}": [
    "stylelint"
  ]
}

四、自动格式化

1. Vscode中自动格式化（安装插件）

系统配置增加以下配置

{
  ...
  // 取消系统默认的检查
  "css.validate": false,
  "less.validate": false,
  "scss.validate": false,
  // 保存自动修复，与eslint通用
  // 也可通过"source.fixAll.stylelint": true单独配置
  "editor.codeActionsOnSave": {
    "source.fixAll": true
  },
  ...
}

2. Webstorm中的自动格式化配置

1. 开启stylelint

Webstorm内置stylelint，所以直接在配置中开启即可，注意勾选 Process JS files

2. 保存自动修复

创建一个文件监听器，webstorm检查到文件保存时，执行修复命令

a) 全局安装stylelint

npm install stylelint -g

b) 添加 File Watchers

c) 配置 File Watchers

$FileName$ --fix

$FileName$

$FileDir$

Stylelint安装及自动格式化配置指南