iT邦幫忙

0

Vue.js - 使用 StyleLint 來整理 CSS 吧!

繼上次的 ESLint 後,這次要來介紹的是 StyleLint,那就廢話不多說開始吧!

StyleLint

StyleLint 一個檢查 CSS Coding Style 的工具,與 ESLint 一樣有 AirbnbStandard 的規範可供選擇,也可以設定自己的規則

VSCode

首先一樣要先安裝 VSCode 內的 StyleLint 插件,它可以幫助我們共容易的 debug
VSCode - StyleLint

接著在 VSCode 內設定存檔時可自動修正錯誤

// settings.json

{
  "editor.codeActionsOnSave": {
    "source.fixAll.stylelint": true
  }
}

安裝 StyleLint

由於 StyleLint 不像 ESLint 那樣有整合在 Vue CLI 內,所以開好專案之後要自己做設定,不過這些在官網都有教學,所以照著做就對了~

  1. 安裝 StyleLint 與 Standard 規範
$ npm install --save-dev stylelint stylelint-config-standard
  1. 然後在根目錄建立 .stylelintrc.json 寫入設定 (亦可使用 .js 或是 .yaml)
// .stylelintrc.json

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

因為一開始我們 VSCode有裝插件,所以做到這裡如果存檔就會自動修正錯誤囉

  1. 檢查錯誤與修正錯誤可於終端機輸入以下指令
// 檢查錯誤
$ npx stylelint "**/*.css"
// 修正錯誤
$ npx stylelint "**/*.css" --fix

或是在 package.json 內設定

// package.json

{
  "scripts": {
    "check:style": "stylelint **/*.css",
    "lint:style": "stylelint **/*.css --fix"
  }
}

StyleLint 結合 Scss

StyleLint 若要結合 Scss 也是可以的,但是要另外安裝 stylelint-config-sass-guidelines 這個插件使,它使 StyleLint 支援 Scss 語法,並加入了許多 Scss 的規則可供設定

首先使用 npm 安裝插件

$ npm install --save-dev stylelint-config-sass-guidelines

接著一樣在 .stylelintrc.json 內設定即可使用

// .stylelintrc.json

{
  "extends": ["stylelint-config-standard", "stylelint-config-sass-guidelines"]
}

忽略檔案

如果不想被 StyleLint 監控的檔案可以使用以下方法,基本上設定的方法跟 ESLint 大同小異,詳細的也可以看看官網

  1. 在檔案內首行加入 /* stylelint-disable */ 以忽略整個檔案
/* stylelint-disable */
a {}
  1. 在樣式前加入 /* stylelint-disable-next-line */ 以忽略該行
#id {
  /* stylelint-disable-next-line */
  color: pink !important;
}
  1. .stylelintrc.json 內設定需要忽略的檔案
// .stylelintrc.json

{
  ignoreFiles: ["dist/**/*", "src/assets/scss/abc.scss"]
}

自訂規則

除了使用一開始設定的 Standard 規則外,我們還可以在 .stylelintrc.json 內添加自己喜歡的規則,可以使用的規則列表在這裡

以下舉例一個小弟自己習慣的排序設定

// .stylelintrc.json

{
  rules: {
    "order/properties-alphabetical-order": null, // 不照字母順序排序
    "order/properties-order": [ // 設定自己的排序
      "position",
      "top",
      "right",
      "bottom",
      "left",
      "z-index",
      "display",
      "justify-content",
      "align-items",
      "float",
      "clear",
      "overflow",
      "overflow-x",
      "overflow-y",
      "padding",
      "padding-top",
      "padding-right",
      "padding-bottom",
      "padding-left",
      "margin",
      "margin-top",
      "margin-right",
      "margin-bottom",
      "margin-left",
      "width",
      "min-width",
      "max-width",
      "height",
      "min-height",
      "max-height",
      "font-size",
      "font-family",
      "text-align",
      "text-justify",
      "text-indent",
      "text-overflow",
      "text-decoration",
      "white-space",
      "color",
      "background",
      "background-position",
      "background-repeat",
      "background-size",
      "background-color",
      "background-clip",
      "border",
      "border-style",
      "border-width",
      "border-color",
      "border-top-style",
      "border-top-width",
      "border-top-color",
      "border-right-style",
      "border-right-width",
      "border-right-color",
      "border-bottom-style",
      "border-bottom-width",
      "border-bottom-color",
      "border-left-style",
      "border-left-width",
      "border-left-color",
      "border-radius",
      "opacity",
      "filter",
      "list-style",
      "outline",
      "visibility",
      "box-shadow",
      "text-shadow",
      "resize",
      "transition"
    ]
  }
}

結語

程式碼排整齊真的讓人賞心悅目阿!上次的 ESLint 再加上這次的 StyleLint 可以說是無敵了吧!哈哈,希望大家以後寫 Code 都可以整整齊齊的啦~


尚未有邦友留言

立即登入留言