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

Pocket

AtomでHTMLとCSSの文法チェッカー「W3C Markup Validator」を利用するw3c-validationパッケージをインストールする方法および使い方の説明をしますね。 『linterの文法チェックをつかっているけど難しすぎてよくわかならない(+_+)……』というのは管理人だけではないかと思います。そんな人にもw3c-validationパッケージはおすすめです。 ということで、w3c-validationパッケージのインストール方法および簡単な使い方の説明をしますね。

インストール方法

それではw3c-validationパッケージのインストールをはじめますね。まずは[ファイル]→[環境設定]で設定画面を表示します。 ↑動画が動いていない時は、画像をクリックしてください。

設定画面の[Install]をクリックしてください。パッケージのインストール という画面が表示されます。 ↑動画が動いていない時は、画像をクリックしてください。

検索枠に w3c-validation と入力し、[Packege]ボタンをクリックしてください。しばらくすると w3c-validation が表示されます。 ↑動画が動いていない時は、画像をクリックしてください。

[Install]ボタンをクリックするとインストールを開始します。しばらく時間がかかりますので、お待ちください。 ↑動画が動いていない時は、画像をクリックしてください。

インストールが終了すると、以下の画面のようになります。[Setting]、[Uninstall]、[Disable]の各ボタンが表示されていますね。これでインストールは終了しました。

では、次に使い方を説明しますね。

使い方

ではw3c-validationパッケージの使い方を説明しますね。オプションでいろいろ変更できますが、まずはインストール直後の状態のまま使う方法を説明します。

といっても簡単で、まずはhtmlを開いてください(CSSでも同じ操作になります)。そこでCtrl+sなどの保存します。

すると下部に情報画面(=パネル)が表示され、エラー一覧が表示されます。 基本的には、この一覧で表示されているエラー等を確認しながら、修正していきます。

たとえば、画面下部の情報画面(=パネル)に表示されているエラー一覧から、選択し、クリックするとエラー箇所へカーソルが移動します。

便利ですね。

情報画面(=パネル)の右側にある3つのアイコン

ここで情報画面(=パネル)の右側にある3つのアイコンをそれぞれ説明しておきますね。

一覧の行頭・行末移動アイコン

一番左側の[一覧の行頭・行末移動]アイコンは、多数のエラーあり、一覧をスクロースしないと見えない場合に使用します。クリックすると一覧の一番下、または一番上に移動できます。

折りたたみアイコン

真ん中の[折りたたみ]アイコンは、情報画面(=パネル)を、展開したり、折りたたんだりします。

閉じるアイコン

一番右側の[閉じる]アイコンは、情報画面(=パネル)を閉じます。 再度表示するときは、Ctrl+sなどの保存操作をしてください。

まとめ

今日はAtomでHTMLとCSSの文法チェッカー「W3C Markup Validator」を利用するw3c-validationパッケージをインストールする方法および使い方の説明をしました。 『linterの文法チェックをつかっているけど難しすぎてよくわかならない(+_+)……』というのは管理人だけではないかと思います。そんな人にもw3c-validationパッケージはおすすめです。 w3c-validationパッケージにはいくつかオプションがあり、動作を変更することができます。その説明はまた改めて記事にしますので、しばらくお待ちください。 それでは。

Pocket