前言在团队协作中，当每个人的代码都有自定义的格式化方法时，很多冲突往往是在提交merge的时候解决的。这时候，我们可以使用eslint+stylelint来对团队的代码进行约束。eslint的配置介绍比较简单，网上的教程也很多，但是stylelint的教程大多比较模糊。在这里，我就介绍一下我在介绍stylelint的时候遇到的坑以及解决办法。Literalstylelint是一种功能强大的现代代码检查工具，可帮助您在团队合作中强制执行风格约定。1.安装stylelintyarn添加-Dstylelint2。配置文件使用stylelint检测器需要一个配置对象，可以使用三种方式创建这个对象。package.json中的stylelint属性。.stylelintrc.js文件stylelint.config.js文件输出的js对象一旦找到其中任何一个，就不再继续查找解析，而是使用解析出来的对象。这次，.stylelintrc.js文件用于配置。3.使用stylelint安装官方文档，可以运行stylelint检测样式代码如下。--fix用于自动修复，但不是所有问题。//package.json"scripts":{"lint:css":"stylelintsrc/**/*.css--fix"}切入点一：因为我项目中使用的样式语言较少。所以检测css肯定是错误的，所以这里我们需要做一点改动//package.json"scripts":{"lint:css":"stylelintsrc/**/*.less--fix"}这样我们就可以运行可以看到这串代码yarnlint:csspostcss-less，这里有一些提示，简单翻译为让我们使用相应的语法来解析我们的样式。而相应的文法解析器需要我们安装。yarnadd-Dpostcss-less然后再次修改脚本。//package.json"scripts":{"lint:css":"stylelintsrc/**/*.less--fix--custom-syntaxpostcss-less"}OK在这里我们可以正常运行lint命令来格式化我们的样式代码。接下来我们来配置lint规则4.配置规则stylelint目前是一些工作人员翻译的中文文档。排斥阅读英文文档的学生可以查看中文文档。我们首先需要安装三个npm包来帮助我们完善规则排序代码属性时格式化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":"Expectedclassselectortobekebab-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,//shorthandproperty"number-leading-zero":"never",//没有0的小数"declarification-block-no-duplicate-properties":true,//禁止声明快速重复的属性"no-descending-specificity":true,//禁止低优先级选择器被优先级选择器覆盖"selector-max-id":0,//限制一个选择器中ID选择器的个数"max-nesting-depth":3,"indentation":[2,{//指定缩进警告提醒"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-position','list-style-image','pointer-events','cursor',"background","background-color","border","border-radius",'content','outline','outline-offset','opacity','filter','visibility','size','transform',],}};processors属性这次没有用到，就不介绍了，有兴趣的同学可以查看官方文档。插件是由社区创建的规则或规则集，支持方法论、工具集、非标准CSS功能或非常具体的用例。extends继承了现有的配置文件。（在我的配置中，它继承了css-module和官方推荐的配置）rules规则决定了检测器要找什么，要解决什么。因此，通过该选项，您可以启用相应的规则并进行相应的检测。所有规则都必须明确配置，因为没有默认值。另外这里也可以配置defaultSeverity和ignoreFiles，有需要的同学可以去文档中找。由于我已经在配置文件中注释了相应的规则，说明了它的作用，如果有同学对此有疑问，欢迎留言或者加我为好友进行交流~注：null为禁用规则。您可以在规则中覆盖官方推荐的配置规则。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。少6。自动格式化完成上面的配置后，其实我们已经达到了规范的目的，但是如果每次都要运行lint，无疑会增加我们的编码负担。下面介绍两种在我们编写样式代码时自动格式化代码的方法。6.1stylelintvs-code插件我们可以在vs-code插件市场搜索stylelint插件。看起来像这样。你可以看到这里是黑色的。这是因为我没有使用这个插件，它有一些错误。简单介绍下bug：antd-overrides中有一些代码通过了我们配置的lint规则，但是没有这个插件，我们会报一个CssSyntaxError。而且在删除一些问题代码后，这个插件会报一些逻辑代码错误。这是我不能接受的。于是果断放弃。大家可以根据自己项目的实际情况来选择~6.2webpackplugin你可以很容易的找到webpack的stylelint-plugin。说明这个插件已经被广泛使用了~大家可以放心的访问。为什么一个webpack插件可以帮我们格式化样式代码呢？因为这个插件会在我们热更新重编译的时候帮我们检测代码。并按照.stylelintrc.js文件中配置的规则进行修复。如果出现lint错误，您可以选择禁用该项目，以避免将没有lint的样式上传到代码库。所以在使用这个插件的时候踩了很多坑，下面一一说说。6.3插件踩坑亮点在一开始。按照百度各种大神的写法，只需要这样配置即可：newStyleLintPlugin({context:"src",configFile:path.resolve(__dirname,'./stylelintrc.js'),files:'**/*.less',failOnError:false,quiet:true,syntax:'less'})结果是可预测的，无用的。最可怕的是，他会给你一种你在本地运行没有任务问题的错觉，让你误以为自己的代码没有问题！事实上，这个插件不起作用。另外，这个配置如果用stylelint的vscodeextension，会出现一大堆让你脑洞大开的红波~~~~。在我踩坑之后，终于完成了一个没有报错，没有伪装，没有查错，没有忽略我无视配置的配置！新的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又是关键！！！！请务必添加此配置。来自百度的大佬配置使用语法。这个配置已经过时了，需要使用customSyntax，值必须是你之前安装的postcss-lesspackage。这个配置甚至在官方的webpack文档中也没有。我准备提出一个问题。lintDirtyModulesOnly仅检查更改的文件，并在启动时跳过检查。threads会根据cpu的多少自动决定pool的大小。exclude这个很重要。因为我在实践中发现webpack-plugin并没有读取我在.stylelintignore中配置的忽略规则，导致项目运行的时候出现了很多错误。必须匹配！！！！7.Commit检测这个比较简单。如果项目之前在eslint中配置了commit检测，只需要在脚本中添加检测样式即可。配置如下"lint-staged":{"*.{ts,tsx}":["eslint--extjs,ts,tsx--fix","gitadd"],"*.less":["stylelint--fix--custom-syntaxpostcss-less","gitadd"]}这里其实不需要运行yarnlint:css，因为这样的话，src下的所有样式都会被完整检测到在commit的时候，但实际上我们只需要检查修改过的文件。特别注意：一定要加上--custom-syntaxpostcss-less。好吧，我们开始吧。...还没结束。下面来梳理一下stylelint的工作流程。stylelintrc配置规则。package.json配置脚本命令.stylelintignore配置忽略规则stylelint-webpack-plugin配置自动格式化规则lint-staged配置提交规则运行项目时首先读取.stylelintrc文件，根据代码里面的规则通过webpack-plugin检查,自动格式化。运行lint:css时，它会读取.stylelintignore并忽略相关文件。修改代码后commit时，lint-staged会帮我们做一个pre-commit测试，避免上传未格式化的代码。7.1梳理流程发现的坑完成stylelint的配置后，就开始了激情的coding环节。但是，当我根据设计图为元素设置具有透明度的颜色rgba时。一个贴心的插件将帮助我将rgba格式化为rbg颜色。像这样：自动格式化后，哔哔声变成这样rgb(000/12%)这是什么？一开始我还不在意，直到我发现页面上的样式变成了这样，我是不是很可笑，你随便格式化，怎么变成这样了？？？于是急忙去百度，百度也没找到答案。..然后又google了一下，终于找到了一个看起来像是解释简单的答案。这是一个相对较新的css规范。sass规范还不支持它。比喻我少。也就是我的less规范还不支持。因为项目中使用的less版本是3+。它还不是最新的。所以不支持也很正常。我的less识别我新规范的RGBwithtransparency作为第三个参数除法之后的/。0除以12%大声告诉我它是什么？还是0，所以我的less没有错，错的是这个世界！抱着试一试的心态，去浏览器直接写了个rgb(000/12%)，看看支持不支持。结果如下：是的，浏览器支持！那好办。摆在我们面前的解决方案有两种，让less支持这个colorvaluescheme，让stylelint不格式化。有了方法，我搜索了less的官方仓库的changelog。提到了halfrgb这个词，但它没有。也可能是我眼睛不太好~~。总之第一种方法失败了。那么我们使用第二种方法，首先我们需要知道stylelintformatrgbaintorgb的规则是什么。我已经尝试了很多。并且做了很多百度。正是我所期望的。百度不到。尝试也不对。路变窄了。于是我改变主意，去看了官方推荐的stylelint-config-standard配置库。如图：请注意，红框的颜色在23版本已经是百分比了，这个也是最新版本，也是我项目中的版本。所以可以肯定的是，这个库肯定帮我格式化了！！！那么如何让他不格式化呢？去查看这个库的其他版本，但是如果有哪个版本出现了rgba，那么这个版本就不会自动格式化了。付出就有收获。只找了一个版本，找到了，于是把项目里的库版本降级了~，这样rgba就不会格式化成rgb了！你完成了。后记遇到问题不可怕，可怕的是百度找不到答案。如果百度不到，可以google一下。记住记住。
