gulp-scss-lint で Sass (.scss) に Lint 導入する環境構築の手順

gulp-scss-lint で Sass の .scss ファイルへ Lint を実行するための環境を構築したので、その手順をご紹介します。

scss-lint のインストール

gulp-scss-lint は内部で scss-lint gem を利用しているため、まず scss-lint をインストールします。

gem install scss_lint

もしくは bundler を利用している場合は、

Gemfile

source "http://rubygems.org"
gem "scss_lint", "0.54.0"

というようなファイルを追加して bundle install しましょう。

gulp-scss-lint のインストール

scss-lint をインストールしたら、次は gulp-scss-lint をインストールしましょう。

npm install gulp-scss-lint --save-dev

.scss ファイルへ Lint を実行する gulp タスク

特定のディレクトリ以下の .scss ファイルに対して Lint 実行する gulp タスクのサンプルコードは以下の通りです。

const gulp = require('gulp');
const scssLint = require('scss-lint');
const ROOT_DIR = '/app';
 
gulp.task('scss-lint', () => {
  return gulp.src(
    [
      `${ROOT_DIR}/hoge/assets/stylesheets/*.scss`,
      `${ROOT_DIR}/fuga/assets/stylesheets/*.scss`,
    ])
    .pipe(scssLint({
      'maxBuffer': 10000
    })
  );
});

lint 導入直後はエラーや警告が大量に出ると思うので、その場合は maxBuffer に大きい値を指定するとよいです。

[おまけ] Atom パッケージ linter-scss-lint のインストール

僕は Atom エディタを使ってるので linter-scss-lint パッケージもインストールしました。

apm install linter-scss-lint

以上です。

関連記事