????最近呢，公司在準備新項目的開發，前期開始準備很多將來用到的東西，前兩天剛在研究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主要的東西，還是要看官網英文文檔。別的地方相關的文章暫時還不算多。
