怎样引入代码检查工具stylelint
导读:本文共5269.5字符,通常情况下阅读需要18分钟。同时您也可以点击右侧朗读,来听本文内容。按键盘←(左) →(右) 方向键可以翻页。
摘要: 前言团队合作时,当每个人的代码都拥有自定义的格式化方式时,在提交merge的时候往往要解决很多冲突,此时我们可以使用eslint+stylelint来对团队的代码进行约束。正文stylelint是一个强大的,现代的代码检查工具,可以帮助你在团队合作中强制执行样式约定。1. 安装stylelintyarnadd-Dstylelint2. 配置文件使用 stylel... ...
目录
(为您整理了一些要点),点击可以直达。团队合作时,当每个人的代码都拥有自定义的格式化方式时,在提交merge的时候往往要解决很多冲突,此时我们可以使用eslint
+stylelint
来对团队的代码进行约束。
stylelint是一个强大的,现代的代码检查工具,可以帮助你在团队合作中强制执行样式约定。
使用 stylelint检测器需要一个配置对象,你可以使用三种方式来创建这个对象。
package.json
中的stylelint 属性。
.stylelintrc.js
文件
stylelint.config.js
文件输出的js对象
一旦发现它们中的任何一个,将不再继续进行查找,进行解析,将使用解析后的对象。 本次使用的是.stylelintrc.js
文件来进行配置。
安装官方文档的说法你可以按照以下方法运行stylelint检测样式代码。
--fix
用来自动修复,但不能修复所有的问题。
由于我的项目里使用的样式语言是less。所以检测css是肯定不对的,所以这里我们需要做一点改动
于是我们可以运行这串代码了
yarn lint:css postcss-less
大家可以看到,这里报了一些提醒,简单翻译为让我们用对应的语法去解析我们的样式。而这对应的语法解析器是需要我们去安装的。
yarn add -D postcss-less
于是再次对脚本进行修改。
OK 到这里我们就可以正常的去跑lint命令对我们的样式代码进行格式化了。接下来我们来配置lint规则
我们首先需要安装三个npm包帮助我们完善规则
yarn add -D stylelint-config-standard stylelint-order stylelint-config-css-modules
stylelint-config-standard
是stylelint的推荐配置,stylelint-order
是用来在格式化css文件时对代码的属性进行排序。
stylelint-config-css-modules
是css-module
的方案来处理样式文件
我的配置文件长这样:
processors
属性由于此次并没有使用,所以不做介绍,有兴趣的同学可以查询官方文档。
plugins
是由社区创建的规则或规则集,支持方法论、工具集,非标准的 CSS 特性,或非常特定的用例。
extends
继承一个已存在的配置文件。(在我的配置中,继承了css-module和官方推荐的配置)
rules
规则决定检测器要查找什么和要解决什么,所以,通过该选项你就可以开启相应规则,进行相应的检测。所有规则必须显式的进行配置,因为没有默认值。
注意:null为禁用规则。可以在rules里面重写覆盖官方推荐的配置规则。
此时我们已经可以正常的使用stylelint来格式化样式代码了。但是在项目中往往会存在一些不需要格式化的代码,比如我们会单独抽离一个overrides文件来重写antd的样式。显然这里是不需要格式化的,因为antd的选择器命名可能跟我们的规范不尽相同。所以我们需要在运行lint时忽略这个文件。
我们可以在.stylelintrc.js
中配置ignoreFiles
。
创建.stylelintignore
文件。
我们可以通过/* stylelint-disable */
的方法,来对代码快进行忽略lint检测。
我采用的是第二种方法,配置如下:
在进行完上文的配置之后,其实我们已经达到了规范的目的,但是如果每次都要跑一次lint无疑就会加重我们的编码负担。这里介绍两种方式在我们写样式代码时,对代码自动格式化的方法。
为什么一个webpack插件可以帮助我们格式化样式代码呢,这是因为我们在热更新重新编译的时候,这个插件会帮我们检测代码。并根据.stylelintrc.js
文件中配置的规则进行fix。 如果有lint错误可以选择让项目无法运行,避免将没有lint的样式上传到代码库。
于是我在使用这个插件的时候踩了好多坑,接下来我一一的说。
最开始时。按百度到的各路大神的写法,只需要这么配置就可以:
结局不出意料,没有用。最恐怖的是他会给你一种假象,你本地运行的时候没有任务问题,让你误以为你的代码没有任何问题!其实,是这个插件没有作用到。
另外这么配置如果使用stylelint的vscode扩展时,还会有一大堆的让你心态爆炸的红波浪~~~~。
经过我的踩坑,终于完成了一个没有报错,没有假象,没有错误检查,没有忽略我的忽略配置的配置!
这个就比较简单了,如果项目之前配置过eslint时的commit检测,这里只需要在脚本中加入检测样式就可以。配置如下
这里其实是不需要跑yarn lint:css
的,因为如果这样在commit时会全量检测所有src
下的样式,然而其实我们只需要检测修改的文件即可。
特别注意:一定要加上--custom-syntax postcss-less
。
怎样引入代码检查工具stylelint的详细内容,希望对您有所帮助,信息来源于网络。