Gulpで.sassファイルを保存したときにlintが検知してくれるようにする

注意事項

こちらを見ればわかる通り、sass-lintは2017年10月から、メンテされていません。

今現在使っても一応動きはしましたが、可能ならSCSS構文にしてstylelintでlintをかけたほうが良いと思います。

使うライブラリ

• gulp-sass-lint - npm

yarn add gulp-sass-lint --dev

タスク

lintタスクをつくる(一部抽出)

const paths = {
  sass: {
    watch: [
      `${developSrcRoot}/sass/**/*.sass`,
      `${developSrcRoot}/components/**/*.sass`
    ]
  }
}


gulp.task('lint-sass', () => {
  return gulp.src(paths.sass.watch)
    .pipe(sassLint())
    .pipe(sassLint.format())
})

gulp.task('lint', gulp.parallel('lint-sass'))

watchタスクでsassコンパイルと並列実行する

  gulp.watch(paths.sass.watch, gulp.parallel('sass', 'lint-sass'))

こんな感じ、sassタスクは普通にコンパイルしてgulp.destしてます。

watchの第二引数にtaskでなくpararellで複数タスクを指定するだけなので簡単でした。

sass-lint.ymlを書く

ドキュメントルート直下に .sass-lint.yml を置く

sample

ルール一覧はこちら

0が無視、1が警告、2がエラーのはず。

Vscode拡張機能

• sass-lint

入れるとターミナルとかが表示されているところの[PROBLEMS(問題)]タブでlintが検知してくれる。

lint事項の自動修正について

sass-lint自体には自動修正機能はない。（Issueを見る限り、featureブランチにはあるようだ)

sass-lint-auto-fixというものがあり、使ってみたりもしたがsassファイルがぶっ壊れるだけで終わったので終了

なお、sass-lint-auto-fixは最新版ではなぜかnode_modules配下にdistフォルダが含まれておらず、0.17.0を指定でインストールしたら動くところまではいきました(ファイルは壊れたが)

最後に

scssのほうが良いと思います。