Atomでcssのコーディング間違いチェックをするlinter-csslintの使い方

Pocket

Atomテキストエディタでcssのコーディング・スペルミス・構文など間違いチェックをするにはどうしたらいいの……よくわからない……と思いませんか? Atomでcssの間違いチェックをする時にはlinter-csslintパッケージ(=補助プログラム)を使用するのですが、ちょっと慣れが必要です。ということで今日はAtomでcssのコーディング間違いチェックをするlinter-csslintの使い方について説明しますね。

linter-csslintパッケージをインストールしていない人はこちらからお願いします。

Atomでhtmlとcssの間違いチェックをしてくれるパッケージlinterのインストール方法

あとエラー情報をみるには、見方を知っておく必要があります。『よくわからないなぁ』という人はこちらをどうぞ。

Atomでエラーチェックをするlinterステータスバーの見方・使い方

linterとlinter-csslintパッケージインストールはできましたか?それでははじめますね。

既にあるcssファイルの場合

既にあるcssファイルの場合cssのコーディング・スペルミス・構文など間違いチェックは、ペインに表示した時点で行われます。 たとえば、cssファイルをツリービューから選択してペインに表示すると間違いチェックが行われます。

オレンジ色●(警告)、赤色●(エラー)が表示されているところが、cssのコーディング・スペルミス・構文など間違いの可能性がある場所です

新規作成のcssファイルの場合

新規作成のcss場合は、(ファイル名をつけて)保存した時点で間違いチェックが行われます。保存する前には行われないので注意してください。

オレンジ色●(警告)、赤色●(エラー)が表示されているところが、cssのコーディング・スペルミス・構文など間違いの可能性がある場所です。

ErrorとWarningの違い

cssの場合は、ErrorとWarningが多く表示されているかもしれません。まずはエラー詳細メッセージをみてみましょう。表示されていない時は、linterステータスバーのFileタブをクリックして詳細メッセージを表示してください。

ErrorとWarningがあることがわかります。ちなみに「ErrorとWarningの違い」は以下のとおりです。

  • Error…エラー。エラーの修正が必要
  • Warning…警告。エラーの可能性あり。エラーの修正が必要かもしれない。

Warning(=警告)に対して修正するかどうかの判断が難しいですが、とりあえずは正しく表示されていれば修正はしなくていいと思います。

ちなみに Error や Warning はこちらの規則に従って行われています→「https://github.com/CSSLint/csslint/wiki/Rules」。本来は Warning(=警告)も表示されないように、きちんと規則に従って書くべきですが、現時点ではちょっと難しすぎますね。

まとめ

今日はAtomテキストエディタでCSSのコーディング・スペルミス・構文など間違いチェックをするlinter-csslintパッケージの使い方について説明しました。注意点としては「css新規ファイル作成時には保存した場合にチェックが行われること」「Warning(警告)の場合は修正が必要かもしれないエラーレベルである」の2点です。それではまた。

Pocket