神刀安全网

web学习笔记06-stylelint初探

    最近呢,公司在准备新项目的开发,前期开始准备很多将来用到的东西,前两天刚在研究vue.js,有空补上一篇文章讲讲我在vue.js里面的小感想,今天开始研究新的stylelint,一个用来标准化css和scss代码的工具吧算是。这篇文章也基本上算是一个引导式的,没有研究的很深,在将来的应用过程中,遇到些什么有意思的事情,以后也会补上来,这篇呢就暂且只是对stylelint进行一个简单的介绍,和简单的应用,具体的配合一些别的技术的应用我还是要摸索,我这就跟读书笔记一样,记一下大体的内容,具体的东西还是需要大家去官网看英文文档。stylelint其实还是挺有意思的一个东西。

stylelint简单了解

    团队合作的时候,编写代码总会出现各种各样的问题,尤其是在样式的编写中,大量的css和scss代码书写中,或多或少会出现问题,这个时候在查找问题的来源的时候,总会浪费很多时间。

    或者有时候呢,会编写出一些带有自己个人风格的样式代码,偶尔夹杂着一些自己写的一些小错误在其中,当时并未发现,之后随着时间的推移,代码库里的代码量的增多,在团队合作中,同事使用你的代码的时候或多或少的出现了问题,又或者是使用了错误的代码风格,导致给后期优化修改时带来了诸多不便。

    这个时候呢,就需要一个可以检查出自己代码或者格式出现问题的工具了。跟js等代码一样,css也需要检查。当然,css检查代码的工具已经有很多出现了,不过我们这次呢,研究的是可以检查css和scss的stylelint。

    审查有什么作用呢?审查是一个检查代码是否符合编程规范以及查找代码错误的过程,如果要做个比喻,那么它就是编程语言的拼写检查工具。代码审查可以帮助独立开发者更好的维护代码,但它更大的能力是帮助团队维护代码。

stylelint 简介

    stylelint 是一个基于 Javascript 的代码审查工具,它易于扩展,支持最新的 CSS 语法,也理解类似 CSS 的语法。此外,因为它是基于 JavaScript,所以比起 Ruby 开发的 scss-lint 速度更快。

    stylelint 是一个强大和现代的 CSS 审查工具,有助于开发者推行统一的代码规范,避免样式错误。stylelintPostCSS 提供技术支持,所以它也可以理解 PostCSS 解析的语法,比如 SCSS

    PostCSS 是一个使用 JS 解析样式的插件集合,它可以用来审查 CSS 代码,也可以增强 CSS 的语法(比如变量和混合宏),还支持未来的 CSS 语法、行内图片等等。

    PostCSS 的哲学是专注于处理一件事,并做到极致,目前它已经有了 200 多个插件,由于它们都是基于 JavaScript 编写的,所以运行速度非常快。

stylelint 作用

错误捕获

    有些stylelint规则旨在找出明显的错误,如拼写错误或者由于你的心烦意乱或者睡眼惺忪时制造的疏漏。例如,你可以禁止空白块,无效的十六进制值,重复的选择器,未命名的动画名称和错误的线性渐变的语法。

    其它的规则都是尽自己最大的努力捕捉更细微的错误。 这里有一条规则: 当你使用可以覆盖其属性同行(如margin-top)的速记属性时(如margin),就会发出警告,因为这可能是由于你的疏忽造成的。另外,还有一种规则会警告你:当出现混乱局面时,如规则A出现在规则B之前,但是实际上覆盖了规则B,因为规则A的的选择器具有更高的优先级(如,规则A为.foo.bar{···},规则B为 .foo{···})。这是一种十分棘手的情况。

    还有一种规则使用了PostCSS的doiuse插件,用于检查你的浏览器是否支持此样式。另外一种则使用了css-colorguard插件用于提示颜色的相似性,以免造成你的混乱使用。(请注意: 这是基于PostCSS之上的stylelint的主要优势之一:相比于其它PostCSS 插件,用很少的努力,stylelint就可以进行提示。)

强制执行最佳实践

    如果你在样式表中使用了系统方法,或者对你的代码设置了一个样式指南,你应该取缔这些模式了。stylelint已经提供了这些功能。

    首先,你需要狠狠地控制你的选择器。使用stylelint,你可以禁止超过一定特异性的选择器或者在嵌套深度上设置限制。你可以禁止类别选择器(例如没有 id的选择器),并对其余的选择器使用正则表达式进行命名约定。

    你可以禁止!important的使用,或者你的浏览器并不支持的brower hacks。如果你使用Autoprefixer(或者说你应该使用),你可以禁止在源样式表中使用供应商前缀。

    如果你想要更加严谨 — 你可以花费一些时间在配置上,以保证绝对的一致性 — 你可以强制执行样式表属性的顺序,并为黑名单,白名单提供属性,值,函数还有单位。

