プログラミング学習

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

プログラミング学習

stylelint導入方法、設定、自動修正、ルールの例外・無効、ソート方法などをまとめていきます。

特集:Xserver VPS開始!マイクラや開発におすすめで安いVPSサーバー!

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
Extension for Visual Studio Code - Modern CSS/SCSS/Less linter for vscode, support auto fix on save.
marketplace.visualstudio.com

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

Stylelint - Visual Studio Marketplace
Extension for Visual Studio Code - Official Stylelint extension for Visual Studio Code
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行目に謎のエラーがずらずらずら…と。

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のフォルダ構成とサンプル(ブログ運営の場合)

stylelintの設定はpackage.jsonに含めることができますが、わかりやすいのと他のプロジェクトでもコピペで使いまわせるよう独自ファイルにします。

同じ場所に.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
Recess-based property sort order for Stylelint.. Latest version: 4.3.0, last published: 3 months ago. Start using stylelint-config-recess-order in your project ...
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
やりたいことCSSのプロパティを自動ソート（reorder）したいreorderするメリット順番を気にせず書いて楽できるスタイルの無駄な重複を防げる読みやすくなるgzipサイズが減りやすい…
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
概要stylelintとはCSSのためのLintです。Lintとは「コンパイラではチェックされない、バグの要因となりそうなソースコードの記述に対し、警告を行う静的解析処理」のことで…
qiita.com

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

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

Home | Stylelint
npm version
stylelint.io

参考になれば幸いです。

コメント