開発用エディタ VSCode

VSCodeとは

正式名称は「Visual Studio Code」。

Microsoft社が提供している無償のテキストエディタです。

多くの言語に対応しており、拡張機能やシンタックスハイライト、デバッグ機能なども用意されている為開発用エディタとして世界中の多くのユーザーから利用されています。

この記事の対象者

・プログラミング初心者
・コストをかけず、開発を始めたい方
・開発時に生産性を上げるたい方
・ VSCodeにどんな拡張機能があるのか知りたい方

1. VSCodeお勧めの理由

1．オープンソース　(誰でも無料でしようすることができます)

2．マルチプラットフォームで使用できる　(WindowsでもMacでも使用可)

3．多言語に対応している　(日本語、中国語、ドイツ語、フランス語etc...)

4．シンタックスハイライト　(特定のキーワードの色やフォントに変化をつけてコードを読みやすくする)

5．リファクタリングが使える　(コードを読みやすく整理する)

6．インテリセンス（補完機能）が使用できる　(使用できるコードの候補が表示される入力支援機能！効率よくソースコードが入力出来ます)

7． Git連携機能が使える　(Git使用時、VSCode上から操作できる)

8．デバッグ機能を備える

9．「拡張機能」によりさまざまな機能が使用できる、新機能に追加の余地がある

2. 例えばどのような拡張機能があるのか？

2-1. Japanese Language Pack for Visual Studio Code

この拡張機能を使用することでデフォルトは英語表示であるVSCodeを日本語化表示にすることができます。

2-2. vscode-icons

この拡張機能を使用すればファイル名に応じてアイコンを付与してくれる為、視覚的にファイルやフォルダの操作が使用しやすくなります。

2-3. prettier code formatter

この拡張機能を使用することで、整形されていないコードを保存時に自動でインデントをつけて整形してくれます。

2-4. indent-rainbow

この拡張機能を使用することで、コードスペースを視覚化してくれるため、インデントによるエラーを未然に防ぐことができます。

2-5. Path Autocomplete

この拡張機能を使用する事で、外部ファイルを読み込む際のファイルパス候補を自動で表示してくれるため、パスの記述ミスが未然に防げます。

2-6. zenkaku

この拡張機能を使用することで、全角の場合にしるしをつけてくれるので、全角空白によるエラーを未然に防ぐことができます。

2-7. HTML CSS Support

この拡張機能を使用することで、HTMLを作成時のclass名やid名を入力する際にCSSで既に定義されているものを自動で補完して表示してくれます。

2-8. HTMLHint

W3Cに準拠したチェックをしてくれる拡張機能です。

問題のある個所に波線が表示されます。

3. 拡張機能の追加方法

拡張機能を追加するときは、赤矢印の「Extentions」をクリックし、画面左上部の検索バーへ拡張機能のタイトルを入力し検索する。

4. サンプルのHTMLを作成しよう

１．htmlやcssファイルなどを置く作業フォルダを適当な場所に作成

今回はデスクトップ配下に「Sample」というフォルダを作成しました。

このフォルダの中にhtmlファイルを作成していきましょう。

２．htmlファイルの作成

VSCodeから先ほど作成した「Sample」フォルダを開きましょう！

[1] 赤網掛けの「フォルダを開く」をクリックします。

[2] エクスプローラーが開かれるので、先ほど作成した「Sample」フォルダを選択します。

[3]下記画面キャプチャのようにポップアップが表示されるので赤網掛けの「はい、作成者を信頼します」をクリックします。

※これはフォルダ選択時だけ毎回確認されますが特に気にしなくて大丈夫です。

[4] ①「新しいフォルダ...」をクリック

[5] ②フォルダ名入力バーが表示されますので任意のタイトル（今回は「samleHtml」とします。）を入力します。

[6] ①「新しいファイル,,,」をクリック

[7] ② ファイル名入力バーが表示されますので任意のタイトル（今回は「Test.html」とします。）を入力します。

３．htmlファイルの中身を作ろう

今回は「Bootstrap」というサービスを使って簡単にHTMLを作成してみましょう！

因みにBootstrapとはウェブサイトやWebアプリケーションを作成するフロントエンドWebアプリケーションフレームワークである。

タイポグラフィ、フォーム、ボタン、ナビゲーション、その他構成要素やJavaScript用拡張などが、HTMLおよびCSSベースのデザインテンプレートとして提供しているサービスです。

誰でも無料でWeb画面作成の知識がなくても簡単に高級なHTMLを作成できるので、初学者にもおすすめのサービスです。

■BootStrapは以下リンクからアクセスできます↓
https://getbootstrap.jp/

[1] 「はじめる」をクリックする。