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

Dec 07, 2016

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

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

条件

  • ・Mac OS 10.9
  • ・Sublime Text 3
  • ・Node.js インストール済み

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

  • ・SublimeLinter
  • ・SublimeLinter-contrib-scss-lint
  • ・SublimeLinter-contrib-sass-lint

大きく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でもカスタマイズ方法をまたしようと思っていますのでそれまで待っててくださいー!