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で検証し自動整形することができました。