css代碼規範工具stylelint

導讀：

開源比較流行的CSS lint方案：csslint、SCSS-Lint、Stylelint。

咱們團隊選擇Stylelint，緣由以下：

• 其支持 Less、Sass 這類預處理器。團隊使用less
• 在社區活躍度上，有很是多的第三方插件。
• 在Facebook，Github，WordPress 等公司獲得實踐，可以覆蓋不少場景

stylelint

配置方式：

按順序查找，任何一項有值，就會結束查找

• 在package.json中的stylelint屬性指定規則

• 在.stylelintrc文件中指定，文件格式能夠是JSON或者YAML。也能夠給該文件加後綴，像這樣：.stylelintrc.json,.stylelintrc.yaml,.stylelintrc.yml,.stylelintrc.js

• stylelint.config.js文件，該文件exports一個配置對象span>

語法格式：

rules優先級大於extends，建議採用extends方式統一管理

module.exports = {
  processors: [],
  plugins: [],
  extends: "stylelint-config-standard", // 這是官方推薦的方式
  rules: {
    "at-rule-empty-line-before": "always"|"never",
    "at-rule-name-case": "lower"|"upper",
    "block-no-empty": true,
  }
};
複製代碼

插件列表：

• 插件通常是由社區提供的，對stylelint已有規則進行擴展，通常能夠支持一些非標準的css語法檢查或者其餘特殊用途。一個插件會提供一個或者多個檢查規則
• 插件地址

處理器列表：

• 你還能夠在stylelint的處理流中加入本身的處理函數，就是這裏的processors。 processors只能做爲命令和Node API使用，PostCss的插件會忽略它們。 經過processors，咱們可讓styleline去處理html中style標籤裏面的css代碼，MarkDown裏面的css代碼塊或者js裏面一段包含css的字符串。
• 選項地址

規則列表：

• 配置選項地址

ignore方式

// .stylelintignore
*.js
*.png
*.eot
*.ttf
*.woff
複製代碼

片斷禁用規則

/* stylelint-disable */
/* （請說明禁止檢測的理由）前端組件限制類名 */
  .cropper_topContainer .img-preview {
    border: 0 none;
  }
/* stylelint-enable */
複製代碼

fix方式

• stylelint --fix 就能搞定 更多語法規則

• webstorm能夠配置external tools實現autofix，添加keymap快捷鍵，若是但願在保存時自動fix，參考這裏

  external tool 配置內容：

IDE插件

• webstorm插件，可以在 setting -> plugins -> browse repositories 中找到 IntelliJ Stylelint Plugin

  若是 browse repositories 中下載不了，能夠去 官網下載對應插件 在 plugins-> install plugin from disk安裝

• Atom：linter-stylelint
• Sublime：SublimeLinter-contrib-stylelint
• vs code： vscode-stylelint

建議推行方式

1. 規則制按期：本階段先定製規則文件，並要求組內成員在編輯器或IDE 安裝stylelint 插件輔助平常開發中使用。使用過程當中可針對遇到的狀況進行討論並適當調整具體stylelint 規則。

2. 規則過渡期：本階段要求成員在開發過程當中抽出時間對之前項目的代碼進行優化。

3. 規則監督期：本階段將探索創建相應的自動化監督機制並在平常開發中施行下去。在precommit鉤子中強制執行規則

參考：

• devework.com/stylelint-i…
• www.jianshu.com/p/d29c1b652…