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

scss-lint のインストール

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

• brigade/scss-lint: Configurable tool for writing clean and consistent SCSS

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 をインストールしましょう。

• juanfran/gulp-scss-lint: Gulp plugin to lint scss files with `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

• linter-scss-lint | Atom Packages

以上です。