如何为你的 Vue 项目添加配置 Stylelint
现在已经是 9102 年了，网上许多教程和分享帖都已经过期，照着他们的步骤来会踩一些坑，如 stylelint-processor-html 已经不再维护，以及 --fix 之后 .vue 文件只剩下 <style> 部分等。我在踩完坑跑通出满意的效果后，维护一份新的指引，以备后续项目使用，顺便分享一下。
为什么选择用 stylelint ？这个问题有两层含义，一是为什么要使用这个样式代码风格检查工具，二是与其他工具相比，为什么选择 stylelint 而不是其他如 stylefmt 等。
使用 linter 的原因对于第一个问题，相信很多小伙伴都会被历史遗留的，或多人协同开发写下的风格不一的样式代码困扰过，最基本的就是换行、缩进和空格之争，大家对此应该都不陌生。特别是有时候你可能会遇上如下祖传代码：
#idA .classB,.classC{position:absolute;top: 0;left:0; display:-webkit-flex;display: flex;width:100%;background:url(../pic.png) no-repeat;-webkit-background-size:contain;background-size:contain }这段代码从我个人风格来看存在不少问题：
不推荐使用 id 选择器来定义样式；
多重选择器（multiple selectors）没有换行，不清晰直观；
多个 css 规则没有换行，挤在单行太长；
使用了 -webkit- 前缀，但是项目中已经支持 autoprefixer ；
属性和值之间的空格时有时无等。
当然代码风格因人而异，所以才需要团队统一。在一些早期缺乏完善的代码评审等制度的项目中，很容易由于程序员的偷懒图方便或在一时的紧急粗糙赶工中积累下一坨对团队其他成员不太友好、可阅读性低、较难维护的 css 。
同类工具比较至于第二个问题，选择 stylelint 的原因也很简单，它是当前所有同类工具中使用人数最多的，社区较为活跃，仍在持续维护。而且正如这个 中提到，当下很多大厂都在使用，如 github 的 primer 体系就定制了一套自己的 stylelint-config-primer 。
至于 stylefmt 也曾经被推荐与 stylelint 搭配组合，不少博文都有提到。但是官方已经不推荐继续使用，直接用 stylelint 的 --fix 选项即可。
NOTICE: Consider other tools before adopting stylefmt
If you are using stylefmt with stylelint configuration to format according to its rules, you can now use stylelint's --fix option (from v7.11.0) to autofix.
Another on the other hand, prettier supports to format not only JavaScript but also CSS, SCSS and Less code.
而没有考虑 prettier 的原因则是它希望提供一套官方自己认可的统一风格规范，而不仅仅是个 linter 或者 formatter ，可配置项很少，定制自由度较低，不适合想要自己搞事情的团队，更适合个人开发者去使用。
如何开始使用 安装依赖其实官方的 User guide 已经很全面，与 eslint 是非常相似的。
安装 stylelint
npm i -D stylelint stylelint-config-stand后者 stylelint-config-stand 不是必需的，也可以自己根据文档从零开始配置规则，或者用第三方如 github 的规则 stylelint-config-primer 。
安装适配预处理语法的插件
以 sass 为例：
npm i -D stylelint-scss不过 stylus 目前没有发现可用性高的相关插件，也导致 stylelint 不能解析 stylus 语法。
安装 webpack 插件
npm i -D stylelint-webpack-plugin 命令行使用stylelint 搜索目录和文件使用的是 glob 规则：
npx stylelint --cache **/*.{html,vue,css,sass,scss} --fix--cache 选项可以指定使用缓存，默认生成的 .stylelintcache 文件放置于执行目录中， --fix 选项可以指定 stylelint 自动修复不符合可修复规则的代码，其他更多选项可以参考官方文档。
但需要注意有一个问题，在没有配置使用 stylelint-scss 之类的插件前， stylelint 是不能直接解析 vue 文件、 html 文件等的，会报出一堆错误：
1:1 ✖ Unknown word CssSyntaxError我们可以用内置的自定义语法 postcss-html 来解析（不需安装）：
npx stylelint **/*.{html,vue} --custom-syntax postcss-html也可以用内置的 scss 语法支持来解析 css 文件：
npx stylelint **/*.{css,sass,scss} --syntax scss 通过 npm 命令运行在 scripts 中加一下就好了，对于 9102 年的前端程序员应该都是基本操作：
// package.json { "scripts": { "lint:style": "stylelint **/*.{html,vue} --custom-syntax postcss-html", "lint:css": "stylelint **/*.{css,sass,scss} --syntax scss" } }或者（配置了 stylelint-scss 插件后）：
{ "scripts": { "lint:css": "stylelint **/*.{html,vue,css,sass,scss}" } }