css格式规范stylelint在vscode使用教程（ctrl+s自动智能修复）

前言

和 eslint 类似，stylelint 是 css 界的规范大师，标准配置内置了 170 余个配置项，对于有强迫症的人来说不得不用！

每次去校验修复都要敲命令 fix 是非常不人性化的，我们追求的就是在编码期间就可以实时进行修复。相较于 eslint 在 vscode 有 eslint 插件可以进行自动修复，stylelint 也有相应的 stylelint 插件：

官方网站：stylelint.io

插件项目：stylelint / vscode-stylelint

安装

安装依赖

在一个项目里集成 stylelint 只需要安装两个依赖即可：

	yarn add -D stylelint stylelint-config-standard

配置 stylelint

在项目根目录建立 stylelint 配置文件 .stylelintrc.json ：

{
  "extends": [
    "stylelint-config-standard"
  ]
}

配置自动修复

在插件市场安装好 stylelint 插件后，在 settings.json 配置自动修复：

	"editor.codeActionsOnSave": {
	  "source.fixAll.stylelint": true
	},

如此一来，就可以在文件 ctrl + s 保存时自动修复不合理的 css 格式。

使用

命令行

在 package.json 配置监测与修复命令：

  "scripts": {
    "lint:style": "stylelint \"src/*.{css,scss}\"",
    "fix:style": "stylelint --fix \"src/*.{css,scss}\""
  }

配置多种文件监测只需要在 {} 内添加即可，支持 less、css、scss 。

通用命令行选项：Options

更多命令行选项：Command Line Interface (CLI)

Ctrl + s

刚刚我们配置了自动修复，如果不是批量修复根本不需要命令行，直接在需要格式化的 css 文件内按下 ctrl + s 即可。

格式化前：

可以看到有两个错误，按下 ctrl + s 修复：

更多格式化规则可以在 .stylelintrc.json 文件内配置（ 完整 rules 配置选项 ）

其他

如果安装了其他的 css 格式化插件，比如 Beautify 等，按下 alt + shift + f 会对当前 css 文件自动格式化，但这一般与 stylelint 的规则不符，在使用 stylelint 时应该避免手动对 css 文件的格式化，转而使用 ctrl + s 自动 stylelint 格式化。

总结

stylelint 的生态还存在一些问题，部分插件和配置不生效或导致 stylelint 插件失效，但只要勉强能用，依然会让强迫症很舒服。