Stylelint in .vue

Eliaz發表於2019-03-04
Vue

Stylelint

個人理解上 stylelint 是一個css程式碼linter的工具，可以結合nodejs和cli進行使用。繼csslinter等linter之後，具有外掛化的功能，同postcss的外掛，webpack等都可以較好的整合進去。

如果說js的程式碼檢測和規範工具在jslint，jshint之後，你肯定聽說過eslint。同eslint對js程式碼校驗規則一樣，stylelint也有一套類似的處理系統.

update in 12/15

乾脆直接fork了vue-templates for webpack,直接fork這個專案，在本地創了一個stylelint的分支，修改meta.js,
增加了stylelint的相關配置.(使用的是現在最新的vue-cli的webpack模板，具體版本地址1.2.7)

所以現在只需要在本地type下面的內容

/* vue init username/repo your-projectName*/
vue init EliazTray/webpack#stylelint webpack-stylelint
複製程式碼

出現以下的內容，都勾選即可

Stylelint in .vue

然後在安裝完依賴之後

// 就可以對所有的.vue檔案進行處理了（支援.vue裡面的lang）
npm run lintcss:vue
複製程式碼

這個時候應該會有錯誤，顯示Expected empty line before rule rule-empty-line-before

// 類似eslint中新增--fix
npm run lintcss:vue -- --fix
複製程式碼

就可以發現這些這個錯誤被自動fix掉了（下文也說了有些錯誤是不支援自動fix掉的）

如果想要試試效果，可以將.vue檔案中隨意一處的color使用大寫的16進製表示.使用–fix就可以發現大寫被自動fix轉換成小寫了(是因為繼承了standard中的規則)

寫的挺小白文了，有疑問的話，可以交流，:)

TL;DR

1.使用vue-cli初始化一個工程

2.npm i stylelint stylelint-config-standard -D

3.在工程的根目錄下建立stylelint.config.js檔案，將以下內容複製進去。

module.exports = {
  "extends": "stylelint-config-standard",
  "rules": {
  }
}
複製程式碼

4.開啟package.json在scripts中插入

"scripts": {
    // 表示對所有的.vue檔案使用自定義的syntax去parse，自定義的syntax module就是postcss-html，並且使用--fix自動修復選項，去修復一些可以修復的規則。
  "lintcss:fix": "stylelint **/*.vue --custom-syntax postcss-html --fix"
}
複製程式碼

5.控制檯執行 npm run lintcss:fix，在控制檯看輸出，能夠修改的都會被修改（比如大寫的16進位制顏色會被轉成小寫），不能被修改的就需要手動修改問題，根據提示修改即可.

安裝

建議是本地安裝，每個專案都重新安裝一遍。

npm i stylelint -D
複製程式碼

因為不是全域性安裝(-g安裝)，所以一般呼叫的話需要藉助npm scripts,如果這個沒玩過,先去查閱相關資料.

// in package.json

···
···

{
  "scripts": {
    "lintcss": "stylelint **/*.css -s scss"
  }
}

···

複製程式碼

