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

Pocket

Atomテキストエディタでhtmlやcssをコーディングしているとよく間違えるんだけど何か便利な方法はないのかな……と思いませんか? 実はAtomにはhtmlタグ・構文やcssスペルミス・構文などの間違いチェックをしてくれる便利なパッケージ(=補助プログラム)があります。今日はそのインストール方法を説明します。

なおlinterを使いこなすのはムズカシイなぁという人はw3c-validationパッケージ便利です。

AtomでHTMLとCSSの文法チェッカー「W3C Markup Validator」を利用するw3c-validationパッケージのインストール方法と使い方

各パッケージのインストールは終わっているので、使い方を知りたい(=゚ω゚)ノというアナタはこちらをどうぞ。

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

そうそう、日本語環境で使用するためのパッケージ「japanese-menu」をインストールしていない人は、先にインストールしておいてくださいね。→Atomテキストエディタを日本語環境で使用するためのパッケージをインストールする方法

3つのパッケージの簡単な説明

実はAtomテキストエディタでhtmlとcssの間違いチェックができるようにするには、linter・linter-htmlhint・linter-csslintの3つのパッケージをインストールする必要があります。パッケージについて少し説明しますと以下のとおりです。

  • linter……間違いチェックの基本プログラムおよび設定をする補助プログラム。
  • linter-htmlhint……htmlに関する間違いチェックをする補助プログラム
  • linter-csslint……cssに関する間違いチェックをする補助プログラム

ちなみにhtmlに関する間違いチェックをするには、linterパッケージとlinter-htmlhintパッケージの2つが必要になります。cssに関する間違いチェックをするには、linterパッケージとlinter-csslintパッケージの2つが必要になります。つまりlinterパッケージは必ずインストールしなければなりません。表にまとめると以下のようになります。

linterパッケージlinter-htmlhintパッケージlinter-csslintパッケージ
htmlの間違いチェック×
cssの間違いチェック×

3つのパッケージの関係がわかったところで、今度はパッケージのインストールをしましょう。

linter・linter-htmlhint・linter-csslintパッケージのインストール

それでは間違いチェックの補助プログラムであるlinter・linter-htmlhint・linter-csslintパッケージのインストールをはじめますね。まずは[ファイル]→[環境設定]で設定画面を表示します。

linterパッケージのインストール

設定画面の インストール をクリックしてください。パッケージのインストール という画面が表示されます。

検索枠に linter と入力してください。

パッケージボタン をクリックしてください。

しばらくすると linter という名がついたパッケージが数多く表示されます。linter の文字だけが表示された枠まで下の方にスクロールしてください。

Installボタン をクリックします。

しばらく時間がかかりますので、お待ちください。インストールが終了すると、以下の画面のようになります。Uninstallボタン・Disableボタンが表示されていますね。

linter-htmlhintパッケージのインストール

ふたたび設定画面の左側にある インストール をクリックして、検索枠を表示させてください。上の方にスクロールさせて戻ってもOKです。

検索枠に linter-htmlhint と入力してください。

パッケージボタン をクリックしてください。

しばらくすると linter-htmlhint と表示された枠が表示されます。

Installボタン をクリックします。

しばらく時間がかかりますので、お待ちください。インストールが終了すると、以下の画面のようになります。Uninstallボタン・Disableボタンが表示されていますね。

linter-csslintパッケージのインストール

検索枠に linter-csslint と入力してください(検索枠が表示されていない場合は、上の方にスクロールさせて戻って表示し、入力してください)。

パッケージボタン をクリックしてください。

しばらくすると linter-csslint と表示された枠が表示されます。

Installボタン をクリックします。

しばらく時間がかかりますので、お待ちください。インストールが終了すると、以下の画面のようになります。Uninstallボタン・Disableボタンが表示されていますね。

以上でAtomテキストエディタでhtmlとcssの間違いチェックができるようにするlinter・linter-htmlhint・linter-csslintパッケージのインストールが完了しました。

まとめ

今日はAtomテキストエディタでhtmlタグ・構文やcssスペルミス・構文などの間違いチェックをしてくれる便利な linter・linter-htmlhint・linter-csslint の3つのパッケージをインストールする方法を説明しました。linterと名がつくパッケージがたくさんあるのでパッケージ名を間違えないようにインストールしておいてくださいね。間違いチェックをする方法については長くなるので、別記事にて説明しますね。 htmlのコーディング間違いチェックをするlinter-htmlhintの使用方法 cssのコーディング間違いチェックをするlinter-csslintの使い方

Pocket