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

資訊專(zhuān)欄INFORMATION COLUMN

引入stylelint對(duì)CSS/Sass做代碼審查

klinson / 1043人閱讀

摘要：規(guī)范越早引入越好，規(guī)范的約束永遠(yuǎn)不嫌多。是什么是一個(gè)基于的代碼審查工具，它易于擴(kuò)展，支持最新的語(yǔ)法，也理解類(lèi)似的語(yǔ)法。是一個(gè)強(qiáng)大和現(xiàn)代的審查工具，有助于開(kāi)發(fā)者推行統(tǒng)一的代碼規(guī)范，避免樣式錯(cuò)誤。

規(guī)范越早引入越好，規(guī)范的約束永遠(yuǎn)不嫌多。
stylelint是什么？

stylelint 是一個(gè)基于 Javascript 的代碼審查工具，它易于擴(kuò)展，支持最新的 CSS 語(yǔ)法，也理解類(lèi)似 CSS 的語(yǔ)法。此外，因?yàn)樗腔?JavaScript，所以比起 Ruby 開(kāi)發(fā)的 scss-lint 速度更快。

stylelint 是一個(gè)強(qiáng)大和現(xiàn)代的 CSS 審查工具，有助于開(kāi)發(fā)者推行統(tǒng)一的代碼規(guī)范，避免樣式錯(cuò)誤。stylelint 由 PostCSS 提供技術(shù)支持，所以它也可以理解 PostCSS 解析的語(yǔ)法，比如 SCSS。

PostCSS 是一個(gè)使用 JS 解析樣式的插件集合，它可以用來(lái)審查 CSS 代碼，也可以增強(qiáng) CSS 的語(yǔ)法（比如變量和混合宏），還支持未來(lái)的 CSS 語(yǔ)法、行內(nèi)圖片等等。正因?yàn)镻ostCSS解析器，因此stylelint支持SCSS，Less以及新SugarSS。如果你想要實(shí)現(xiàn)另外一個(gè)自定義語(yǔ)法的支持，你可以通過(guò)PostLess得以實(shí)現(xiàn)！

PostCSS 的哲學(xué)是專(zhuān)注于處理一件事，并做到極致，目前它已經(jīng)有了 200 多個(gè)插件，由于它們都是基于 JavaScript 編寫(xiě)的，所以運(yùn)行速度非常快。

使用方法

上面copy寫(xiě)了一堆廢話(huà)，其實(shí)不用我多言，既然你已經(jīng)知道了stylelint那說(shuō)明你已經(jīng)遇到了css/scss不規(guī)范的難題且已經(jīng)發(fā)現(xiàn)了stylelint的優(yōu)點(diǎn)。下面，我們直接進(jìn)入正題。

安裝 
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"
          ]
        }
      ]
    }
  }

在這里要重點(diǎn)說(shuō)一下stylelint-config-standard，該配置是 stylelint 的官方推薦配置，自己基于它來(lái)拓展的話(huà)會(huì)事半功倍。

在代碼commit時(shí)校驗(yàn)

我們需要的結(jié)果是，在代碼commit時(shí)進(jìn)行css/scss校驗(yàn)，不符合格式的代碼禁止提交。

這里，我們需要借助husky來(lái)配置github hooks。

npm install husky --save-dev

在package.json里面加入：

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

其中后面的目錄可以自己修改，這樣，就實(shí)現(xiàn)了在commit前進(jìn)行css/scss代碼校驗(yàn)。

插件

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

WebStorm

WebStorm天然支持stylelint，只需在設(shè)置里面開(kāi)啟并配置安裝包path即可。

sublime

SublimeLinter-contrib-stylelint

Atom

linter-stylelint

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://specialneedsforspecialkids.com/yun/111770.html