先說一個大的前提，很重要.

  • stylelint自動忽略node_modules和bower_modules下的linter校驗.
  • stylelint對檔名為css，.scss, .sass等具有字尾的檔案自動採用相關的syntax去解析，比如css是使用css，scss使用scss.如果你想要對.css檔案採用scss的語法去linter，就如上面你說些，使用-s或者--syntax的選項去重新指定載入的syntax.
  • stylelint 不能以資料夾作為stdin（不能src/，需要指定為src/*.scss），也沒有指定字尾名(eslint中–ext的功能)。如在eslint中使用eslint -ext .js,.vue 就可以對指定型別的檔案進行linter

規則

一般需要在專案根目錄建立一個有關stylelint的配置檔案

  • a stylelint property in package.json
  • a .stylelintrc file
  • a stylelint.config.js file exporting a JS object

對比eslint，eslint有.eslintrc.js

bebel用的就是.babelrc

所以stylelint我習慣上使用在根目錄建立一個stylelint.config.js的檔案，以module.exports的方式，輸出一些配置規則。

看下我工程中的配置。下面的stylelint-config-standard，stylelint-order需要安裝。

module.exports = {
  "extends": "stylelint-config-standard",
  "plugins": [
    "stylelint-order"
  ],
  "rules": {
    "order/order": [
      "declarations",
      "custom-properties",
      "dollar-variables",
      "rules",
      "at-rules"
    ],

    ····
    ····
  }
}

複製程式碼

一般extends是去繼承一個規則，一般使用的是stylelint-config-standard這個庫，這個庫是官方推薦，也是很多大公司，比如facebook，google就是使用這套css規則.

這裡我使用了一個排序的外掛，等會再說。是針對css屬性的位置書寫生效的.

在編輯器中使用stylelint

剛剛寫的都是基本的配置和一個介紹，是保證你能夠在感知一個stylelint是一個什麼東西的前提下寫的。

如果想要在編輯器中使用stylelint，如vscode,就很簡單，

1.在外掛庫中查詢stylelint
2.根據外掛的提示，修改一些使用者設定。但我測試，在我現在的版本是不需要這些配置都可以生效的。
3.想在特殊的語言塊中使用stylelint，比如vue檔案中，加上如下的設定即可.

// 使用者設定檔案中. 檔案->首選項->使用者設定
// 讓stylelint在vue元件中支援.
    "stylelint.additionalDocumentSelectors": [
        "vue"
    ]

複製程式碼

stylelint會根據根目錄中stylelint.config.js中的規則設定，去linter所有的.vue檔案，提示相關的語法錯誤.

這樣在coding 的時候就已經具有了自動提示錯誤的功能了.

自動修正

想象一下，eslint有–fix，同理stylelint也有–fix選項，不過stylelint的–fix只能修復一些問題，像大括號前面必須要有空格這些是不會自動幫你fix掉的，需要手動fix（官方文件說的也很清楚）

那這些都是對.css或者.scss，或者.sss等檔案進行–fix，但是如果一個特殊的檔案，如果也需要stylelint去linter，需要怎麼做，官方文件說的也很明白，使用pre-processor，先使用前處理器對對應的檔案進行–custom-syntax的parse處理。

強烈建議閱讀

解析非標準的語法

相關討論1

相關討論2

看了相關的issue，大概上（從今天算）下個版本（vue-cli下的webpack的新模板）應該會整合stylelint的相關設定。

所以對vue檔案的處理是

// package.json
{
  "scripts": {
    // 表示對所有的.vue檔案使用自定義的syntax去parse，自定義的syntax module就是postcss-html，並且使用--fix自動修復選項，去修復一些可以修復的規則。
    "lintcss:fix": "stylelint **/*.vue --custom-syntax postcss-html --fix"
  }
}
複製程式碼

這個postcss-html模組前幾天已經被built in stylelint,也就是已經內建了，所以安裝stylelint的時候不需要安裝postcss-html,這個postcss-html的作用就是解析非標準的語法，比如markdown和vue之類的，

使用相關外掛

在繼承stylelint-config-standard的之後,已經具有一些css規則，但是比如我會對css的抒寫屬性的順序有要求，這個時候需要啟用對css屬性順序的檢測（屬性順序由自己定義），主要是使用一個叫做stylelint-order的外掛,具體的配置如下。

先 npm i stylelint-order -D (已經安裝stylelint,stylelint-config-standard的前提)

// 我專案工程的配置，order是使用style-order的推薦屬性順序。
module.exports = {
  "extends": "stylelint-config-standard",
  "plugins": [
    "stylelint-order"
  ],
  "rules": {
    "order/order": [
      "declarations",
      "custom-properties",
      "dollar-variables",
      "rules",
      "at-rules"
    ],
    "order/properties-order": [
      "position",
      "top",
      "right",
      "bottom",
      "left",
      "float",
      ...
      ...
    ]
  }
}

複製程式碼

這樣我的css，scss抒寫的屬性規則就按照我的規則設定那樣，順序出現錯誤會幫助提示出來，然後使用–fix的時候自動校正為我設定的順序規則。

大概就是這樣了,挺有用的一個linter工具.還有結合在postcss或者webpack中具體讀者可以自己研究一下啦~

相關文章