Sublime Textでsass・scssのlintのカスタマイズできる設定方法

Sublime Textでsass・scssの記述を揃えたいとか間違っているところを事前にわかっておきたいってことありますよね。そんなときにはlintのパッケージが解決してくれます。

Sublime Textでsass・scssの記述チェックしたいなーと思ったとき、まず思い浮かぶのが、パッケージですよね。で、調べるとこんなのが出てきます。

大きく3つもしくは2つくらい出てくると思います。1つずつちょっと私が調べた見解も含め見てみましょう。

• ・SublimeLinter

  これはすべてのLinterにつながる大元のパッケージですね。ここからsass・scssやtypescriptなどのlintも派生できます。

• ・SublimeLinter-contrib-scss-lint

  これが結構上の「SublimeLinter」とセットで紹介されていることが多いんじゃないでしょうか。sass・scssのlintをしてくれます。

• ・SublimeLinter-contrib-sass-lint

  これは上の「SublimeLinter-contrib-scss-lint」より2年くらい遅くにリリースされたパッケージです。sass・scssのlintをしてくれます。
  今回はこっちを使います！

何でSublimeLinter-contrib-scss-lint？

理由は私的に使いやすかったから！というかちゃんと思った通りに動いたから！です！
あとはgulpのlinterとも共有で使えたのでこっちにしました。「SublimeLinter-contrib-scss-lint」でもうまく動くのかもしれないけど、動かなかったのでこっちにしました。あと、トレンドってあったのもつい手伝っちゃってますね。

ということで、この組み合わせで行きます！

SublimeLinterとSublimeLinter-contrib-sass-lint

ではでは、早速設定しちゃいますか。
まず、Sublime Text側とターミナル側でインストールするものがあります。とりあえず、Sublime Text側からしていきましょう。

Sublime Textでインストールするもの

これはお決まりのPackage Controlで下記の2つをインストールしてください。

• SublimeLinter
• SublimeLinter-contrib-sass-lint

※Package Controlがよくわからない人へ。
Command + Shift + pを打ってCommandPalettを出して、Package Control : Install Packageと打ったら枠が出てくるのでそこに上記の2つを打って選択してEnterを押してください。

Sublime Textでインストールするのはこれでおしまいです。

ターミナルでインストールするもの

SublimeLinter-contrib-sass-lintをインストールしたことにより、新たにパッケージが必要になりました。下記のコードを打ってください。

npm install -g sass-lint

はい、これでターミナル側でインストールするものも終わりです。

※gulpなどを併用する場合はローカルにもインスト−ル必要があります。

npm install sass-lint --save-dev

実はこれで終了

はい、これでSublime Textを1回終了させて再起動させてください。そして、scssファイルを開けちゃってください。左側に丸がついたり、コードに枠がついちゃったりしてエラー箇所を教えてくれます！

ということでここまでで一旦sass・scssのlintは入りました！お疲れ様でした！

カスタマイズしましょうよ。

これで一旦完了なんですが、触ってもらうとわかると思いますがやたらと厳しい。改行しないといけなかったり、空白入れないといけなかったり、あげくの果てには、widthはmarginより前でしょ！バカタレ！って言われてしまうんですね。

デフォルトはlint先生は厳しいので、嘆願書と言っていい「.sass-lint.yml」を作成して自分なりにカスタマイズしちゃいましょう！カスタマイズ方法はココを参考にするとよいと思います！koukiTipsでもカスタマイズ方法をまたしようと思っていますのでそれまで待っててくださいー！