第1章 Visual Studio Codeとは
Visual Studio Codeインストール方法と構成を説明します。
homepage
# **Visual Studio Codeとは** *** <br> `Visual Studio Code`(以下"VSCode"とする)とは、 Microsoft社が開発したオープンソースのテキストエディタだ。 <br> ## **1-1・VSCodeの入手方法** <br> VSCodeはMicrosoft社の公式ホームページから入手することができる。トップページにインストーラのダウンロードボタンが表示されるので、クリックしてダウンロードしよう。 <br><br> 今回はWindows10にインストールする例を紹介しよう。 <br> ### **Visual Studio Code** <!--graph1-1.jpg--> <a href="https://i.loli.net/2019/09/12/DEGHk9pNSnWcXT6.jpg" target="_blank"><img src="https://i.loli.net/2019/09/12/DEGHk9pNSnWcXT6.jpg" width="40%"></a> <a href="https://code.visualstudio.com/" target="_blank">https://code.visualstudio.com/</a> <br><br> ## **1-2・VSCodeのインストール** <br> ダウンロードが終了したら、インストーラを起動して以下の手順でインストールしよう。 <br><br> (1)セットアップウィザードが表示されるので、「次へ(N)」ボタンをクリックしよう。 <br><br> <!--graph1-2.jpg-->   <img src="https://i.loli.net/2019/09/14/JUVrHvbSZwCdpcN.jpg" width="40%"> <br><br> (2)ライセンスの同意文書が表示されるので一通り目を通してから「同意する(A)」を選択して「次へ(N)」ボタンをクリックしよう。 <br><br> <!--graph1-3.jpg-->   <img src="https://i.loli.net/2019/09/14/gPoDT4imftdOrb5.jpg" width="40%"> <br><br> (3)VSCodeのインストール先の指定ができる。特に指定する必要のない場合はそのまま「次へ(N)」ボタンをクリックする。フォルダを指定したい場合は「参照(R)」ボタンをクリックしてインストールするフォルダを指定しよう。 <br><br> <!--graph1-4.jpg-->   <img src="https://i.loli.net/2019/09/14/dBsxD2KojtVJFCr.jpg" width="40%"> <br><br> (4)スタートメニューに表示されるプログラムグループの名前を設定する。特に変更する必要もないので、そのまま「次へ(N)」ボタンをクリックしよう。 <br><br> <!--graph1-5.jpg-->   <img src="https://i.loli.net/2019/09/14/aQRYMcoi1lfWH6O.jpg" width="40%"> <br><br> (5)いくつかの追加タスクを設定できる。デフォルトでは次のような設定になっているが、右クリックメニューからVSCodeを使いたい場合はコンテキストメニューに関する項目にチェックを入れておくといいだろう。すべてチェックしておいても問題ない。 <br><br> <!--graph1-6.jpg-->   <img src="https://i.loli.net/2019/09/14/zvUfauWMGwHpL3c.jpg" width="40%"> <br> (6)インストール前の確認画面が表示されるので「インストール(I)」ボタンをクリックして、インストールを開始しよう。 <br><br> <!--graph1-7.jpg-->   <img src="https://i.loli.net/2019/09/14/p8V6LXJi3yBkHE4.jpg" width="40%"> <br><br> (7)インストールが開始される。 <br><br> <!--graph1-8.jpg-->   <img src="https://i.loli.net/2019/09/14/yRHCgXVm59hsTLk.jpg" width="40%"> <br><br> (8)この画面が表示されればインストールは完了だ。 <br><br> <!--graph1-9.jpg-->   <img src="https://i.loli.net/2019/09/14/VBCRvtkbEo2JDYX.jpg" width="40%"> <br> ## **1-3・VSCodeの画面構成** <br> VSCodeの画面を見てみよう。VSCodeの画面は次の要素で構成されている。 <br> <!--graph1-10.jpg-->   <a href="https://i.loli.net/2019/09/14/b4tNWEfDPa1oCnV.jpg" target="_blank"><img src="https://i.loli.net/2019/09/14/b4tNWEfDPa1oCnV.jpg" width="40%"> </a> <br><br> ### **(1)アクティビティバー** *** VSCodeで主に使用される機能をアイコンで表示している。上のアイコンから順に、以下の機能を表している。 + エクスプローラー：開いているファイルを一覧表示する。 + 検索：ファイルから指定したキーワードを含むファイルを検索、置換する。 + `GIT`： `Git`と連携する。 + デバッグ：プログラムのデバッグを行う。 + 拡張機能：拡張機能の検索などを行う。 <br><br> ### **(2)サイドバー** *** アクティビティバーでエクスプローラーが選択されている場合はフォルダやファイル一覧、検索が選択されている場合は検索ワードの入力や結果表示など、アクティビティバーで選択した機能により異なる内容が表示される。 <br><br> ### **(3)エディタ** *** 開いているファイルの内容を表示する。もちろん、エディタの分割表示にも対応している。 <br><br> ### **(4)パネル** *** デバッグ情報やコマンドプロンプトなどが表示される。 <br><br> ### **(5)ステータスバー** *** 文字コードや改行コードなど、ファイルのステータスに関する情報を表示する。 <br> ## **1-4・拡張機能のインストール** <br> VSCodeの拡張機能は「VS Code Marketplace(以下マーケットプレイス)」と呼ばれるサイトで様々な拡張機能が公開されており、VSCodeから検索するとマーケットプレイスの検索結果が返される仕組みになっている。 (1)アクティビティバーの拡張機能アイコンを選択する。 <br> <!--graph1-11.jpg-->   <img src="https://i.loli.net/2019/09/14/7PZbtzTiOxDY9j5.jpg" width="20%"> (2)インストールしたい拡張機能の名前を入力する。 <br> **1-4-1・日本語化する** <br> (1)**japanese**と入力すると、Microsoftの日本語ランゲージパックが表示されるので、**Install**をクリックします。 <br> <!--graph1-12.png-->   <img src="https://i.loli.net/2019/09/14/JQzFEiy842abMuf.png" width="40%"> <br> (2)日本語ランゲージパックのインストールが完了すると、右下に以下のメッセージが表示されるので、**Restart Now**をクリックします。 <br> <!--graph1-13.png-->   <img src="https://i.loli.net/2019/09/14/VBzuv1q2Lb5xw6U.png" width="40%"> <br> **1-4-2・View-in-Browser** <br> (1)**View-in-Browser**と入力すると、**View-in-Browser**が表示されるので、**Install**をクリックします。 <br> <!--graph1-14.png-->   <img src="https://i.loli.net/2019/12/05/NMt1mC5KJqEgRSn.png" width="40%"> <br> **1-4-3・HTML CSS Support** <br> (1)**HTML CSS**と入力すると、**HTML CSS Support**が表示されるので、**Install**をクリックします。 <br> <!--graph1-15.png-->   <img src="https://i.loli.net/2019/09/16/SYXx72JkP8egciu.png" width="40%"> <br> HTMLドキュメントに対するCSSのサポートを行う <br> * クラス属性の補完 * ID属性の補完 * css、scssファイルの検索機能 <br> **1-4-4・Java** <br> (1)**Java**と入力すると、**Language Support for Java(TM) by Red Hat**が表示されるので、**Install**をクリックします。 <br> <!--graph1-16.jpg--> <!--graph1-17.jpg-->   <img src="https://i.loli.net/2019/09/14/j8ysSL5GbQ1IC4n.jpg" width="40%">   <img src="https://i.loli.net/2019/09/14/tLMzdQfKY2DImrl.jpg" width="40%"> <br> (2)インストールが終了すると、「再度読み込む」ボタンが表示されるのでクリックする。 <br> <!--graph1-18.jpg-->   <img src="https://i.loli.net/2019/09/14/FIjJZlY6pbkHqy7.jpg" width="40%"> <br> (3)ウィンドウの再読み込み確認のポップアップが表示される。拡張機能を有効にする必要があるので、「ウィンドウの再読み込み(R)」ボタンをクリックしよう。 <br> <!--graph1-19.jpg-->   <img src="https://i.loli.net/2019/09/14/UHpwQzGOLE1YqJD.jpg" width="40%"> <br> (4)ウィンドウの再読み込みが終了すれば、拡張機能のインストールは完了だ。 <br> なお、インストールした拡張機能を確認したい場合は、サイドバー右上の「…」ボタンからメニューを開いて、「インストール済の拡張機能の表示」を選択すると、インストール済みの拡張機能が表示される <br> <!--graph1-20.jpg-->   <img src="https://i.loli.net/2019/09/14/rIt3i5gEKc7XC24.jpg" width="40%"> <br> インストールした拡張機能の無効化や、アンインストールしたい場合は、拡張機能のリスト右下に表示されている歯車アイコンをクリックして、無効化やアンインストールを行うことができる。 <br> <!--graph1-21.jpg-->   <img src="https://i.loli.net/2019/09/14/gJvBEfr3ID75clu.jpg" width="40%"> <br> ## **1-5・文字コードに気を付けよう** <br> 使いやすく機能豊富なVSCodeではあるが、複数の文字コードを自動的に判別して表示する機能についてはまだ無いようだ。VSCodeはUTF-8がデフォルトの文字コードとして設定されているが、Windowsで主流のShift-JISなど、UTF-8以外の文字コードで書かれたファイルを開くと文字化けしてしまう。 文字化けしている場合は、以下の手順で文字コードを指定しなければならない。 <br><br> (1)ステータスバーの文字コードをクリックする <br> <!--graph1-22.jpg-->   <img src="https://i.loli.net/2019/09/14/Thiqys53WrkHp8K.jpg" width="40%"> <br> (2)エディタ上部のコマンドパレットに文字コード関連のコマンドが表示されるので、「エンコード付きで再度開く」を選択する。 <br> <!--graph1-23.jpg-->   <img src="https://i.loli.net/2019/09/14/Ui32PKd8eh15D7F.jpg" width="40%"> <br> (3)文字コード一覧が表示されるので、正しい文字コードを選択する。 <br> Shift-JISの場合は「Japanese Shift JIS」を選択する。 <br> <!--graph1-24.jpg-->   <img src="https://i.loli.net/2019/09/14/o1Ly9GZv8YijBSW.jpg" width="40%"> <br> (4)正しい文字コードを選択すれば、文字化けが解消される。 <br> <!--graph1-25.jpg-->   <img src="https://i.loli.net/2019/09/14/MNa2TLi6n9rm4Zq.jpg" width="40%">
content
戻る
