stylelint導入方法、設定、自動修正、ルールの例外・無効、ソート方法などをまとめていきます。
vs codeでstylelint-plusの導入
stylelint-plusの拡張をインストールして自動修正
あらかじめ、vscodeでstylelint-plusをインストールしておきます。
そして、この設定が重要です。この設定が入っていないと保存時に自動修正されません。
アップデート時に外れたことがあったため、反映されない場合は再度確認しましょう。
npmを使ってstylelintのインストール
新規フォルダにcssファイルを作成。整形したいcssを書きます。ターミナルを使ってcdでcssファイルのある場所に移動し、必要なものをインストール。
package.jsonがすでにあるなら、ここは飛ばしましょう。
npm init -y
npm initのみだといろいろと設定しながらpackage.jsonを作成しますが、-yのオプションは初期設定せず作れます。設定不要の人には早いってことです。
stylelintをインストールします。どちらも同じ意味です。
npm i -D stylelint stylelint-config-standard
npm install stylelint stylelint-config-standard --save-dev
その場所にファイルが生成されます。生成されたnode_modulesのフォルダ直下にstylelint-config-standardなどのフォルダが追加されるようです。
stylelintのルールの設定
No rules found within configuration. Have you provided a “rules” property?
No rules found within configuration. Have you provided a "rules" property? ERROR StylelintError
nuxtの場合は以下のようにツールを設定します。
module.exports = {
'rules': {} // ←追加
}
stylelintのフォルダ構成とサンプル(ブログ運営の場合)
同じ場所に.stylelintrc.jsonを作成。ここまでで構成は以下のようになります。
├──node_modules ├──package.json ├──package-lock.json ├──.stylelintrc.json ├──sort.css
{
"extends": [
"stylelint-config-standard",
"stylelint-config-recess-order"
],
"rules": {
}
}
jsonファイルはコメントが書けないためjsファイルにしてもよいです。個人的にはjsファイルにしています。
module.exports = {
// コメント
extends: [
'stylelint-config-standard',
'stylelint-config-recess-order'
],
rules: {}
}
stylelintのフォルダ構成(電子書籍の場合)
上記のブログ運営とまったく同じです。流用しました。
stylelintはmdファイルのcssも修正してくれるため、いいですね！
stylelintの設定とサンプル(nuxtの場合)
stylelint.config.jsというファイルがあるため、そこにルールを設定しましょう。
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-standardを入れると保存時に整形はされますが並べ替えまでうまくいくわけではありません。そのまま詰めるだけのようです。
並べ替え方法はいろいろとあります。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もご覧ください。
参考になれば幸いです。
コメント