GruntでSass(.scss)の書式をチェックするプラグインを書いた

最近、人が増えた為に、他の方が書いたファイルのレビューをする機会が増えてきました。

コードの品質の維持、保守性を高めるには、コーディング規則・スタイルガイドなんかを整備するのが一番の近道なんですが、中々着手することが出来ず・・・。

とは言うものの、リリースするものに対して、最近ではhtml/css/jsの圧縮をかけるのがデフォルトになっているので、 基本的にはValidatorでエラーが出なければOKとしているんですが、Sass(.scss)については、どうしてもコンパイル前の物をチェックする為、どうしても共通のルールを作る必要がありました。

ただし、現状ではまだ共通のルールを決められていないので、ある程度自由度を持ってチェックできるような、Gruntのプラグインを書いてみました。

grunt-sass-format

Gruntについての詳細は、他に任せますが、一般的なGruntのプラグイン同様、

npm install --save-dev grunt-sass-format

でインストールされます。

オプションについて

indentChar

インデントとして使用する文字を指定します。

'\t'でタブ、' '(半角スペース)で半角スペースとなります。(それ以外の任意の文字でも構いませんが、一般的にはどちらかでしょう)

indentStep

インデント文字何文字を1つのインデントとするかを指定します。

タブなら1、半角スペースなら2 or 4、ご自身がお使いのエディタの設定等に合わせて指定して下さい。

blankLine

空白行の有無を判別します。

property

入れ子になっている部分の、プロパティ記述最終行〜次のセレクタ記述開始位置の間に対する空白行の有無を判別します。

close

閉じカッコ〜次のセレクタ記述開始位置の間に対する空白行の有無を判別します。

whiteSpace

セレクタ・プロパティ内での半角スペースの有無を判別します。

selector

セレクタ記述後のコンマ・カッコの前の半角スペースの有無を判別します。

property

プロパティ記述後のコロンの後の半角スペースの有無を判別します。

order

セレクタを1行に1つとするかを判別します。

debug

trueにすると、エラー以外の通知を表示します。

各種ツッコミ・フィードバック等々受け付けておりますので、よろしくお願いします。