やったつもり屋

5人家族(専業主婦、子供3人、僕)の視点から伝えるお金のこと。本業:組込系エンジニア、副業:ネットショップ店主。

プログラミング

【環境構築】VSCodeをHTMLコーディング向けにカスタマイズ内容と手順

投稿日:

こんにちは、きむら @bokukimura です。

僕は本業がAndroidアプリ開発なのですが、最近はJavaScriptで出来ることが増えてきているのでJavaScriptを身に付けたい。

せっかくだから、フロントエンドの開発スキルを身に付けて、React Nativeでアプリ開発とか、Wordpressのプラグイン開発とか出来たらいいなと思って学んでいます。

学習の進捗などはTwitterでもつぶやいているので、気になった方はフォローしてくれると嬉しいです。

Twitter:https://twitter.com/bokukimura

さて、ここからが今回のテーマになるのですが、

コーディングの勉強を始めるにあたって、こんな感じのことを思ってました。

  • HTMLをコーディングするための環境は何が良いか?
  • できるだけ動作が軽いエディタが使いたい
  • タイプミスが多いのでタグの入力補完が付いてるエディタがいい
  • それから、タグは自然に閉じてくれるとやり易いから、そのようなカスタマイズも出来ると良いんだけど・・・。

という事で、

僕がHTMLのコーディングを勉強するにあたって準備した開発環境を紹介します。

本記事の内容(目次)

  • 結論:VSCodeをカスタマイズして使用
  • カスタマイズのポイントは、効率化と入力ミスを減らすこと
  • VSCodeの日本語化
  • HTMLタグの自動補完
  • 静的解析によるエラー検出

なお、僕は本業がAndroidアプリ開発なので、JavaやC言語のプログラミングが出来ます。かなり昔にホームページを作っていたことがあるのでHTMLの知識も多少あります。

そんな僕がHTMLをコーディングするために作った開発環境になります。

結論:VSCodeをカスタマイズして使用する

結論はVisual Studio Codeをカスタマイズして使用することです。

VSCodeを使用している理由としては、動作が軽く、プラットホームを選ばず使用できて、拡張機能も多くカスタマイズしやすい点が挙げられます。

いまはWEB系の勉強をしていますが、将来的にはアプリ開発も視野に入れているので、同じ環境でAndroidアプリの開発が出来るVSCodeがオススメです。他にもAtomエディタなど有名なものがありますが、個人的にVSCodeが使いやすいと感じています。

カスタマイズのポイントは、入力ミスをなくすこと

僕自身のカスタマイズのポイントは、できるだけ作業効率を上げる事です。そのために、入力補完と静的解析によるエラー検出機能を強化しています。

僕はタイプミスが多い人だから、タイプミスによる不具合を未然に防ぐことが目的です。僕はタイプミスは必ず発生するものと捉えて、拡張機能にて入力補完と静的解析によるエラー検出を強化しています。

経験の多い少ないに限らず、タイプミスは誰でも起こる可能性があるので、できるだけ発生しないように、仕組的になくす環境を整えると良いです。初心者であれば、なおさらタイプミスは避けて通るべき。

というのも、タイプミスによる不具合は原因が見つかりにくいため、発生させてしまうと、何時間も悩んでしまう可能性もあります。

だから、できるだけ発生しない環境を作って作業した方が良いですよ。

個人的にはライブプレビューもあると良いのですが、JavaScriptも含めてライブプレビューできる拡張機能が見つからなかったので保留しています。

以下に、VSCodeの開発環境を構築する方法を紹介します。

まずは、インストール手順からです。

VSCodeのインストール手順

以下のサイトから、VSCodeをインストールします。

https://azure.microsoft.com/ja-jp/products/visual-studio-code/

VSCodeはクロスプラットフォームのエディタなので、自分が使用する環境を選んでインストールします。

プラットフォームを選択した後は、ナビゲーションの通りにインストールすれば完了です。

VSCodeをカスタマイズする

