stylelint の使い方 [CSS/Sass/SCSS]

stylelint

参考：

stylelint [Official]

stylelint/stylelint: A mighty, modern style linter – GitHub

sindresorhus/globby: User-friendly glob matching – GitHub

ドキュメント

参考：

User guide | stylelint

stylelint/node-api.md at master · stylelint/stylelint – GitHub

使い方

参考：

モダン CSS リンター – Qiita

CSS の Lint を stylelint にする – Qiita

stylelint の使い方 動かして体験してみるまで | isoppp.com

How to lint SCSS with stylelint | Brett Jankord

Clean CSS with Stylelint | Dries Buytaert

What is stylelint and how to integrate a modern CSS linter in your workflow | Blog Coherent Labs

概要

参考：

ここがすごいぞ！ stylelint！ – Qiita

実務で stylelint を導入して3ヶ月ぐらいたった感想 – Qiita

amakan に stylelint を導入した | ✘╹◡╹✘

stylelint 社内勉強会資料 – Qiita

設定

参考：

stylelint の設定ファイルの作り方 – Qiita

Configuration | stylelint [Official]

stylelint/configuration.md at master · stylelint/stylelint – GitHub

stylelint.config.js

参考：

CSS Modules と PostCSS と stylelint と styled-components | To Be Decided

stylelint-disable-line

参考：

How to disable stylelint for all non-string values – Stack Overflow

Formatters

参考：

Writing formatters | stylelint

stylelint/lib/formatters at master · stylelint/stylelint – GitHub

stylelint-formatter-pretty

参考：

Dreamseer/stylelint-formatter-pretty: A pretty Stylelint formatter – GitHub

stylelint-formatter-pretty – npm

PostCSS で使う

参考：

PostCSS と stylelint の環境構築 – Qiita

CSS の Lint を stylelint にする – Qiita

Sass と PostCSS を組み合わせて作る CSS 開発環境 | Tips Note by TAM

Sass から PostCSS へ移行 (Vue.js) – Qiita

The stylelint PostCSS plugin | stylelint [Official]

stylelint/postcss-plugin.md at master · stylelint/stylelint – GitHub

Gulp で使う

参考：

The Style Sheet Linter We’ve Always Wanted | Smashing Magazine

.stylelintignore

参考：

ignoreFiles and .stylelintignore not being respected · Issue #1693 · stylelint/stylelint – GitHub

postcss-reporter

参考：

postcss/postcss-reporter: Log PostCSS messages in the console – GitHub

Throw error when using postcss-reporter within webpack · Issue #2572 · stylelint/stylelint – GitHub

stylelint-config-standard

参考：

stylelint/stylelint-config-standard: The standard shareable config for stylelint – GitHub

stylelint-scss

参考：

kristerkari/stylelint-scss: A collection of SCSS specific linting rules for stylelint – GitHub

stylelint の設定ファイルの作り方 – Qiita

How to lint SCSS with stylelint | Brett Jankord

How to lint your Sass/CSS properly with Stylelint | Creative Nightly

stylelint-config-sass-guidelines

参考：

bjankord/stylelint-config-sass-guidelines: A stylelint config based on https://sass-guidelin.es/ – GitHub

CLI

参考：

The stylelint CLI | stylelint [Official]

stylelint-webpack-plugin

参考：

webpack-contrib/stylelint-webpack-plugin: A webpack plugin to lint your CSS/Sass code using stylelint – GitHub

Webpack + PostCSS + Stylelint + Stylefmt | TomasAlabes.me

Support for StyleLint 9.x as peerDependency · Issue #149 · webpack-contrib/stylelint-webpack-plugin – GitHub

Vue コンポーネントのスタイルを lint する

参考：

vue ファイル内で定義されているスタイルに stylelint を使用する – Qiita

Vim で ALE を使って vue ファイルに eslint と stylelint を使う – Qiita

Linting CSS in Vue files | Lost Bananas

Linting | Vue Loader [Official]

A nice way to lint `.vue` files with Stylelint? · Issue #303 · vuejs/vue-loader – GitHub

stylelint not working properly when used with vue-loader · Issue #627 · vuejs/vue-loader – GitHub

--fix option mangles .vue files. · Issue #3049 · stylelint/stylelint – GitHub

Incompatibility with vue-loader and using stylelint as a PostCSS plugin · Issue #2316 · stylelint/stylelint – GitHub

ccbikai/stylelint-processor-html: Please Use stylelint-processor-arbitrary-tags – GitHub

mapbox/stylelint-processor-arbitrary-tags: A stylelint processor that allows you to lint CSS within arbitrary tags – GitHub

Problem processing .vue files where the <style> tag is the first line of the file. · Issue #5 · mapbox/stylelint-processor-arbitrary-tags – GitHub

Atom Editor

参考：

linter-stylelint | Atom Packages

AtomLinter/linter-stylelint: A plugin for Atom Linter providing an interface to stylelint – GitHub

Prettier と組み合わせて使う

参考：

VS Code で Prettier と Stylelint を連携して CSS/SCSS ファイル保存時にオートフォーマットをかける – Qiita

prettier と stylelint を使って、エディタのプラグインで自動フォーマットしてみた。- Qiita

TSLint と styleLint と合わせて Prettier を使ってみる | T-CREATOR

フロントエンドに ESLint、Prettier、stylelint を導入して快適な開発環境を整えました | Cluex Developersブログ

注目のコードフォーマッター「Prettier」で CSS を整形する方法 | satoyan419.com

How to integrate Prettier with ESLint and stylelint | freeCodeCamp.org

prettier-stylelint-formatter

参考：

ismail-syed/prettier-stylelint-formatter: Fork of hugomrdias/prettier-stylelint – GitHub

BPScott/prettier-stylelint-formatter: Fork of hugomrdias/prettier-stylelint – GitHub

prettier-stylelint-formatter – npm