【v14で動かない!?】VsCodeでstylelintの使い方(設定/自動修正/ルールの例外・無効など)

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-plus - Visual Studio Marketplace

marketplace.visualstudio.com

何もしてないのにstylelintエラーが出るようになった。

> Unknown rule no-invalid-position-at-import-rule.
> Unknown rule no-irregular-whitespace.

昔にいれた stylelint-plus というVSCode 拡張機能が悪さしてたみたい。いまは stylelint公式から拡張機能出してるから入れ替えたら解決した！

— ダーシノ / NES.css (@bc_rikko) July 14, 2021

まず、公式の拡張に載せ替えました。議論があって公式の拡張がメインになった模様。

Stylelint - Visual Studio Marketplace

marketplace.visualstudio.com

そのうえで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行目必ずエラーにならん？
しかもこのエラーfunction-calc-no-invaildなんだけど、このscss自体でcalcなんて使ってねーんだよな pic.twitter.com/yTtFJ4FT6N

— けんちゃん (@braveryk7) November 2, 2021

stylelint v14、必ず1行目がfunction-calc-no-invalid（calcの表記間違い）というエラーに。.stylelintrcでオフっても出てくる。

v14.0.0でこのルールは削除されたことになってるが…何故。vscodeが14使えと言ってくるけど、おとなしく13使っておこうー。https://t.co/5lT8x1bb8y

— 新田聡一郎 (@soichiro_nitta) September 26, 2022

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-standard

npm 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  StylelintError

stylelint.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の方法のようです。

stylelint-config-recess-order

www.npmjs.com

これも入れましょう。

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のorderモジュール選定 - Qiita

qiita.com

個人的には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の導入とVS Codeの設定の方法 - Qiita

qiita.com

ありがとうございました。

公式リファレンスstylelint user guideもご覧ください。

Home | Stylelint

stylelint.io

参考になれば幸いです。