Stylelintを利用してコードを自動整形する方法

cssを分析して間違いを指摘してくれるツールStylelint。
これを使えば複数人でコードを共有していても自動的に同じ作法で書かれたコードを作ることができます。
一度その仕組みを組んでしまえばあとは楽で便利ですが、導入部分が少し複雑なのでnpm-scriptsでStylelintを稼働して作法がバラバラなCSSファイルを自動整形できるようにするまでの流れを残して置きます。

前提条件

• node.jsがインストールされている

ディレクトリ構造作成＋パッケージインストール

プロジェクトフォルダを作成しnpmで必要なパッケージをインストールします

mkdir lintTest

cd lintTest

npm init -y 

npm i -D stylelint stylelint-config-standard stylelint-config-recess-order

パッケージの説明

styleint
stylelint本体です

stylelint-config-standard
stylelintのルール集です。
stylelintは設定項目が非常に多く自分で一つ一つ設定するのはとても大変ですが、このパッケージを入れるだけで簡単にルールを統一できます。

stylelint-recess-order
stylelintで自動整形する際にCSSの並びを統一してくれます。
-recess-はTwitter社が公開していた整形ツールRECESSのことです。
言い換えると「RECESSのように並び変えるstylelintのプラグイン」です。

.stylelintrc.jsを作成する

次に設定ファイルを作成します。ファイル形式は色々な選択肢がありJSON,YAML,Javascript形式が使用できます。
コメントアウト可能なYAMLかJavascript形式がよいので今回はJavascript形式で作成します。

touch .stylelintrc.js

vm .stylelintrc.js

module.exports = {
   extends: [
       "stylelint-config-standard",
       "stylelint-recess-order",
   ],
}

これでとりあえずstylelintを実行する準備ができました。

対象のCSSを作成する

CSSファイルを作成します。

mkdir -p src/css

cd src/css

touch style.css

npm-scriptsにタスクを記述する

package.jsonのscriptsにタスクを登録して実行します。

"lint:css": "stylelint src/**/*.css" --fix

※–fixオプションが重要です。これがないと自動整形されません

これでstylelintで検証し自動整形することができました。