stylelint導入方法、設定、自動修正、ルールの例外・無効、ソート方法などをまとめていきます。
目次
stylelintとは
stylelintはcssスタイルのコードが正しいのか検証を行うものです。eslintを使っている人にはeslintのcss版といっても差し支えがないでしょう。並べ替えも含めて保存時にかなり自動修正できます。
NuxtやNextなどのWebアプリ開発はもちろん、ブログや電子書籍のCSS修正にも使えます。
vs codeでstylelintの使い方
動かない!stylelint-plusから公式のstylelintに乗り換える(v14追加)
今までお世話になっていたstylelint-plusが動かない状態になっていました。
stylelintはv14で大きな変更が入った模様。
stylelint-plusのサイトを確認すると、アップデートがされていません。。
何もしてないのにstylelintエラーが出るようになった。
— ダーシノ / NES.css (@bc_rikko) July 14, 2021
> Unknown rule no-invalid-position-at-import-rule.
> Unknown rule no-irregular-whitespace.
昔にいれた stylelint-plus というVSCode 拡張機能が悪さしてたみたい。いまは stylelint公式から拡張機能出してるから入れ替えたら解決した！
まず、公式の拡張に載せ替えました。議論があって公式の拡張がメインになった模様。
そのうえでsetting.jsonを書き換えました。stylelint-plusを設定を消去し、stylelintの設定を追加しました。
// "stylelint.autoFixOnSave": true,
"editor.codeActionsOnSave": {
"source.fixAll.stylelint": true
},そしたら無事自動保存が戻りました。それ以外の原因で動かないのはルールの設定が間違っているからでしょう。
あと、VsCodeの拡張のサイトにも書いてありますが、SCSSの場合、これが必要のようです。
"stylelint.validate": ["css", "scss"], // https://github.com/stylelint/vscode-stylelint#stylelintvalidateなんかいろいろ事情があってCSSとPostCSSしかサポートしていないようです。CSSだけならいらないのかな。
only supports validating CSS and PostCSS
https://github.com/stylelint/vscode-stylelint#%EF%B8%8F-only-css-and-postcss-are-validated-by-default
あと、もうひとつありました。1行目に謎のエラーがずらずらずら…と。
なんかこれバグっぽい気がするんだけど、stylelint14系だと1行目必ずエラーにならん？
— けんちゃん (@braveryk7) November 2, 2021
しかもこのエラーfunction-calc-no-invaildなんだけど、このscss自体でcalcなんて使ってねーんだよな pic.twitter.com/yTtFJ4FT6N
stylelint v14、必ず1行目がfunction-calc-no-invalid（calcの表記間違い）というエラーに。.stylelintrcでオフっても出てくる。
— 新田聡一郎 (@soichiro_nitta) September 26, 2022
v14.0.0でこのルールは削除されたことになってるが…何故。vscodeが14使えと言ってくるけど、おとなしく13使っておこうー。https://t.co/5lT8x1bb8y
VsCodeを最新版にしたら消えました。
あと、最近、CSSのhasを使っているのですが、VsCodeでエラーが消えず困っています。。stylelintじゃない方で。対応していないのかな、害はないので放置します。
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などのフォルダが追加されるようです。
vs codeで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ファイルを開き、保存するとソートされます。
vs codeで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を一部無効にすると自動保存が効かない!(v14追加)
version14環境です。
stylelintを一部無効にする次の機能があります。
/* stylelint-disable */
/* stylelint-enable */この機能を使うと、そのCSSファイルすべての自動保存が効かなくなります。。1か所しか使っていなかったため外しました。一時的なバグなのでしょうか。
一般的に動かない原因としてはsetting.jsonの設定がされていないか、ルールが間違っているかのはず。
stylelintの参考サイトや公式リファイレンス
今回、主に参考にさせてもらったサイトはこちらです。
ありがとうございました。
公式リファレンスstylelint user guideもご覧ください。
参考になれば幸いです。
コメント