stylelint初體驗

SQC 發布于2019-08-29 11:05 / 1275人閱讀

摘要：當初在用的時候用過來檢查語法。現在用替代，而插件市場上那款插件目前不支持配置文件，有些不爽，于是研究了下其它相關插件。就在這個期間發現，粗粗看了看，甚合我意。所有配置項配置項說明配置項說明提示請使用花括號來包圍聲明。

當初在用sublime的時候用過csslint來檢查css語法。
現在用vscode替代sublime，而vscode插件市場上那款csslint插件目前不支持配置文件，有些不爽，于是研究了下其它相關插件。就在這個期間發現stylelint，粗粗看了看，甚合我意。主要有如下幾點：

支持配置文件

對less的支持程度比csslint好（粗粗看下來是比較好的）

~~可作為eslint插件使用~~

使用和eslint很像，定制化更高

資源

看了看github上的文檔，很快就安裝好。

所有配置項

配置項說明

配置項說明

提示：請使用花括號來包圍聲明。

規則

at-rule- 支持自定義黑白名單

代碼塊

block-opening-brace-和block-closing-brace- 大括號格式。
block-no- 兩個不允許

代碼塊內聲明不能為空

代碼塊內代碼不能寫在一行

顏色值

color- 顏色值，主要檢查十六進制

注釋

comment- 支持黑名單（感覺不太會用，還需要慢慢熟悉）

聲明

declaration-bang-space- 一條完整的聲明前后的空白格式
declaration-block-no- 三個不允許

不允許在一個代碼塊中重復申明

不允許出現忽略的屬性

不允許縮寫屬性,比如#333

declaration-block-properties-order 屬性出現的順序（視使用者的個人情況來決定要不要啟用）
declaration-block-semicolon-newline- 聲明后分號格式
declaration-block-single-line-max-declarations 一行中出現的申明最大條數
declaration-block-trailing-semicolon 每個代碼塊內最后一條申明必須帶上分號
declaration-colon- 聲明中冒號的格式
declaration-empty-line-before 每條申明前必須 | 禁止有空白行(不能有空格或tab等)
declaration-no-important 禁用!important
declaration-property-unit- 屬性單位黑白名單
declaration-property-value-屬性值黑白名單

字體

font-family-name-quotes 字體系列中命名時帶引號
font-weight-notation 字重的值使用命名還是數值

函數

function- 沒怎么用過css的函數,有待研究

通用配置

indentation 代碼縮進
keyframe-declaration-no-important keyframe申明中禁用!important
length-zero-no-unit 值為0時不使用單位
max-empty-lines 最大連續空行數
max-line-length 一行字符最大長度
max-nesting-depth 嵌套深度

待續

GPU云服務器云服務器初體驗 stylelint 初長成小白初

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/111420.html

如何為你的 Vue 項目添加配置 Stylelint

摘要：如何為你的項目添加配置如何為你的項目添加配置現在已經是年了，網上許多教程和分享帖都已經過期，照著他們的步驟來會踩一些坑，如已經不再維護，以及之后文件只剩下部分等。如有疑問或授權協商請與我聯系。如何為你的 Vue 項目添加配置 Stylelint 現在已經是 9102 年了，網上許多教程和分享帖都已經過期，照著他們的步驟來會踩一些坑，如 stylelint-processor-html 已經不...

番茄西紅柿 2019-04-23 11:56 評論0 收藏0
CSS代碼檢查工具stylelint

摘要：所以校驗規則的行動迫在眉睫。是一個強大的現代檢測器，可以讓開發者在樣式表中遵循一致的約定和避免錯誤。本文將詳細介紹代碼檢查工具概述擁有超過條的規則，包括捕捉錯誤最佳實踐控制可以使用的語言特性和強制代碼風格規范。但是，該命令一定要慎用。前面的話　　CSS不能算是嚴格意義的編程語言，但是在前端體系中卻不能小覷。 CSS 是以描述為主的樣式表，如果描述得混亂、沒有規則，對于其他開發者一定是一個定...

番茄西紅柿 2019-04-23 13:42 評論0 收藏0
引入stylelint對CSS/Sass做代碼審查

摘要：規范越早引入越好，規范的約束永遠不嫌多。是什么是一個基于的代碼審查工具，它易于擴展，支持最新的語法，也理解類似的語法。是一個強大和現代的審查工具，有助于開發者推行統一的代碼規范，避免樣式錯誤。規范越早引入越好，規范的約束永遠不嫌多。 stylelint是什么？ stylelint 是一個基于 Javascript 的代碼審查工具，它易于擴展，支持最新的 CSS 語法，也理解類似 CS...

klinson 2019-08-29 12:14 評論0 收藏0
stylelint 搭配 stylelint-order，更隨心所欲的編碼 CSS

摘要：對于而言，不能算是嚴格意義的編程語言，但是在前端體系中卻不能小覷。為什么這么難學不是科學，而是藝術所以校驗規則的行動迫在眉睫，立即執行。如何遵守提交的時候，以的形式人工校驗。以語法表示文件的路徑。嗯，這點很重要。原文鏈接：http://hangyangws.win/2017/06... 為什么需要校驗 CSS 規則對于編程語言進行「語法、書寫」校驗，能有效「歸并」不同開發者的「不...

Carson 2019-08-29 13:52 評論0 收藏0
推薦幾個前端開發插件

摘要：提高開發效率簡單的集成到了生成的項目上項目地址一集成管理團隊的信息步奏安裝添加規則根目錄添加文件，并添加規則，必須為格式添加到中安裝并添加命令在中添加查看詳情二集成管理團隊編寫規范步奏安裝提高開發效率簡單的集成到了vue-cli生成的項目上項目github地址 A Vue.js project Build Setup # install dependencies npm inst...

張憲坤 2019-08-23 12:07 評論0 收藏0