WEB制作(html・css(スタイルシート))に関する各種メモ書き

Sublime Text で sass(scss)の最速構文チェック(lint)を行う

● SublimeLinter-contrib-sass-lint

1. SublimeTextの パッケージ SublimeLinter-contrib-sass-lintのインストール

Sublime Text から 「Command + Shift + P」 → 「Package Control : Install Package」を選択し、「SublimeLinter-contrib-sass-lint」をインストールします。

2. node sass-lint のインストール

npm install -g sass-lint

インストール後にインストールされたパスが表示されるのでそれをコピーして .bash_profile に書き込みます。

vi .bash_profile
#sass-lint
export PATH="$HOME/.anyenv/envs/ndenv/versions/v9.11.2/bin/:$PATH"

2. sass-lint のバージョンの確認

 sass-lint -V

バージョン 1.2.0 以上 であればOKです。

3. 構文チェック(lint)の実行

sass (sass)ファイルを開くと画面一番下に lint 結果が自動的に表示されます。 ファイル更新のたびに自動チェックが走ります。

4. 構文チェック(lint)のルールの変更

デフォルトではlintルールが厳しめなので ホームディレクトリに .sass-lint.yml ファイルを作成して lintルールをゆるくします。
ルールのデフォルトファイルはこちら
https://github.com/sasstools/sass-lint/blob/master/lib/config/sass-lint.yml

No.1290
09/03 10:51

edit