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"
运行

具体demo测试

1.创建工程和文件

创建工程和文件

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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 151,688评论 1 330
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 64,559评论 1 273
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 101,749评论 0 226
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 42,581评论 0 191
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 50,741评论 3 271
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 39,684评论 1 192
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,122评论 2 292
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 29,847评论 0 182
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 33,441评论 0 228
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 29,939评论 2 232
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 31,333评论 1 242
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 27,783评论 2 236
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 32,275评论 3 220
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 25,830评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,444评论 0 180
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 34,553评论 2 249
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 34,618评论 2 249

推荐阅读更多精彩内容