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 审查工具，有助于开发者推行统一的代码规范，避免样式错误。stylelint 由 PostCSS 提供技术支持，所以它也可以理解 PostCSS 解析的语法，比如 SCSS。
PostCSS 是一个使用 JS 解析样式的插件集合，它可以用来审查 CSS 代码，也可以增强 CSS 的语法（比如变量和混合宏），还支持未来的 CSS 语法、行内图片等等。
PostCSS 的哲学是专注于处理一件事，并做到极致，目前它已经有了 200 多个插件，由于它们都是基于 JavaScript 编写的，所以运行速度非常快。
stylelint 作用
错误捕获
有些stylelint规则旨在找出明显的错误，如拼写错误或者由于你的心烦意乱或者睡眼惺忪时制造的疏漏。例如，你可以禁止空白块，无效的十六进制值，重复的选择器，未命名的动画名称和错误的线性渐变的语法。
其它的规则都是尽自己最大的努力捕捉更细微的错误。 这里有一条规则: 当你使用可以覆盖其属性同行(如margin-top)的速记属性时(如margin)，就会发出警告，因为这可能是由于你的疏忽造成的。另外，还有一种规则会警告你:当出现混乱局面时，如规则Ａ出现在规则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主要的东西，还是要看官网英文文档。别的地方相关的文章暂时还不算多。