Awesome Stylelint

Stylelint 設定、外掛、整合等令人驚豔的清單。

內容

• 分析平台
• 設定
• 自訂語法
• 編輯器整合
• 格式化程式
• 外掛
• 工作執行器
• 測試
• 工具
• 教學

分析平台

• codacy-stylelint - Codacy 整合。
• codeclimate-stylelint - Code Climate 整合。
• megalinter - 整合到 MegaLinter。
• putout - 整合到 Putout。
• reviewdog/action-stylelint - Reviewdog GitHub Action。

設定檔

• @archoleat/stylelint-config-extended-scss - Archoleat 設定檔，適用於 SCSS，具備屬性排序功能。
• @primer/stylelint-config - 可在 GitHub 上分享的設定檔。
• @stylistic/stylelint-config - @stylistic/stylelint-plugin 的可分享設定檔。
• @wordpress/stylelint-config - 可分享的 WordPress CSS 編碼標準設定檔。
• stylelint-config-clean-order - 使用 stylelint-order 排序樣式。
• stylelint-config-hudochenkov - 個人設定檔，使用 stylelint-order。
• stylelint-config-idiomatic-order - 根據 idiomatic-css 排序樣式。
• stylelint-config-prettier-scss - 在 SCSS 中使用 Prettier 時，關閉衝突規則。
• stylelint-config-prettier - 在 CSS 中使用 Prettier 時，關閉衝突規則。
• stylelint-config-property-sort-order-smacss - 基於 SMACSS 方法的屬性排序順序。
• stylelint-config-rational-order - 根據合理順序將相關屬性宣告分組在一起，進行排序。
• stylelint-config-recess-order - 以 Recess 和 Bootstrap 的方式對 CSS 屬性進行排序。
• stylelint-config-recommended-vue - Stylelint 推薦的 Vue 可分享設定檔。
• stylelint-config-sass-guidelines - Sass 指南設定檔。
• stylelint-config-standard-scss - SCSS 的標準設定檔。
• stylelint-config-standard - CSS 的標準設定檔。
• stylelint-config-wikimedia - 可分享的 Wikimedia CSS 編碼標準設定檔。

自訂語法

• postcss-angular - Angular 元件。
• postcss-html - HTML，包含 Vue SFC。
• postcss-less - Less。
• postcss-linaria - Linaria。
• postcss-lit - Lit 元素。
• postcss-markdown - Markdown。
• postcss-sass - Sass。
• postcss-scss - SCSS。
• postcss-styled-components - Styled-components。
• postcss-styled-syntax - 樣板字串。

編輯器整合

• ale - Vim 外掛程式。
• coc-stylelint - Neovim 語言伺服器擴充功能。
• flycheck - Emacs 擴充功能。
• linter-stylelint - Atom 外掛程式。
• null-ls - Neovim 外掛程式。
• sublimeLinter-contrib-stylelint_d - Sublime Text 外掛程式（作為守護程式）。
• sublimeLinter-stylelint - Sublime Text 外掛程式。
• vscode-stylelint - VS Code 擴充功能。

格式化程式

• stylelint-actions-formatters - 針對 GitHub Actions 輸出錯誤和警告。
• stylelint-checkstyle-formatter - 輸出 Checkstyle XML 報告。
• stylelint-codeframe-formatter - 輸出 codeframe 錯誤和警告。
• stylelint-formatter-github - 直接在 GitHub pull request 中輸出錯誤和警告。
• stylelint-formatter-gitlab-code-quality-report - 以 GitLab Code Quality 報告（人工製品）輸出錯誤和警告。
• stylelint-formatter-pretty - 一個適用於終端的漂亮格式化程式。

外掛程式

