代码质量之：scss-lint

[youngwind]

前言

继上篇 #13 之后，我找到了这个scss-lint工具，用来控制scss代码的质量，效果还不错。

使用方法

安装

gem install scss-lint 

在安装的时候我碰到一个问题。

ERROR:  Could not find a valid gem 'scss-lint' (>= 0), here is why:
          Unable to download data from https://rubygems.org/ - SSL_connect retur
ned=1 errno=0 state=SSLv3 read server certificate B: certificate verify failed (
https://rubygems.org/latest_specs.4.8.gz)

解决方法：

gem source -a http://rubygems.org/

参考资料：https://github.com/brigade/scss-lint/issues/320

使用

scss-lint demo.scss

集成到gulp中之gulp-scss-lint

本来我是希望集成到webpack中的，就像eslint一样。但是没找到合适的loader，所以暂时只能集成到gulp中了。找到一个sasslint-loader，但是不太成熟，而且并非基于scss-lint，所以最后没有采用。

安装gulp-scss-lint

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

定义scss-lint 任务

gulp.task('scss-lint', function () {
  return gulp.src('src/**/**/*.scss')
    .pipe(cache('scsslint'))
    .pipe(scsslint({
      'config': '.scss-lint.yml'
    }));
});

这里用了gulp-cache提高性能 scss-lint有默认的配置，.scss-lint.yml中的配置会覆盖默认配置。

将scss-lint任务放到gulp-watch中

gulp.task('watch', function () {
  gulp.watch([
    'src/**/**/*.*'
  ], ['scss-lint', 'webpack-dev']);
});

效果图

[Rabbitzzc]

scss-lint能输入标准的scss代码么

[1ncounter]

有stylelint可以

在 2019年1月4日，下午6:29，SolerZhou [email protected] 写道：

scss-lint能输入标准的scss代码么

— You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub https://github.com/youngwind/blog/issues/19#issuecomment-451407876, or mute the thread https://github.com/notifications/unsubscribe-auth/ASqAPvYZ4_6r1JHws6E11k3FBDjMCNMcks5u_y0TgaJpZM4G9gpY.