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

プログラミング学習

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

stylelintとは

stylelintはcssスタイルのコードが正しいのか検証を行うものです。eslintを使っている人にはeslintのcss版といっても差し支えがないでしょう。並べ替えも含めて保存時にかなり自動修正できます。

NuxtやNextなどのWebアプリ開発はもちろん、ブログや電子書籍のCSS修正にも使えます。

スポンサーリンク

vs codeでstylelintの使い方

stylelint-plusの拡張をインストールして自動修正(動かない原因になる?)

あらかじめ、vscodeでstylelint-plusをインストールしておきます。

そして、この設定が重要です。この設定が入っていないと保存時に自動修正されません。

画面左のExtensions > stylelintで検索 > stylelint-plusをインストール > 歯車アイコンのConfigure Extension Setting > Stylelint: Auto Fix On Saveのチェックを入れる

アップデート時に外れたことがあったため、反映されない場合は再度確認しましょう。

それ以外の原因で動かないのはルールの設定が間違っているからです。

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などのフォルダが追加されるようです。

スポンサーリンク

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

これも入れましょう。

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サイズが減りやすい 使用ツール ...

個人的には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の参考サイトや公式リファイレンス

今回、主に参考にさせてもらったサイトはこちらです。

VS CodeにPrettier・ESLint・Stylelintを導入してファイル保存時にコードを自動整形させる方法 | WEMO
これまでコーディング規約とは無縁のぐちゃぐちゃコードを書いて生きてきましたが、「いい加減ちゃんとするか...」と思い、Prettier(プリティア)・ESLint・Stylelint を導入することを決意。 今回は、これら3つのツールをVS
stylelintの導入とVS Codeの設定の方法 - Qiita
概要 stylelint1とはCSSのためのLintです。Lintとは「コンパイラではチェックされない、バグの要因となりそうなソースコードの記述に対し、警告を行う静的解析処理」2のことで、こうした処理によって、「コードを実行する...

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

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

Home | Stylelint
npm version

参考になれば幸いです。

コメント

タイトルとURLをコピーしました