成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專欄INFORMATION COLUMN

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

番茄西紅柿 / 2153人閱讀

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

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

現(xiàn)在已經(jīng)是 9102 年了，網(wǎng)上許多教程和分享帖都已經(jīng)過期，照著他們的步驟來會踩一些坑，如 stylelint-processor-html 已經(jīng)不再維護，以及 --fix 之后 .vue 文件只剩下

但是隨之而來的是一個常見錯誤：你在文件頭部忽略了對瀏覽器前綴的提示，卻在另一個遙遠的地方由于暫時性允許同名屬性，通過 /* stylelint-enable */ 把之前所有忽略的規(guī)則都重新開啟了。所以一定要注意，只 enable 對應(yīng)的規(guī)則，形成呼應(yīng)：

其他注意事項

  1. 解析 .vue 文件（單文件組件）時請勿使用 processors

    網(wǎng)上一些過時的教程包括 github 上的討論都推薦使用 stylelint-processor-html 或者 @mapbox/stylelint-processor-arbitrary-tags 來解析 html 或 vue 中的 css ，這本身并沒有什么問題，但是這個插件有個 bug ，當指定 stylelint 的 --fix 后將會把 vue 文件中 以外的部分刪掉。

    我們使用自定義語法 postcss-html 或者保留 stylelint-scss 插件就足夠了。

  2. 一些規(guī)則在跑 --fix 選項時是有 bug 的

    比如 declaration-block-semicolon-newline-after 設(shè)置 "always" 時，不允許多條 css 規(guī)則寫在一行，但自動修復(fù)后可能會出現(xiàn)縮進不正確：

    修復(fù)后（示例，之前配置時沒嘗試去找必現(xiàn)路徑）：

    如果你也出現(xiàn)這種情況，可以再指定 indentation 規(guī)則的基準縮進（ baseIndentLevel ）：

    module.exports = {
    ...
    rules: {
        ...
        'indentation': [2, {
            'baseIndentLevel': 1,
        }],
        'declaration-block-semicolon-newline-after': 'always'
    }
};

參考鏈接

  1. Prettier + Stylelint: Writing Very Clean CSS (Or, Keeping Clean Code is a Two-Tool Game)
  2. 如何在Vue+Webpack下配置Stylelint - 簡書
  3. vue單文件組件lint error自動fix及styleLint報錯自動fix - segmentfault
  4. Stylelint in .vue - 掘金



本文基于 知識共享署名-非商業(yè)性使用-相同方式共享 4.0 國際許可協(xié)議 發(fā)布，歡迎引用、轉(zhuǎn)載或演繹，但是必須保留本文的署名 BlackStorm 以及本文鏈接 http://www.cnblogs.com/BlackStorm/p/add-stylelint-to-your-vue-project.html ，且未經(jīng)許可不能用于商業(yè)目的。如有疑問或授權(quán)協(xié)商請與我聯(lián)系。

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

轉(zhuǎn)載請注明本文地址：http://m.hztianpu.com/yun/1365.html

相關(guān)文章

  • 工程搭建---代碼風格統(tǒng)一

    摘要：為此我們需要安裝這個是用于提交代碼的鉤子函數(shù)安裝完之后，我們就需要在增加運行鉤子函數(shù)。等鉤子函數(shù)這樣就簡單的成功對代碼進行效驗了，當然這邊更進一步的可以使用這個可以將取得所有被提交的文件依次執(zhí)行寫好的任務(wù)。 一個項目是會有多個成員來開發(fā)的，因此統(tǒng)一開發(fā)規(guī)范是很有必要的，不然每個人都有自己的風格，同步之后代碼都會報錯。我這邊是用Vscode編譯器的。 首先用vue-cli3.0創(chuàng)建一個工...

    levius 評論0 收藏0

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

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

    call_me_R 評論0 收藏0

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

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

    wzyplus 評論0 收藏0

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

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

    aristark 評論0 收藏0

  • 【翻譯】用PostCSS改善你的CSS代碼質(zhì)量

    摘要：代碼質(zhì)量這個術(shù)語對于程序員來說并不陌生。在本文中，我們將探討我們?nèi)绾文軌蚶脦椭覀?，保持我們的代碼質(zhì)量更高。怎樣使用在這篇文章中，我們重點介紹幾個插件，可以幫助我們提高代碼質(zhì)量。使用相當簡單的。這兩個插件可用于代碼分析。 代碼質(zhì)量這個術(shù)語對于程序員來說并不陌生。畢竟，每個開發(fā)人員都知道，代碼只是能工作是不夠的。它還應(yīng)該具備其他要素：它應(yīng)該是可讀的，良好的格式和一致性。它也應(yīng)該符合一些...

    sorra 評論0 收藏0

發(fā)表評論

0條評論

閱讀需要支付1元查看
<