Stylelint を導入したときのあれこれ

こんにちは、フロントエンドエンジニアの minamo です。

最近は夏映画の公開ラッシュで週2回映画館に通っています。忙しい！

3度目のブログは、最近導入してみた Stylelint についてです。

• Stylelint を導入するメリット
• おすすめのプラグイン
• 導入するときに困ったこと・その解決法

などについて書いていきます。

Stylelint って何？

Stylelint は CSS の 構文チェックツール です。Javascript の ESLint の CSS 版とも言える存在です。

基本的な構文エラーや typo 、たまにやってしまうスタイル指定の重複など、構文チェックツールとしての機能はもちろんのこと、

• プロパティの順番
• 一行空けるか、空けないか
• カラーコードは大文字か小文字か

などなど、個人間で書き方の差が激しい（ともすれば宗教戦争になりかねない）CSS の記述ルールを定め、統一してくれます。

チームでの開発など、複数人で作業する場合でも自動的にルールに則って記述を統一してくれるので、レビュー指摘の手間や無駄な争いがなくなり、開発にあてる時間を増やすことができます。

筆者はこのツールの存在を知ったとき、「ワシの若い頃はプロパティの順番を丸暗記していたもんじゃったがのう」と昭和の昔話おじいさんになってしまいましたが、令和に生きる開発者はそんな苦労をすることなく、プロパティの順番や書き方を気にせずのびのび開発し、あとでポチッと一発 Stylelint にかければいいのです。素晴らしいことだと思います。

インストール

本体と同時にプラグインもインストールしていきます。

npm install stylelint stylelint-config-standard stylelint-config-recess-order stylelint-config-prettier stylelint-scss --save-dev

今回選んだプラグインはこちら。

• stylelint-config-standard （基本的な記述設定）
• stylelint-config-recess-order (プロパティの順番）
• stylelint-config-prettier （コードフォーマッター Prettier と設定がコンフリクトしないようにする設定）
• stylelint-scss（SCSS 用の設定）

recommended or standard?

基本的な設定には stylelint-config-recommended もしくは stylelint-config-standard がありますが、 stylelint-config-standard を採用するのにも少し紆余曲折がありました。

まず導入対象のプロダクトでは SCSS を使っていたので、 stylelint-config-standard-scss を使おうとしたのですが、あまりメンテナンスされていないため見送りに。

次は stylelint-config-recommended-scss の使用を検討。しかし、 recommend よりは規則がより厳格な standard の方を使いたい。こちらは規則が少しゆるめの stylelint-config-recommended を extend しているため、standard にしたいのであれば自分でルールを足すしかありません。

結果として、stylelint-config-standard + stylelint-scss を入れて、推奨するルールを設定ファイルに記述しました。

設定ファイル

インストールが完了したら、設定ファイルを作成し、どのプラグインを使うか指定したり、細かいルールを足していったりとカスタマイズしていきます。

touch stylelint.config.js  // 設定ファイルの作成

設定ファイルの書き方も ESLint と似ていますね。ここでは導入したときの設定を転載します。（あまり細かい説明はしません）

extends

extends: ['stylelint-config-standard', 'stylelint-config-recess-order', 'stylelint-config-prettier'],

順番に注意しましょう！

plugins

plugins: ['stylelint-scss'],

ignoreFiles

ignoreFiles: ['**/node_modules/**'],

rules

rules: {
  'at-rule-no-unknown': null,
  'scss/at-rule-no-unknown': true,
  // ↑ここまでは stylelint-scss の推奨ルール。
  // ↓あとはお好みの設定を記述しましょう。
},

選択肢を選んでいくだけで Stylelint の rules を書き出してくれるジェネレーターもあります。便利〜！ 例を見ながら回答していくので、ルールの内容の勉強にもなりますね。

maximgatilin.github.io

ただ全部答えていくと結構な量になりますし、 config とかぶっているルールは外してもいいかもしれませんね。 config でどういったルールを設定しているのか、内容に一度目を通しておくといいと思います。

stylelint-config-recommended

github.com

stylelint-config-standard

github.com

使い方

package.json

lint コマンドや fix コマンドで Stylelint が動作するように設定しましょう。

{
  "scripts": {
    "lint:css": "stylelint **/*.{css,scss,sass}"        // エラーを検知する
    “fix:css": "stylelint —fix **/*.{css,scss,sass}"    // エラーを自動的に修正する
  }
}

VSCode

VSCode をお使いであれば、拡張機能を入れるのがよいでしょう。

marketplace.visualstudio.com

ESLint と同じように保存時に動作するように設定すれば、自動的に修正してくれるので開発スピードが上がりますね。

"editor.codeActionsOnSave": {
  "source.fixAll.stylelint": true
}

導入時に困ったルールなど

selector-pseudo-element-no-unknown

導入対象のプロダクトはフレームワークに Vue.js (Nuxt.js) を使っていたので、 ::v-deep がこのルールに引っかかります。 設定ファイルで ::v-deep を対象から外すよう個別に設定しました。

declaration-block-trailing-semicolon

この設定が Prettier の「インラインスタイルで末尾のコロンを削除する」設定とコンフリクトします。これは調べた限り解決方法が見つからなかったです。。

no-descending-specificity

「詳細度の高いセレクタより後に詳細度の低いセレクタを定義することを禁止する」ルールです。これは lint fix でも修正できず、後から修正していこうと思うと結構大変です…！なのでこちらは泣く泣く無効化することに。

大事なこと

Stylelint は最初から導入する のが後で困らないのでおすすめです！！

astamuse ではいつでもエンジニア＆デザイナーを募集しています。 もちろんリモートでの面接にも対応していますので、お話だけでもお気軽にどうぞ！