stylelintってなんだろう？役割を解説

CSS Lint SCSS yarn npm

stylelintとは？

stylelintはCSSやSCSS、LESSなどのスタイルシートを検証し、一貫性のあるコードスタイルを維持するための静的解析ツールです。
昨今のフロントエンド開発には欠かせないツールとなっています。

stylelintは以下のような機能を提供します。

1. 構文エラーやタイポの検出
2. コードスタイルの一貫性の検証
3. プリプロセッサの変数や関数、ミックスインなどの使用方法の検証
4. パフォーマンスの問題を検出するルールの提供

stylelintは様々な設定オプションを提供しており、ユーザーが独自のルールを追加することもできます。
また、stylelintはコマンドラインやyarnやnpmスクリプト、エディターのプラグインとして使用することができます。

stylelintはCSSやSCSS、LESSなどのスタイルシートを検証することで、品質の高いコードを作成し、保守性を高めることができます。

stylelintの実行方法

Stylelintを使用するには、まずプロジェクトにStylelintをインストールし、設定ファイルを作成してから、コマンドラインまたはエディタ統合を使用して実行します。
以下にその手順を示します。

1. Stylelintのインストール

まず、Node.jsとnpm（またはyarn）がインストールされていることを確認します。

npmを使用する場合
npm install stylelint --save-dev
yarnを使用する場合
yarn add stylelint --dev

2. Stylelint設定ファイルの作成

プロジェクトのルートディレクトリに.stylelintrcという名前のファイルを作成し、以下のような基本的な設定を追加します。
設定ファイルはJSON形式、YAML形式、JavaScript形式のいずれかで書くことができます。

JSON形式の例
{
  "extends": "stylelint-config-standard",
  "rules": {
    "indentation": 2,
    "string-quotes": "double"
  }
}
YAML形式の例
extends: stylelint-config-standard
rules:
  indentation: 2
  string-quotes: double

3. スタイルガイドのインストール

推奨される設定やスタイルガイドを使用するために、対応するパッケージをインストールする必要があります。
例えば、stylelint-config-standardを使用する場合：

npm install stylelint-config-standard --save-dev

4. Stylelintの実行

コマンドラインから実行

Stylelintをコマンドラインから実行するには、npxコマンド（npm 5.2.0以上で利用可能）を使用します。

npx stylelint "/*.css"

または、特定のディレクトリやファイルを指定して実行することもできます。

npx stylelint "src/**/*.css"
スクリプトに追加

package.jsonのスクリプトセクションにStylelintのコマンドを追加することもできます。

"scripts": {
  "lint:css": "stylelint '/*.css'"
}

その後、以下のコマンドで実行できます。

npm run lint:css

5. エディタの統合

エディタでリアルタイムにLintingを行うために、以下のようなプラグインをインストールすることができます。

  • VSCode: stylelint extension

marketplace.visualstudio.com

  • Sublime Text: SublimeLinter-contrib-stylelint

packagecontrol.io

  • Atom: linter-stylelint

atom.io

6. 自動修正機能の使用

Stylelintには自動修正機能もあり、以下のコマンドで自動修正を実行できます。

npx stylelint "/*.css" --fix

これらの手順に従うことで、Stylelintをプロジェクトに設定し、スタイルシートの品質を保つことができます。
必要に応じて、ルールや設定をカスタマイズし、プロジェクトの要件に合わせて最適化してください。

Stylelint実行前後の差分の例

Stylelintを実行する前と後の差分の例を示します。
以下の例では、Stylelintを実行する前のCSSファイルと、Stylelintによって修正された後のCSSファイルを比較します。

1. Stylelint実行前のCSSファイル

例えば、次のようなスタイルシートがあるとします。

body {
    background-color: #fff;
    color: #333
}

h1 {
  font-size: 24px;
    margin-bottom: 20px
}

このファイルには以下の問題があります：

  • インデントが統一されていない（2スペースと4スペースが混在）。
  • プロパティの最後にセミコロンが欠けている。

2. Stylelint設定ファイル

次に、Stylelintの設定ファイル.stylelintrcを次のように設定します。

{
  "extends": "stylelint-config-standard",
  "rules": {
    "indentation": 2,
    "declaration-block-trailing-semicolon": "always",
    "color-hex-length": "short"
  }
}

この設定ファイルでは、以下のルールを適用しています：

  • インデントを2スペースに統一する。
  • プロパティの最後に必ずセミコロンを付ける。
  • 可能な限り16進カラーコードを短縮形にする。

3. Stylelintの実行

次に、以下のコマンドでStylelintを実行します。

npx stylelint "path/to/your/styles.css" --fix

4. Stylelint実行後のCSSファイル

Stylelintを実行した後のスタイルシートは次のように修正されます。

body {
  background-color: #fff;
  color: #333;
}

h1 {
  font-size: 24px;
  margin-bottom: 20px;
}

5. 差分の説明

実行前と実行後のCSSファイルの差分は以下の通りです：

実行前
body {
    background-color: #fff;
    color: #333
}

h1 {
  font-size: 24px;
    margin-bottom: 20px
}
実行後
body {
  background-color: #fff;
  color: #333;
}

h1 {
  font-size: 24px;
  margin-bottom: 20px;
}

修正点の詳細

1. インデントの統一:

  • インデントが2スペースに統一されました。

2. セミコロンの追加:

  • color: #333の後にセミコロンが追加されました。
  • margin-bottom: 20pxの後にセミコロンが追加されました。

3. その他:

  • background-colorの値#fffは既に短縮形なので、変更はありませんでした。

まとめ

Stylelintを使用することで、スタイルシートのコードを自動的にフォーマットし、統一されたコーディングスタイルを保つことができます。
上記のように、Stylelintを適用する前と後の差分を確認することで、具体的にどのような修正が行われたかを理解することができます。