国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

引入stylelint對CSS/Sass做代碼審查

klinson / 1054人閱讀

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

規范越早引入越好，規范的約束永遠不嫌多。
stylelint是什么？

stylelint 是一個基于 Javascript 的代碼審查工具，它易于擴展，支持最新的 CSS 語法，也理解類似 CSS 的語法。此外，因為它是基于 JavaScript，所以比起 Ruby 開發的 scss-lint 速度更快。

stylelint 是一個強大和現代的 CSS 審查工具，有助于開發者推行統一的代碼規范，避免樣式錯誤。stylelint 由 PostCSS 提供技術支持，所以它也可以理解 PostCSS 解析的語法，比如 SCSS。

PostCSS 是一個使用 JS 解析樣式的插件集合，它可以用來審查 CSS 代碼，也可以增強 CSS 的語法（比如變量和混合宏），還支持未來的 CSS 語法、行內圖片等等。正因為PostCSS解析器，因此stylelint支持SCSS，Less以及新SugarSS。如果你想要實現另外一個自定義語法的支持，你可以通過PostLess得以實現！

PostCSS 的哲學是專注于處理一件事，并做到極致，目前它已經有了 200 多個插件，由于它們都是基于 JavaScript 編寫的，所以運行速度非常快。

使用方法

上面copy寫了一堆廢話，其實不用我多言，既然你已經知道了stylelint那說明你已經遇到了css/scss不規范的難題且已經發現了stylelint的優點。下面，我們直接進入正題。

安裝 
npm install stylelint
引入

在package.json里面加入以下配置（參考），其中rules`里面是我自己加入的一些配置。

"stylelint": {
    "extends": "stylelint-config-standard",
    "rules": {
      "string-quotes": "single",
      "property-no-unknown": [
        true,
        {
          "ignoreProperties": [
            "composes"
          ]
        }
      ],
      "selector-pseudo-class-no-unknown": [
        true,
        {
          "ignorePseudoClasses": [
            "global"
          ]
        }
      ]
    }
  }

在這里要重點說一下stylelint-config-standard，該配置是 stylelint 的官方推薦配置，自己基于它來拓展的話會事半功倍。

在代碼commit時校驗

我們需要的結果是，在代碼commit時進行css/scss校驗，不符合格式的代碼禁止提交。

這里，我們需要借助husky來配置github hooks。

npm install husky --save-dev

在package.json里面加入：

// Edit package.json
{
  "scripts": {
    "precommit": "stylelint css/*.scss",
    "...": "..."
  }
}

其中后面的目錄可以自己修改，這樣，就實現了在commit前進行css/scss代碼校驗。

插件

光在代碼提交前校驗還是不夠的，我們追求的是，在寫了不符合規范的css/scss代碼后，直接在編輯器中編輯器中提示。

WebStorm

WebStorm天然支持stylelint，只需在設置里面開啟并配置安裝包path即可。

sublime

SublimeLinter-contrib-stylelint

Atom

linter-stylelint

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

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

相關文章

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

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

    番茄西紅柿 評論0 收藏0

  • 【Cute-Webpack】Webpack4 入門手冊（共 18 章）

    摘要：介紹背景最近和部門老大，一起在研究團隊前端新手村的建設，目的在于幫助新人快速了解和融入公司團隊，幫助零基礎新人學習和入門前端開發并且達到公司業務開發水平。 showImg(https://segmentfault.com/img/remote/1460000020063710?w=1300&h=646); 介紹 1. 背景 最近和部門老大，一起在研究團隊【EFT - 前端新手村】的建設...

    AlanKeene 評論0 收藏0

  • 從 0 到 1 再到 100, 搭建、編寫、構建一個前端項目

    摘要：從到再到搭建編寫構建一個前端項目選擇現成的項目模板還是自己搭建項目骨架搭建一個前端項目的方式有兩種選擇現成的項目模板自己搭建項目骨架。使用版本控制系統管理源代碼項目搭建好后，需要一個版本控制系統來管理源代碼。 從 0 到 1 再到 100, 搭建、編寫、構建一個前端項目 1. 選擇現成的項目模板還是自己搭建項目骨架 搭建一個前端項目的方式有兩種：選擇現成的項目模板、自己搭建項目骨架。 ...

    call_me_R 評論0 收藏0

  • 從 0 到 1 再到 100, 搭建、編寫、構建一個前端項目

    摘要：從到再到搭建編寫構建一個前端項目選擇現成的項目模板還是自己搭建項目骨架搭建一個前端項目的方式有兩種選擇現成的項目模板自己搭建項目骨架。使用版本控制系統管理源代碼項目搭建好后，需要一個版本控制系統來管理源代碼。 從 0 到 1 再到 100, 搭建、編寫、構建一個前端項目 1. 選擇現成的項目模板還是自己搭建項目骨架 搭建一個前端項目的方式有兩種：選擇現成的項目模板、自己搭建項目骨架。 ...

    wzyplus 評論0 收藏0

  • 從 0 到 1 再到 100, 搭建、編寫、構建一個前端項目

    摘要：從到再到搭建編寫構建一個前端項目選擇現成的項目模板還是自己搭建項目骨架搭建一個前端項目的方式有兩種選擇現成的項目模板自己搭建項目骨架。使用版本控制系統管理源代碼項目搭建好后，需要一個版本控制系統來管理源代碼。 從 0 到 1 再到 100, 搭建、編寫、構建一個前端項目 1. 選擇現成的項目模板還是自己搭建項目骨架 搭建一個前端項目的方式有兩種：選擇現成的項目模板、自己搭建項目骨架。 ...

    aristark 評論0 收藏0

發表評論

0條評論

最新活動
閱讀需要支付1元查看
<