相關(guān)文章

  • 如何為你的 Vue 項(xiàng)目添加配置 Stylelint

    摘要：如何為你的項(xiàng)目添加配置如何為你的項(xiàng)目添加配置現(xiàn)在已經(jīng)是年了，網(wǎng)上許多教程和分享帖都已經(jīng)過(guò)期，照著他們的步驟來(lái)會(huì)踩一些坑，如已經(jīng)不再維護(hù)，以及之后文件只剩下部分等。如有疑問(wèn)或授權(quán)協(xié)商請(qǐng)與我聯(lián)系。如何為你的 Vue 項(xiàng)目添加配置 Stylelint 現(xiàn)在已經(jīng)是 9102 年了，網(wǎng)上許多教程和分享帖都已經(jīng)過(guò)期，照著他們的步驟來(lái)會(huì)踩一些坑，如 stylelint-processor-html 已經(jīng)不...

    番茄西紅柿 評(píng)論0 收藏0

  • 【Cute-Webpack】Webpack4 入門(mén)手冊(cè)（共 18 章）

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

    AlanKeene 評(píng)論0 收藏0

  • 從 0 到 1 再到 100, 搭建、編寫(xiě)、構(gòu)建一個(gè)前端項(xiàng)目

    摘要：從到再到搭建編寫(xiě)構(gòu)建一個(gè)前端項(xiàng)目選擇現(xiàn)成的項(xiàng)目模板還是自己搭建項(xiàng)目骨架搭建一個(gè)前端項(xiàng)目的方式有兩種選擇現(xiàn)成的項(xiàng)目模板自己搭建項(xiàng)目骨架。使用版本控制系統(tǒng)管理源代碼項(xiàng)目搭建好后，需要一個(gè)版本控制系統(tǒng)來(lái)管理源代碼。 從 0 到 1 再到 100, 搭建、編寫(xiě)、構(gòu)建一個(gè)前端項(xiàng)目 1. 選擇現(xiàn)成的項(xiàng)目模板還是自己搭建項(xiàng)目骨架 搭建一個(gè)前端項(xiàng)目的方式有兩種：選擇現(xiàn)成的項(xiàng)目模板、自己搭建項(xiàng)目骨架。 ...

    call_me_R 評(píng)論0 收藏0

  • 從 0 到 1 再到 100, 搭建、編寫(xiě)、構(gòu)建一個(gè)前端項(xiàng)目

    摘要：從到再到搭建編寫(xiě)構(gòu)建一個(gè)前端項(xiàng)目選擇現(xiàn)成的項(xiàng)目模板還是自己搭建項(xiàng)目骨架搭建一個(gè)前端項(xiàng)目的方式有兩種選擇現(xiàn)成的項(xiàng)目模板自己搭建項(xiàng)目骨架。使用版本控制系統(tǒng)管理源代碼項(xiàng)目搭建好后，需要一個(gè)版本控制系統(tǒng)來(lái)管理源代碼。 從 0 到 1 再到 100, 搭建、編寫(xiě)、構(gòu)建一個(gè)前端項(xiàng)目 1. 選擇現(xiàn)成的項(xiàng)目模板還是自己搭建項(xiàng)目骨架 搭建一個(gè)前端項(xiàng)目的方式有兩種：選擇現(xiàn)成的項(xiàng)目模板、自己搭建項(xiàng)目骨架。 ...

    wzyplus 評(píng)論0 收藏0

  • 從 0 到 1 再到 100, 搭建、編寫(xiě)、構(gòu)建一個(gè)前端項(xiàng)目

    摘要：從到再到搭建編寫(xiě)構(gòu)建一個(gè)前端項(xiàng)目選擇現(xiàn)成的項(xiàng)目模板還是自己搭建項(xiàng)目骨架搭建一個(gè)前端項(xiàng)目的方式有兩種選擇現(xiàn)成的項(xiàng)目模板自己搭建項(xiàng)目骨架。使用版本控制系統(tǒng)管理源代碼項(xiàng)目搭建好后，需要一個(gè)版本控制系統(tǒng)來(lái)管理源代碼。 從 0 到 1 再到 100, 搭建、編寫(xiě)、構(gòu)建一個(gè)前端項(xiàng)目 1. 選擇現(xiàn)成的項(xiàng)目模板還是自己搭建項(xiàng)目骨架 搭建一個(gè)前端項(xiàng)目的方式有兩種：選擇現(xiàn)成的項(xiàng)目模板、自己搭建項(xiàng)目骨架。 ...

    aristark 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<