stylelint を試してみる

　CSS の文法チェックを試してみます。npm でローカルインストールします。

インストール

　インストール後に設定が必要です。.stylelintrc.json を新しく作ります。

$ sudo mkdir /opt/stylelint
$ cd /opt/stylelint
$ sudo npm install --save-dev stylelint stylelint-config-standard
$ sudo vi .stylelintrc.json
{
  "extends": "stylelint-config-standard"
}

　これで OK です。

チェック

$ npx stylelint cssファイル

　minify したものはエラーが出まくりました。チェックは minify する前のファイルでやります。

　一度も文法チェックしたことがないのでエラーが出まくりましたが、ちょっと厳しすぎるくらいチェックしています。ここまでやらなくても問題ないのですが、エラーを見ると直したくなります。

　2 箇所だけ、どう修正すればいいかわからない点を除いて全部修正しました。

SHELL スクリプトで実行

　htmlHint と同じ様に SHELL スクリプトを作って何処からでも実行できるようにします。

$ sudo vi /usr/local/bin/stylelint
#!/bin/bash

INSTALL_DIR=/opt/stylelint

if [ -f "${PWD}/$1" ]; then
    file="${PWD}/$1"
else
    file="$1"
fi

cd ${INSTALL_DIR}
npx stylelint "${file}"
$ sudo chmod +x /usr/local/bin/stylelint

　次は、ESlint かな

web サイト

Posted by sirius