执行代码样式的约定

    stylelint具有自动执行代码样式的约定,所以你和你的队友无需主动设置。我们致力于使这些规则更加全面灵活。

    这些规则主要针对于空格,但是同样针对于其它的细节,如;引号,大小写字母,在小数前写零,使用关键字以及拼读出值等等。

    梦想你和你的队友可以建立一个格式约定(例如我们始终在声明冒号之后留有一个空格),并在你的stylelint配置中进行修改,之后你们就不会为此再次讨论。让其执行于机器王国。

制定以及扩展一切

    Nicholas Zakas,ESLint(以及 CSS Lint)的创作者,写到ESLint的成功在于它的扩展性。stylelint试图遵循ESLint的领先优势,并且提供给CSS 作者一个linter,同样具有扩展性。

    你可以书写并且发布自己的规则插件。现在已经具有了一大堆可以使用的;并且我们渴望看到别人的优秀插件。

    配置是可扩展的,因此可以共享。至于插件,我们从ESLint了解了这一功能的价值性。检查其中包括WordPress和SUITCSS配置的,并且已经公布的。

    如果你不喜欢 stylelint 的内置提示,你可以手工创建属于你自己的风格,甚至可以为你的组织进行创建。你还可以自定义用于提供警告信息的规则。

    使用stylelint的API,你可以创建文本编译器的插件,并进行测试使stylelint 融入到你的工作流的每个方面。

stylelint 使用

安装

npm install -g stylelint

使用

创建配置文件(三种方式)

    1..stylelintrc

{     "rules": {         "declaration-block-trailing-semicolon": null     } }

    2.stylelint.config.js

module.exports = {     "rules": {         "declaration-block-trailing-semicolon": null     } }

    3.package.json

{     ......     "stylelint": {         "rules": {             "color-hex-case": "lower"         }     } }

官方配置方法

    1.本地安装:

npm install stylelint-config-standard

    2.在配置文件.stylelintrc中配置

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

    3.添加或修改标准配置中的内容

{     "extends": "stylelint-config-standard",     "rules": {         "declaration-block-trailing-semicolon": null     } }

运行

    我在scss文件里面写

$primary-color: #ff3253; div{     background-color: #0859BD; }

    在配置文件中添加

"color-no-hex":true

    命令行运行

stylelint yourfile.css //stylelint "src/style/scss/base.scss"
web学习笔记06-stylelint初探
运行

具体demo测试

1.创建工程和文件

web学习笔记06-stylelint初探
创建工程和文件

2.编写简单的代码

index.html

<!DOCTYPE html> <html lang="en"> <head>         <meta charset="UTF-8">     <title>index</title>     <link href="index.css" rel="stylesheet" type="text/css"/> </head> <body>     <div id='root'>         <p class="nihao">nihao</p>     </div> </body> </html>

index.css

#root{     background-color: #0859BD; } .nihao{     font-size: 18px;     color: #fff000; }

3.创建package.json文件

npm init

4.安装stylelint

npm install stylelint-config-standard

5.创建stylelint.config.js文件,编写规则

module.exports = {     "rules": {         "color-no-hex":true//不允许十六进制颜色     } }

6.运行测试

stylelint index.css

7.根据结果修改

index.css  2:23  ✖  Unexpected hex color "#0859BD"   color-no-hex  6:12  ✖  Unexpected hex color "#fff000"   color-no-hex

这就算是一个简单的demo实现了。

stylelint 规则

规则rules
规则有一百多条,我就不在这一一列举了,以后有时间的话我会加上的。主要是目前用这个的人没有想象中的那么多,我在这基本上算是给一些像我一样的新手做个指引,少走些弯路,关于stylelint主要的东西,还是要看官网英文文档。别的地方相关的文章暂时还不算多。

参考:

使用stylelint对CSS/Sass做代码审查

使用 stylelint检查CSS_StyleLint

转载本站任何文章请注明:转载至神刀安全网,谢谢神刀安全网 » web学习笔记06-stylelint初探

分享到:更多 ()

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址