stylelint總結

MingjunYang 發布于2019-08-23 14:00 / 1232人閱讀

摘要：有一百多條校驗規則這些規則可以分為三類用于校對風格的規則用于判別代碼可維護性的規則以及用于判斷代碼錯誤的規則。所有規則默認都是關閉的。聲明后還需要在中使用它，具體規則名稱以及可能的取值需要去查看每個插件的文檔。

stylelint有一百多條校驗規則, 這些規則可以分為三類：用于校對風格的規則、用于判別代碼可維護性的規則、以及用于判斷代碼錯誤的規則。雖然條數眾多，但是不用怕，因為都是默認關閉的，我們可以靈活地進行配置

1、安裝

npm install stylelint --save-dev
npm install stylelint-config-standard --save-dev

其中stylelint是運行工具，stylelint-config-standard是推薦的配置，

2、配置文件

創建配置文件有3種方式：
（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"
        }
    }
}

主要的配置項有extends、rules等
extends
extends用來擴展配置項

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

rules
rules是一個對象，屬性名為規則名稱，屬性值為規則取值，它告訴stylelint該檢查什么，該怎么報錯。所有規則默認都是關閉的。
規則的類型不同，取值也不同。規則的取值請戳這里：規則的取值

{
  "rules": {
    "at-rule-blacklist": string|[],
    "at-rule-empty-line-before": "always"|"never",
    "at-rule-name-case": "lower"|"upper",
    "block-no-empty": true
    ...
  }
}

規則的值為null時表示禁用該規則

{
  "rules": {
    "block-no-empty": null
  }
}

rules還可以支持一些自定義配置，給規則傳遞一個數組即可，數組第一項是規則值，第二項是自定義配置。例如：
（1）指定錯誤級別：

"indentation": [2, { 
  "severity": "warning" 
}]

（2）自定義錯誤信息

"color-hex-case": ["lower", {
    "message": "Lowercase letters are easier to distinguish from numbers"
}]

plugins
插件一般是由社區提供的，對stylelint已有規則進行擴展，一般可以支持一些非標準的css語法檢查或者其他特殊用途。一個插件會提供一個或者多個檢查規則。
plugins聲明后還需要在rules中使用它，具體規則名稱以及可能的取值需要去查看每個插件的文檔。

{
  "plugins": [
    "../some-rule-set.js"
  ],
  "rules": {
    "some-rule-set/first-rule": "everything",
    "some-rule-set/second-rule": "nothing",
    "some-rule-set/third-rule": "everything"
  }
}

3、webpack的使用

webpack需要使用插件stylelint-webpack-plugin
具體用法如下：

var StyleLintPlugin = require("stylelint-webpack-plugin");
 
module.exports = {
  // ... 
  plugins: [
    new StyleLintPlugin(options),
  ],
  // ... 
}

簡單配置示例

stylelink.config.js

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

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

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

Lint Your Code

摘要：形成良好統一的代碼規范，有利于提高代碼的可讀性，減少潛在的錯誤，便于團隊協作開發。其中是可選的，如果沒有則禁用所有規則，如果有則禁用所有規則。也可以定義一個命令同時運行這兩個命令，我在這里使用了我們定義了在鉤子觸發時會執行命令。形成良好統一的代碼規范，有利于提高代碼的可讀性，減少潛在的錯誤，便于團隊協作開發。本文簡單介紹JS、CSS、 Git Commit 的規范工具及用法。 Lin...

hidogs 2019-08-23 10:27 評論0 收藏0
如何為你的 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