stylelint導入方法、設定、自動修正、ルールの例外・無効、ソート方法などをまとめていきます。
目次
stylelintとは
stylelintはcssスタイルのコードが正しいのか検証を行うものです。eslintを使っている人にはeslintのcss版といっても差し支えがないでしょう。並べ替えも含めて保存時にかなり自動修正できます。
NuxtやNextなどのWebアプリ開発はもちろん、ブログや電子書籍のCSS修正にも使えます。
vs codeでstylelintの使い方
stylelint-plusの拡張をインストールして自動修正(動かない原因になる?)
あらかじめ、vscodeでstylelint-plusをインストールしておきます。
そして、この設定が重要です。この設定が入っていないと保存時に自動修正されません。
アップデート時に外れたことがあったため、反映されない場合は再度確認しましょう。
それ以外の原因で動かないのはルールの設定が間違っているからです。
npmを使ってstylelintのインストール
新規フォルダにcssファイルを作成。整形したいcssを書きます。ターミナルを使ってcdでcssファイルのある場所に移動し、必要なものをインストール。
package.jsonがすでにあるなら、ここは飛ばしましょう。
npm init -y
npm initのみだといろいろと設定しながらpackage.jsonを作成しますが、-yのオプションは初期設定せず作れます。設定不要の人には早いってことです。
stylelintとstylelint-config-standardをインストールします。stylelint-config-standard は. stylelint 公式で配布している設定のようで一緒に入れるのが定番です。
npm i -D stylelint stylelint-config-standardnpm install stylelint stylelint-config-standard --save-devコマンドはどちらも同じ意味です。
その場所にファイルが生成されます。生成されたnode_modulesのフォルダ直下にstylelint-config-standardなどのフォルダが追加されるようです。
stylelintのルールの設定
stylelintのフォルダ構成とサンプル(ブログ運営の場合)
同じ場所に.stylelintrc.jsを作成。
次の理由からstylelintrcの拡張子はJSがよいです。
- .stylelintrc VsCodeのシンタックスハイライトを効かない
- .stylelintrc.json VsCodeのシンタックスハイライトを効くがコメントをかけない
- .stylelintrc.js シンタックスハイライトも効くしコメントも書ける
構成は以下のような感じになります。
├──node_modules
├──package.json
├──package-lock.json
├──.stylelintrc.js
├──sort.css{
"extends": [
"stylelint-config-standard"
],
"rules": {
}
}個人的には.stylelintrc.jsです。
module.exports = {
// コメント
extends: [
'stylelint-config-standard'
],
rules: {}
}
このルールを保存した時点でエラーがでます。
ためしに空行などを入れて保存すると、行間が詰まるようになります。
stylelintのフォルダ構成(電子書籍の場合)
上記のブログ運営とまったく同じです。流用しました。
stylelintはmdファイルのcssも修正してくれるため、いいですね！
stylelintの設定とサンプル(nuxtの場合)
基本的な考え方は一緒ですがnuxtの場合が少し違います。
No rules found within configuration. Have you provided a "rules" property?
ERROR StylelintErrorstylelint.config.jsというファイルがあるため、そこにルールを設定しましょう。
module.exports = {
'rules': {} // ←追加
}
module.exports = {
// add your custom config here
// https://stylelint.io/user-guide/configuration
extends: [
'stylelint-config-standard',
'stylelint-config-recess-order'
],
plugins: [],
rules: {}
}
CSSのプロパティをソート方法(stylelint-order/stylelint-config-recess-order)
次にCSSのプロパティを並べ替えます。
並べ替え方法はいろいろとあります。npmのサイトをみると、stylelint-config-recess-orderはBootstrapの方法のようです。
これも入れましょう。
npm install stylelint-config-recess-order --save-dev.stylelintrc.jsの中身のサンプルです。stylelint-config-recess-orderがソートするものですね。
module.exports = {
// コメント
extends: [
'stylelint-config-standard',
'stylelint-config-recess-order'
],
rules: {
"prettier/prettier": "error"
}
}npmのサイトでstylelint-configなどで検索するといろいろとでてきます。
モジュール選定の比較記事はこちらにありました。
個人的にはstylelint-config-recess-orderとstylelint-config-rational-orderで少し迷いましたが、stylelint-config-recess-orderを採用しました。変更は簡単なので気楽に決めましょう。
VS Codeでcssファイルを開き、保存するとソートされます。
stylelintのルールの例外・無効化
stylelintはそれなりによくできているため、デフォルトのままでも結構使えます。ただ、eslintや他との衝突が問題になってその回避のためルールを設定することが多いです。
Expected newline after “,” in a multi-line list
1つの例として改行方法を統一します。
Expected newline after ":" with a multi-line declaration (declaration-colon-newline-after) Expected newline after "," in a multi-line list (value-list-comma-newline-after)
ドキュメントにはないけど、nullが使えるっぽいです。
// 'declaration-colon-newline-after': 'always', // 'declaration-colon-newline-after': 'always-multi-line', 'declaration-colon-newline-after':null, // 'value-list-comma-newline-after': 'always' // 'value-list-comma-newline-after': 'always-multi-line' // 'value-list-comma-newline-after': 'never-multi-line' 'value-list-comma-newline-after':null
なぜ、nullにしたのかといえば、prettierが下記のエラーをだして改行をまとめようとするため、prettierとstylelintバッティングして相性がよくありません。そのため、stylelint側はnullで無視しています。
Replace '······' with '········' (prettier/prettier)
他との掛ねあいが結構あります。
stylelintの参考サイトや公式リファイレンス
今回、主に参考にさせてもらったサイトはこちらです。
ありがとうございました。
公式リファレンスstylelint user guideもご覧ください。
参考になれば幸いです。
コメント