前言
团队单干时，当每个人的代码都领有自定义的格式化形式时，在提交merge的时候往往要解决很多抵触，此时咱们能够应用eslint+stylelint来对团队的代码进行束缚。eslint的配置引入比较简单，网上有比拟多的教程，而stylelint的教程大多语焉不详。在这里，我会介绍一下我在引入stylelint所遇到的坑，以及解决办法。
注释
stylelint是一个弱小的，古代的代码查看工具，能够帮忙你在团队单干中强制执行款式约定。
1. 装置stylelint
yarn add -D stylelint2. 配置文件
应用 stylelint检测器须要一个配置对象，你能够应用三种形式来创立这个对象。
package.json中的stylelint 属性。.stylelintrc.js文件stylelint.config.js文件输入的js对象
一旦发现它们中的任何一个，将不再持续进行查找，进行解析，将应用解析后的对象。 本次应用的是.stylelintrc.js 文件来进行配置。
3. 应用stylelint
装置官网文档的说法你能够依照以下办法运行stylelint检测款式代码。
--fix 用来主动修复，但不能修复所有的问题。
// package.json"scripts":{ "lint:css":"stylelint src/**/*.css --fix"}踩坑点1：
因为我的我的项目里应用的款式语言是less。所以检测css是必定不对的，所以这里咱们须要做一点改变
// package.json"scripts":{ "lint:css":"stylelint src/**/*.less --fix"}于是咱们能够运行这串代码了
yarn lint:css postcss-less大家能够看到，这里报了一些揭示，简略翻译为让咱们用对应的语法去解析咱们的款式。而这对应的语法解析器是须要咱们去装置的。
yarn add -D postcss-less于是再次对脚本进行批改。
// package.json"scripts":{ "lint:css":"stylelint src/**/*.less --fix --custom-syntax postcss-less"}OK 到这里咱们就能够失常的去跑lint命令对咱们的款式代码进行格式化了。接下来咱们来配置lint规定
4. 配置规定
stylelint目前是有些工作者帮忙翻译出了中文文档，如果对浏览英文文档有肯定排斥性的同学能够查看中文文档。
咱们首先须要装置三个npm包帮忙咱们欠缺规定
yarn add -D stylelint-config-standard stylelint-order stylelint-config-css-modulesstylelint-config-standard 是stylelint的举荐配置，stylelint-order是用来在格式化css文件时对代码的属性进行排序。 stylelint-config-css-modules 是css-module的计划来解决款式文件
我的配置文件长这样：
// .stylelintrc.jsmodule.exports = { processors: [], plugins: ['stylelint-order'], extends: [ "stylelint-config-standard", "stylelint-config-css-modules" ], rules: { "selector-class-pattern": [ // 命名标准 - "^([a-z][a-z0-9]*)(-[a-z0-9]+)*$", { "message": "Expected class selector to be kebab-case" } ], "string-quotes":"single", // 单引号 "at-rule-empty-line-before": null, "at-rule-no-unknown":null, "at-rule-name-case": "lower",// 指定@规定名的大小写 "length-zero-no-unit": true, // 禁止零长度的单位（可主动修复） "shorthand-property-no-redundant-values": true, // 简写属性 "number-leading-zero": "never", // 小数不带0 "declaration-block-no-duplicate-properties": true, // 禁止申明快反复属性 "no-descending-specificity": true, // 禁止在具备较高优先级的选择器后呈现被其笼罩的较低优先级的选择器。 "selector-max-id": 0, // 限度一个选择器中 ID 选择器的数量 "max-nesting-depth": 3, "indentation": [2, { // 指定缩进 warning 揭示 "severity": "warning" }], "order/properties-order": [ // 规定程序 "position", "top", "right", "bottom", "left", "z-index", "display", "float", "width", "height", 'max-width', 'max-height', 'min-width', 'min-height', 'padding', 'padding-top', 'padding-right', 'padding-bottom', 'padding-left', 'margin', 'margin-top', 'margin-right', 'margin-bottom', 'margin-left', 'margin-collapse', 'margin-top-collapse', 'margin-right-collapse', 'margin-bottom-collapse', 'margin-left-collapse', 'overflow', 'overflow-x', 'overflow-y', 'clip', 'clear', 'font', 'font-family', 'font-size', 'font-smoothing', 'osx-font-smoothing', 'font-style', 'font-weight', "line-height", 'letter-spacing', 'word-spacing', "color", "text-align", 'text-decoration', 'text-indent', 'text-overflow', 'text-rendering', 'text-size-adjust', 'text-shadow', 'text-transform', 'word-break', 'word-wrap', 'white-space', 'vertical-align', 'list-style', 'list-style-type', 'list-style-position', 'list-style-image', 'pointer-events', 'cursor', "background", "background-color", "border", "border-radius", 'content', 'outline', 'outline-offset', 'opacity', 'filter', 'visibility', 'size', 'transform', ], }};processors属性因为此次并没有应用，所以不做介绍，有趣味的同学能够查问官网文档。plugins是由社区创立的规定或规定集，反对方法论、工具集，非标准 的 CSS 个性，或十分特定的用例。extends继承一个已存在的配置文件。（在我的配置中，继承了css-module和官网举荐的配置）rules规定决定检测器要查找什么和要解决什么，所以，通过该选项你就能够开启相应规定，进行相应的检测。所有规定必须显式的进行配置，因为 没有默认值。
另外还有 defaultSeverity和 ignoreFiles也能够在这里配置，有须要的同学能够在文档中找到。
因为我在配置文件中曾经对相应规定做了正文，解释了他的作用，如果有同学对此有疑难，欢送留言或者加我好友进行交换~
留神： null为禁用规定。能够在rules外面重写笼罩官网举荐的配置规定。
5. 疏忽lint文件
此时咱们曾经能够失常的应用stylelint来格式化款式代码了。然而在我的项目中往往会存在一些不须要格式化的代码，比方咱们会独自抽离一个overrides文件来重写antd的款式。显然这里是不须要格式化的，因为antd的选择器命名可能跟咱们的标准不尽相同。所以咱们须要在运行lint时疏忽这个文件。
- 咱们能够在
.stylelintrc.js中配置ignoreFiles。
- 咱们能够在
- 创立
.stylelintignore文件。
- 创立
- 咱们能够通过
/* stylelint-disable */的办法，来对代码快进行疏忽lint检测。
- 咱们能够通过
我采纳的是第二种办法，配置如下：
// .stylelintignore*.js*.tsx*.ts*.json*.png*.eot*.ttf*.woff*.csssrc/styles/antd-overrides.less6. 主动格式化
在进行完上文的配置之后，其实咱们曾经达到了标准的目标，然而如果每次都要跑一次lint无疑就会减轻咱们的编码累赘。这里介绍两种形式在咱们写款式代码时，对代码主动格式化的办法。
6.1 stylelint vs-code 插件
咱们能够在vs-code插件市场中搜寻stylelint插件，它大略长这个样子
能够看到我这里是彩色的，这是因为我不必这个插件，它有一些bug。
简略介绍一下bug所在：
在antd-overrides中有一些代码过了咱们配置的lint规定，然而没有这个插件会给咱们报一个CssSyntaxError。而且在删除一些问题代码之后，这个插件还会报一些逻辑代码谬误。这是我不能承受的。于是果决弃用。大家能够依照本人我的项目理论状况进行抉择~
6.2 webpack plugin
你能够很轻松的找到webpack的stylelint-plugin。代表这个插件曾经宽泛应用~你能够释怀的接入。
为什么一个webpack插件能够帮忙咱们格式化款式代码呢，这是因为咱们在热更新从新编译的时候，这个插件会帮咱们检测代码。并依据.stylelintrc.js文件中配置的规定进行fix。 如果有lint谬误能够抉择让我的项目无奈运行，防止将没有lint的款式上传到代码库。
于是我在应用这个插件的时候踩了好多坑，接下来我一一的说。
6.3 插件踩坑集锦
最开始时。按百度到的各路大神的写法，只须要这么配置就能够：
new StyleLintPlugin({ context: "src", configFile: path.resolve(__dirname, './stylelintrc.js'), files: '**/*.less', failOnError: false, quiet: true, syntax: 'less'})终局不出预料，没有用。最恐怖的是他会给你一种假象，你本地运行的时候没有工作问题，让你误以为你的代码没有任何问题！其实，是这个插件没有作用到。
另外这么配置如果应用stylelint的vscode扩大时，还会有一大堆的让你心态爆炸的红波浪~~~~。
通过我的踩坑，终于实现了一个没有报错，没有假象，没有谬误查看，没有疏忽我的疏忽配置的配置！
new StylelintPlugin({ configFile: path.resolve(__dirname, './.stylelintrc.js'), extensions: ['less'], files: 'src/**/*.less', fix: true, customSyntax: 'postcss-less', lintDirtyModulesOnly: true, threads: true, exclude: ['node_modules', 'src/styles/antd-overrides.less'], })这里我想具体的解释一下各字段的用法。
configFile没什么好说的，加载配置文件。extensions指定要查看的扩展名。 这里肯定要配置，不然会去检测你的tsx。files指定检测目录。fix这个是重点。这就是主动格式化的要害配置所在。customSyntax这又是要害！！！！ 肯定要加这个配置，百度到的大佬配置中应用的是syntax。这个配置曾经过期了，须要应用customSyntax，并且value肯定要是你之前装置过的postcss-less包。这个配置居然连webpack官网文档中都没有。我曾经筹备去提issue了lintDirtyModulesOnly仅查看有变动的文件，启动时跳过查看。threads会依据 cpu 的数量主动决定池子的大小。exclude这个十分重要。因为我在实践中发现webpack-plugin没有读取我在.stylelintignore中配置的疏忽规定，而导致我的项目在运行时报了一大堆谬误。肯定要配！！！！
7. commit检测
这个就比较简单了，如果我的项目之前配置过eslint时的commit检测，这里只须要在脚本中退出检测款式就能够。配置如下
"lint-staged": { "*.{ts,tsx}": [ "eslint --ext js,ts,tsx --fix", "git add" ], "*.less": [ "stylelint --fix --custom-syntax postcss-less", "git add" ] }这里其实是不须要跑yarn lint:css的，因为如果这样在commit时会全量检测所有src下的款式，然而其实咱们只须要检测批改的文件即可。特地留神： 肯定要加上 --custom-syntax postcss-less。
好了，到这里咱们就。。。。还没完结。
咱们来梳理一下stylelint的工作流程
.stylelintrc配置规定。package.json配置脚本命令.stylelintignore配置疏忽规定stylelint-webpack-plugin配置主动格式化规定lint-staged配置commit规定
首先运行我的项目时会去读取.stylelintrc文件，并依据外面的规定通过webpack-plugin去查看代码，主动格式化。在运行 lint:css时，会读取.stylelintignore检测时疏忽相干文件。在批改完代码后commit时lint-staged会帮咱们在做一次提交前检测，防止上传没有格式化的代码。
7.1 梳理流程时发现的坑
在我做完stylelint相干配置之后，开始了激情编码环节。然而我依据设计图去给元素设置一个带有透明度的色彩rgba时。贴心的插件就会帮忙我，把rgba格式化成rbg色彩。像这样:
主动格式化后，嘟 变成了这样
rgb(0 0 0 / 12%) 这是什么货色？ 起初我并不在意，直到我发现了在页面上这个款式变成了这样
这不是逗我吗，你格式化就格式化，怎么变成了这玩意？？？
于是连忙去百度，百度不到答案。。。而后又谷歌，终于找到了一个看起来像答案的答案
简略解释一下。这是一个比拟新的css标准。sass标准还不反对。类比到我的less。也就是我的less标准还不反对。因为我的项目里用的less版本是3+。还不是最新的。所以不反对几乎是再失常不过的事。我的less把我的新标准的带透明度的rgb辨认成了第三个参数前面的/是除法。0除以12%大声通知我是多少？还是0吧
所以我的less没有错 错的是这个世界！
报着尝试的心态我去浏览器间接写了一个rgb(0 0 0 / 12%) 看看支不反对。后果如下：
没错，浏览器反对！那好办了，摆在咱们背后有两个解决办法
- 让less反对这种色值计划
- 让stylelint不格式化
带着办法我去查找了less的官网仓库的 changelog 我妄图尝试在最新版的更新里哪怕提到半个rgb的字眼，然而并没有。也可能是我的眼神不太好~~ 。 总之第一条办法失败了。
那么咱们用第二种办法，首先要晓得是stylelint的哪条规定把rgba格式化成了rgb。我做了大量的尝试。并且做了大量的百度。不出我所料。百度不到。尝试也都不对。路走窄了。
于是我换了一个思路，我去看看官网举荐的stylelint-config-standard 配置库。如图：大家留神红框
在23版本时，色彩曾经是百分比了。这也是最新版本，也是我我的项目里的版本。那么能够确定的是，肯定是这个库帮我格式化了！！！
那么咱们该怎么让他不格式化呢？去查看这个库其余的版本，凡是哪个版本里呈现了rgba，那他这个版本就不会主动格式化。
功夫不负有心人。我只找了一个版本，就找到了
于是对我的项目里的库版本做降级解决~ ，这样就不会把rgba格式化成rgb了！ 功败垂成。
后记
遇到问题不可怕，可怕的是百度不到答案。
如果百度不到还能够谷歌。 切记切记。