凛とscss-lint。

今回はscss-lintの導入についてお話をしたいと思います。scss-lintとはその名の通りscssのlinter(コード検査ツール)なのですが、これを扱えるようにするにはRubyをインストールしたり、ymlで作成された設定ファイルを用意したり色々大変で、インターネット検索を行っても中々欲しい情報が落ちていなかったりするので一先ず実装をして機能するようにするまでをご説明していきたいと思います。なお、scssが扱える前提でお話をするのでそこまでの過程は割愛します。実装環境としては、OSはWindows10、エディタにAtom、タスクランナーにgulpを使用しています。npmにてgulp-scssなどをインストールし、コンパイルができる状態とし、Atomのパッケージlinter-scss-lintの使用法をご説明します。

STEP.1 Ruby及びRubyGemsのインストール

scss-lintとは、Ruby製の解析ツールみたいなので、Rubyなしにはインストールできないとのこと。いきなり制作で使用しない言語が出てきて僕も怖気づいて3日間は震えが止まりませんでしたが、実際にはRubyをインストールし、CLI（コマンドプロンプト）経由でscss-lintをインストールするだけで問題ありませんでした。震えも止まった。Rubyは下記リンクよりダウンロードできます。64bit OSの場合はx64版、32bit OSの場合はx86版を選択。・RubyInstallers https://rubyinstaller.org/downloads/

STEP.2 scss_lintのインストール

Ruby及びRubyGemsのインストールが終わったら、次はコマンドプロンプトでscss_lintをインストールします。

gem install scss_lint

※ここで注意！一般的に記載されてる名称はscss-lint(ハイフン)ですが、インストールする際はscss_lint(アンダースコア)で入力します。scss-lintでもインストールは可能ですが、どうやらバージョンアップに伴いscss_lintが最新のもののようです。scss-lintでインストールした場合、古いバージョンでのインストールになりAtomのlinter-scss-lintで機能しません。参照記事↓・https://qiita.com/SnowMonkey/items/781fa0d3190d0ff133b1

STEP.3 Atomにてlinter-scss-lintのインストール

scss_lintまでインストールできたら、今度はAtomのプラグインを追加します。環境設定→インストールと進み上記の画面まで来たら検索フォームに「linter-scss-lint」と入力しましょう。出てきました。インストールが終わったら、「setteings」を押して設定画面を確認しましょう。基本的に何かを入力する必要はないのですが、「Config Name」の箇所に「Default: .scss-lint.yml」と記載されています。.scss-lint.ymlというのは簡単に言うとscssの記述を行う際のルールを設定するファイルです。ここで書いた内容が、lintに反映され厳しくも緩くもできるというわけです。なので、最後に.scss-lint.ymlを作成します。

STEP.4 .scss-lint.ymlの作成

まずatomでもその他のエディタでも問題ないので拡張子を.ymlとした.scss-lint.ymlというファイルを作成します。.ymlというファイルがどんなものか知られたい方はこちら・https://wa3.i-3-i.info/word13804.htmlファイルを作成したら、プロジェクトのルートに配置し、その中身にルールを記載していきます。

DisableLinterReason:
 enabled: false

DuplicateProperty::
 enabled: true

この様な記述になります。簡単な意味合いとしては、 DuplicateProperty:（プロパティの重複というルール） enabled:（使用可能に） true（するかしないか）といった具合です。デフォルトで記載されている内容はこちら。・https://github.com/brigade/scss-lint/blob/master/config/default.ymlコピペでサクッとはっつけちゃいましょう。ルールは「カンマの後にスペースを入れてはいけない」「最後の行は改行しなければならない」といった細かいものから「IDでスタイルを指定してはいけない」「重複したプロパティを記述してはいけない」といったものまで、色々あります。デフォルトではルールが細かくしてありますので、最初は警告が大量に出ます。制作チームのガイドラインに沿ったものを作っていければと思います。ルールに関しては、公式ドキュメントが公開されているのでそちらでご確認を。基本的にtrueかfalseで適用するかしないかを設定できます。・https://github.com/brigade/scss-lint/blob/master/lib/scss_lint/linter/README.md上手く動作すればAtomの画面の右下にこのような表示がでます。上記の画像では警告が二つでていますね。該当の表示をクリックすると、画面下に下記のような表示が出ます。この場合、43行目と50行目のスタイルがDuplicatePropertyというルールに反してますよという表示ですね。上述にもありますが、DuplicatePropertyというのは、プロパティを重複させてはならないというルールです。.scss-lint.yml内にて、こちらがtrueになっているとlintが反応して知らせてくれます。

まとめ

・Ruby及びRubyGemsのインストール・scss-lintのインストール・AtomのLinter-scss-lintのインストール・.scss-lint.ymlをプロジェクトルートに配置以上の４ステップを踏めば、scss-lintが機能するはずです。scss記法は構造上入れ子が重なるので閉じタグがわかりにくくなったりしますが、scss-lintはちゃんと閉じられていないことも知らせてくれます。とても便利ですね。快適なscssライフを。～箸休め～業務と全く関係がないのですが、腰をやりました。腰を痛めた状態でのデスクワークは辛さしかないですね。前世で悪いことしたんだろうなって悔やんでいます。