VSCodeはプラグインを使用してカスタマイズして使用するのが一般的です。ここでは、僕のVSCodeのカスタマイズの内容を紹介します。

カスタマイズのポイントは、効率化です。

VSCodeを日本語に変更

僕は英語は得意ではありません。どちらかというと出来ない方だと思います。

でも、仕事がら英語は必須なので英語に対して拒否感はありません。しかし、英語表記の場合は探しているものがすぐに見つからない等、パフォーマンスが落ちるので日本語に変更しておきます。

ここでは、VSCodeを日本語化する手順を紹介します。

  1. アイコンメニューの一番下をクリック
  2. 検索窓に「Japanese Language Pack」と入力
  3. 「Japanese Language Pack for Visual Studio Code」をインストール

プラグインをインストールした後は、

「ctrl + shift + p」でコマンドパレットを開き、「configure display language」を入力します。

「en」を「ja」に変更します。

「Restart」を押してVSCodeを再起動します。PC再起動ではありません。あくまでもVSCodeアプリが終了して再起動されるだけです。

無事、日本後になりました。

HTMLタグを自動で補完

htmlの入力を補完してくれるプラグインです。入力補完や自動でタグを閉じてくれます。入力補完は必ず役に立つので入れておきましょう。

インストール手順は以下です。

  1. アイコンメニューの一番下をクリック
  2. 検索窓に「Auto Complete Tag」と入力
  3. 「Auto Complete Tag」をインストール

入力補完が効くようになりました。また、タグを入力すると自動で閉じてくれます。

HTML静的解析でエラーがわかるようにする

VSCodeには、HTMLの構文をチェックする機能はありません。そこで、静的解析の拡張機能を導入することで、構文エラーをチェックできるようになります。

インストール手順は以下です。

  1. アイコンメニューの一番下をクリック
  2. 検索窓に「HTMLHint」と入力
  3. 「HTMLHint」をインストール

無事にHTMLの構文エラーが検出できるようになりました。

終わりに

VSCodeには、今回紹介した拡張機能以外にも多種多様な拡張機能があり、自分の好みに応じてカスタマイズが出来ます。

僕自身も、上記の環境でドットインストールの初めてのHTMLをやってみましたが、まだまだカスタマイズが足りてないと思う部分もありました。個人的には、入力補足をもうちょっと強化したいところです。

お恥ずかしい話ですが、
<meta name="description">

<<meta name="discription">
とスペルミスしていたので、
こういったミスをできるだけ検出できるようにしていきたい。
※不等号は全角で記載してます

と考えています。

https://bokukimura.stores.jp/

https://twitter.com/bokukimura

-プログラミング
-,

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

no image

カードタイプのデザイン4種類のHTML&CSS

カードタイプのデザインのHTML&CSSを作成しました。 作成したデザインは4つです。 ブログタイプ、 ブログタイル、 値段表、 画像を配置したリスト 基本的なデザインはこのタイプのどこかに含まれると …

no image

【CSS】奇数、偶数、n番目でデザインを変更する方法

奇数偶数で色を変えたい。 奇数は画像を左寄せ、偶数は画像を右寄せ。 等にしたいときに使用する方法です。 最初の要素だけ適用

最後の要素 …

no image

【CSS】CSSで画像を中央でトリミングする方法

画像を中央位置でトリミングする

レスポンシブデザイン対応で 縦の高さのみを固定して、横幅は親要素いっぱいに表示させたい [crayon …

no image

【CSS】inline-blockの横並びの隙間を埋める方法

boxの間の改行コードが隙間を作る原因になるので、 親のスタイルでfont-sizeを0にして、子のスタイルで戻してやればできる

no image

ドットインストールの「実践!ウェブサイトを作ろう」の成果物と不明cssの調査

ドットインストールの「実践!ウェブサイトを作ろう」の成果物と不明cssの調査 この商品は、ドットインストールの「実践!ウェブサイトを作ろう」の課題を実際にやってみて、 出来上がった僕の成果物と、自分が …