ホームページを作りたいと思ってHTMLやCSSを勉強するにあたっていろいろなテキストエディタを利用しています。

その中の一つでとても使いやすい「Sublime Text3」は無料で体験版を利用することができます。

公式ホームページです→http://www.sublimetext.com/

このエディタはいろいろと機能を追加することでどんどん便利になっていきます。

その中で構文チェック機能を持つ「SublimeLinter」で「HTML5」をチェックするための設定を書いてみたいと思います。

HTML5のやり方に関しては調べ方が悪かったのかいまいちはっきりとした設定方法がわからなくて苦労したのでここに残しておきます。

他の言語に関してはググれば先人の優秀な方々がやり方を書いてくれているのでぜひそちらを参考にしてください。

ちなみに僕の使用しているマシンはwindows10 64bitです。他のバージョンや32bitOSを利用している人は違うところはそれぞれで補ってください。

バージョンがわからない人は→使用中のOSのバージョンとbitを確認する方法。を参照してください。

MACを利用している人のやり方はググれば出てきたのでググってください。実はMACは使ったことがないのでわかりません。

スポンサーリンク



SublimeLinterの導入と設定方法

SublimeText3でSublimeLinterを使用してHTML5を確認するためにはプラグインの導入の他にHTML用のプラグインとHTML5をチェックするソフトを用意する必要があります。

最後以外は簡単にできるのですが最後は何もわからない人には難しいと思うので簡単に説明します。（僕も最後のステップのやり方を調べるためにとても時間がかかりました。」

SublimeLinterをインストールする。

以下の手順はPackage Console導入後の話ですのでまずは「Package Console」を導入してください。

  1. SublimeText3 のパッケージコンソールを開きます。「Ctrl＋Shift＋P]
  2. 「install」を入力してエンター
  3. 「SublimeLinter」を入力後選択してエンター

以上です。

「SublimeLinter-html-tidy」をインストールする。

やり方は上と同じです。

  1. SublimeText3 のパッケージコンソールを開きます。「Ctrl＋Shift＋P]
  2. 「install」を入力してエンター
  3. 「SublimeLinter-html-tidy」を入力後選択してエンター

以上です。

「HTML Tidy For HTML5」を用意する。

ここまでは正直誰でもできます。

ここからは外部サイトからダウンロードしたうえでパスを通す必要があります。

ググってみてもできる人にとっては常識なのか細かいやり方が見つかりませんでした。

なので今回はやり方の一例を紹介してみたいと思います。

僕も正しいのかいまいちはっきりしませんが取り合えず使えるようにはなったのでいいことにしておきます。

「HTML Tidy For HTML5」をダウンロードする。

まずはこのサイト→http://www.paehl.com/open_source/?HTML_Tidy_for_HTML5

からHTML Tidy For HTML5をダウンロードします。

32bitOSを利用している人は「Windows EXE Version」

64bitOSを利用している人は「Windows EXE 64bit Version」

をそれぞれ選択してください。

Program Filesに移動させる。

※パスの位置を表すところがフォントの都合上￥が\になっていますがそこは各自で補完してください。

適当な解凍ソフトでダウンロードしたzipファイルを解凍します。

解凍したフォルダをフォルダごとまとめて　C:\Program Files　に移動させます。(別に他の場所でも構いません。今回は例としてProgram filesにしました。)

フォルダの中の「tidy.exe」を右クリックしてプロパティを開きます。

プロパティ内の場所の項目をみてexeを置いている場所を確認します。今回の場合は

C:\Program Files\tidy2_x64

となっているはずです。（64bitの場合。）

この場所の情報が次に必要になるのでマウスをドラッグして場所をコピーしておきます。今回の場合は「C:\Program Files\tidy2_x64」をコピーすればOKです。

tidy.exeの場所にパスを通す。

ここからはパスを通すという作業を行います。

簡単に言うとパソコンによく使うソフトの場所を記憶させておくことなのですが細かいことはどうでもいいのでやり方だけ書きます。

  1. スタートボタンで右クリックしコントロールパネルを開きます。
  2. 「システムとセキュリティ」を選択しさらに「システム」を開きます。
  3. 左にあるメニューの中の「システムの詳細設定」を開きます。
  4. 中の「環境変数」をクリックします。
  5. 下側の「システム環境変数」の中から「Path」を探し見つけて選択したうえで下の「編集」をクリックします。
  6. 一番上のボタンの「新規」をクリックします。
  7. 左に入力できるようになるので先ほどコピーした「C:\Program Files\tidy2_x64」を貼り付けます。「Ctrl＋v」
  8. 貼り付けるとしたの「ok」を押していきウィンドウを閉じます。

これでパスが通りました。最後に確認の為にコマンドプロンプトを開き

「tidy -v]　←間に半角スペースが必要です。

と入力しtidyのバージョンが表示されるとパスが通ったことが確認できます。

直接起動してもいいですがわかりにくいのでこちらの方法でやってみてください。

以上でSublimeLinter-html-tidyが使えるようになります。

討ち間違えやを忘れて閉じてないときなどのエラーを見つけてくれるので細かいミスの発見がしやすくなりhtmlの入力作業がはかどります。

ほかに入れているプラグイン

“CSS Snippets”,

“CSS3”,

“Emmet”,

“HTML5”,

上のようなプラグインは入れておくと途中まで入力すれば先を予想してくれ選べるようになるので作業が捗ります。

HTMLを書いていると膨大な量になるのでこのようなプラグインは大変ありがたいです。

標準の「メモ張」でコードを書くのは間違いなどもわかりにくいので作業が嫌になってしまいます。

他に無料で使えるのだと「TeraPad」あたりでしょうか。Tera Padも使いやすくはありますが構文のチェック機能等を追加することができないので実用性では大きく劣ります。

スポンサーリンク