• @isnotdefined/stylelint-plugin - 禁止過時的 CSS 並強制執行單位步驟（套件）。
• @stylistic/stylelint-plugin - 透過使用 Stylelint 16.0.0 中移除的規則來強制執行風格慣例（套件）。
• stylelint-8-point-grid - 強制執行 8 點網格。
• stylelint-a11y - 強制執行無障礙標準（套件）。
• stylelint-at-rule-no-children - 禁止在 at-rules 內部進行區塊規則宣告。
• stylelint-color-format - 強制執行 HEX、RGB 或 HSL 顏色。
• stylelint-css-modules-no-global-scoped-selector - 禁止在 CSS 模組中使用全域範圍選擇器。
• stylelint-css-modules - 強制執行 CSS 模組架構（套件）。
• stylelint-csstree-validator - 驗證 CSS 值以符合 W3C 規格和瀏覽器擴充功能。
• stylelint-declaration-block-no-ignored-properties - 禁止被忽略的屬性值。
• stylelint-declaration-strict-value - 強制執行特定屬性的值的變數、函數或關鍵字。
• stylelint-file-max-lines - 限制每個檔案的最大行數。
• stylelint-force-app-name-prefix - 強制執行規則的應用程式名稱前綴。
• stylelint-gamut - 強制執行標準的不同色彩空間（套件）。
• stylelint-group-selectors - 將具有相同屬性和值的選擇器分組。
• stylelint-high-performance-animation - 禁止低效能動畫和轉場屬性。
• stylelint-images - 執行圖片的良好效能並避免錯誤（套件）。
• stylelint-itcss - 執行 ITCSS 架構（套件）。
• stylelint-max-lines - 限制原始碼的行數。
• stylelint-media-use-custom-media - 執行自訂媒體查詢的使用。
• stylelint-no-browser-hacks - 禁止與目標瀏覽器無關的瀏覽器駭客手法。
• stylelint-no-indistinguishable-colors - 禁止可疑地接近相同的顏色。
• stylelint-no-nested-media - 禁止巢狀的 @media 規則。
• stylelint-no-restricted-syntax - 禁止指定的語法。
• stylelint-no-unresolved-module - 禁止未解析的匯入（類似匯入或 url）。
• stylelint-no-unsupported-browser-features - 禁止目標瀏覽器不支援的 CSS。
• stylelint-no-unused-selectors - 禁止未使用的選擇器。
• stylelint-order - 執行特定順序，例如屬性（套件）。
• stylelint-plugin-defensive-css - 執行防禦性 CSS 最佳實務（套件）。
• stylelint-plugin-ecss - 執行 Enduring CSS 架構。
• stylelint-plugin-logical-css - 執行邏輯 CSS 屬性、值和單位（套件）。
• stylelint-react-native - 執行 React Native 規則（套件）。
• stylelint-rem-over-px - 執行 rem 單位大於 px 單位。
• stylelint-rscss - 執行 RSCSS 慣例（套件）。
• stylelint-sass-render-errors - 顯示 Sass 渲染錯誤和不建議使用事項。
• stylelint-scales - 強制數值使用比例（套件）。
• stylelint-scss - 強制使用 SCSS 特定慣例（套件）。
• stylelint-selector-bem-pattern - 強制選擇器使用 BEM 模式。
• stylelint-selector-no-empty - 禁止使用空白選擇器。
• stylelint-selector-tag-no-without-class - 禁止在選擇器中使用沒有類別限定符的特定標籤。
• stylelint-stylus - 強制使用 Stylus 特定慣例。
• stylelint-suitcss - 強制使用 SUITCSS 慣例（套件）。
• stylelint-use-logical-spec - 強制使用邏輯屬性和值。
• stylelint-use-nesting - 強制在可能的情況下使用巢狀。
• stylelint-value-no-exposed-custom-properties - 禁止使用公開的自訂屬性。
• stylelint-value-no-unknown-custom-properties - 禁止使用未知的自訂屬性。
• stylelint-z-index-value-constraint - 指定 z-index 的最小和最大約束值。

任務執行器

• broccoli-stylelint - Broccoli 外掛程式。
• ember-cli-stylelint - Ember CLI 外掛程式。
• grunt-stylelint - Grunt 外掛程式。
• gulp-stylelint - Gulp 外掛程式。
• jest-runner-stylelint - Jest 外掛程式。
• nx-stylelint - Nx 外掛程式。
• stylelint-webpack-plugin - Webpack 外掛。

測試

• jest-preset-stylelint - Stylelint 外掛的 Jest 預設值。
• stylelint-tape - 使用 Tape 測試自訂規則。
• stylelint-test-rule-node - 使用 Node.js 內建測試執行器 (node:test) 的規則測試器。

工具

• pre-commit-stylelint - 鏡射預提交掛鉤架構的所有版本。
• stylelint-define-config - 提供 stylelint.config.js 檔案的 defineConfig 函式。
• stylelint-find-new-rules - 找出 Stylelint 設定檔中未設定的 Stylelint 規則。

教學課程

• 使用 Stylelint 檢查您的 CSS - CSS Tricks 文章。
• Stylelint：我們一直想要的樣式表檢查器 - Smashing Magazine 文章。
• 使用 Stylelint 清潔您的樣式表 - 第一篇關於 Stylelint 的文章。
• 撰寫您的第一個自訂 Stylelint 規則 - 快速建立並整合您自己的 Stylelint 規則。