CSSが煩雑になってきたため、Stylelintを導入しました。
Stylelintは、CSSコードの品質を向上させるための静的解析ツールで、文法ミスや非効率なコードを特定し、一貫性を保つことができます。
また、重複や冗長な記述を見つけて整理することで、コードの品質を高めます。
導入の手順を以下にまとめます。
初学者のため、わかりづらい部分や解説が冗長になっている可能性があります。
目次
導入方法
Node.js環境で以下を実行します。
Node.jsをインストールする
まず、Node.jsがインストールされているか確認します。
インストールされていない場合、Node.js公式サイトにアクセスして最新バージョンをダウンロードし、インストールしてください。
プロジェクトの準備
次に、プロジェクトのフォルダを作成し、そのフォルダに移動します。
ターミナルで以下のコマンドを実行
mkdir my-project(修正したいファイルパス)
cd my-project(修正したいファイルパス) npmの初期化
npm init コマンドを実行して package.json ファイルを作成します。
npm init -y Stylelintをインストール
npm install stylelint --save-dev設定ファイルを作成
プロジェクトのルートディレクトリ（Wordpressの場合は package.json が存在する場所）に .stylelintrc.json という名前のファイルを作成し、ルールを定義します。
{
"rules": {
"declaration-block-no-duplicate-properties": true,
"no-duplicate-selectors": true
}
} declaration-block-no-duplicate-properties: 同じセレクタ内で重複したプロパティを禁止します。
no-duplicate-selectors: 同じセレクタを複数回記述するのを禁止します。
設定後にコマンドを使ってプロジェクト全体をチェック
npx stylelint "**/*.css" エラーの例
- declaration-block-no-duplicate-properties
同じセレクタ内でプロパティが複数回記述されており、無駄が生じています。
- no-duplicate-selectors
エラー: 複数回定義されたセレクタ（例: html , body , pre , hr など）。
セレクタがコード内で重複して記述されており、管理が煩雑になっています。
行番号: 最初にそのセレクタが記述された行番号を表示しています（例: first used at line 65 ）。
- Expected numeric font-weight-notation
font-weight プロパティに文字列（例: bold , normal ）ではなく数値（例: 400 , 700 ）を使うことを求めています。
Node.jsを使って独自の置換スクリプトを作成することもできます。（例:fix-font-weight.jsを作成）
const fs = require('fs');
const filePath = '/path/to/style.css'; // 修正したいファイルパス
let css = fs.readFileSync(filePath, 'utf8');
css = css.replace(/font-weight: bold;/g, 'font-weight: 700;');
css = css.replace(/font-weight: normal;/g, 'font-weight: 400;');
fs.writeFileSync(filePath, css, 'utf8');
console.log('修正完了！'); 自動修正の活用
エラーの中には、以下のコマンドで自動的に修正できるものもあります。
npx stylelint "**/*.css" --fixすべてのエラーが修正可能なわけではなく、自動で修正できるのは以下のようなケースが主です。
自動修正が可能な例
- 不要なセミコロンの削除
空白セミコロンが削除されます。 - プロパティの順序整理
プロパティの順序がルールに基づいて自動的に調整されます。 - 文字のフォーマット
例: 色コードの小文字化（ #FFFFFF → #ffffff ）。
修正できないケース
以下のような問題は手動修正が必要です。
- 重複セレクタやプロパティ
自動では適切な重複の解消方法を判断できないため手動で整理が必要です。 - 構文の欠陥
空のブロックや明らかに不完全な記述。
これまで手作業で整理していたので、自動化の便利さに驚きました。
VSCodeの拡張機能ではこれらを自動で行ってくれます。
