Visual Studio Codeとは？
Visual Studio Code（以下VSCode）は、Microsoftが開発したソースコードエディタで、最近人気が急上昇しているエディタです。
Google TrendsでVSCodeを検索してみると、日本だけでなく世界でも人気が出てきているエディタだとわかります。
個人的にVSCodeが良いと思う点は、
- 動作が軽い
- UIがわかりやすい
- カスタマイズ性が高い
- 多くの言語をサポート
などがあります。インストールも簡単にできるので初心者にもおすすめのエディタです。
Visual Studio Codeのインストール方法
以下のサイトからインストーラーをダウンロードします。
ダウンロードしたインストーラーを起動してインストールを開始します。
1. 同意する にチェックし、次へをクリックします。
2. インストール先フォルダを選択し、次へをクリックします。
特にこだわりがない場合はそのままでOKです。
3. プログラムグループを設定し、次へをクリックします。
特にこだわりがない場合はそのままでOKです。
4. 追加タスクを選択し、次へをクリックします。
PATHへの追加は必ず選択しましょう。
その他はお好みで選択してください。
5. 設定内容を確認し、インストールをクリックしてインストールを開始します。
インストールにはしばらくかかるのでそのまま待ちましょう。
6. これでインストールは完了です。
実際にVSCodeを起動してみましょう。
Visual Studio Code の使い方
画面の役割
VSCodeを起動すると以下のような画面が表示されます。
1. アクティビティバー
アクティビティバーには、VSCodeの機能がアイコンとして表示されています。例えば１番上のアイコンはエクスプローラー、２番目は検索、１番下は設定、下から２番目は拡張機能になります。アイコンを選択すると、サイドバーにそれぞれの機能のフォームが表示されます。
2. サイドバー
サイドバーには、アクティビティバーで選択した機能のフォームが表示されます。
3. エディタ
エディタは実際にコーディングをする場所になります。言語（ファイル）によって様々なシンタックスハイライトがデフォルトで設定されています。また拡張機能を追加することによってより使いやすくカスタマイズが可能です。
4. ステータスバー
ステータスバーには現在開いているファイルのステータスが表示されます。ステータスにはファイルの種類、エンコード、Tabのスペース数などがあり、ここから変更することも可能です。
拡張機能の追加
VSCodeで拡張機能するには次の手順を行います。
1. アクティビティバーから拡張機能のアイコンを選択します。
2. サイドバーに表示された入力フォームから追加したい拡張機能のキーワードを入力して検索します。
3. 検索結果一覧が表示されるので対象の拡張機能の「Install」ボタンをクリックします。
たったこれだけで拡張機能を追加することができます。
日本語設定
VSCodeを日本語にする場合は「Japanese Language Pack for Visual Studio Code」という拡張機能を追加するだけです。
先程の手順を参考に拡張機能を追加してみましょう。インストールが完了したら一度VSCodeを再起動し、日本語になっていることを確認してみてください。
日本語になっていない場合は、追加した拡張機能が有効化されていることを確認してください。
ファイルの作成
VSCodeでファイルを作成するには、メニューバーのファイル > 新規ファイルを選択するか、Ctrl + N キーを押します。
ファイルを保存するには、メニューバーのファイル > 保存を選択するか、Ctrl + S キーを押します。
今回はお試しで index.html というファイルを作ってみましょう。
ファイルを作ったらエディタ上に ! を入力し、Tabキーを押します。すると以下のようにHTMLが生成されます。
これはEmmetといってHTMLのコーディングをサポートしてくれる機能です。VSCodeには標準でサポートされています。
生成されたHTMLを見ると、コードが色分けされていることがわかります。これはシンタックスハイライトといって、言語ごとにソースの可読性を上げるために色付けをしてくれます。VSCodeでは標準で様々な言語のシンタックスハイライトがサポートされています。
フォルダを開く
VSCodeでは、１つのフォルダを作業フォルダとして開くことができます。ファオルダを開くには、メニューバーのファイル > フォルダを開くを選択するか、Ctrl + N キーを押します。
アクティビティバーのエクスプローラーを選択し、開いたフォルダが表示されていることを確認しましょう。
VSCodeで開くことができるフォルダは１つまでとなります。複数のフォルダを開きたい場合は、ワークスペースを使います。
ワークスペース
ワークスペースはその名の通り作業場所のことで、複数のフォルダを選択して１つの作業スペースを作ることができます。
ワークスペースを作るには次の手順を行います。
1. メニューバーのファイル > フォルダをワークスペースに追加を選択し、追加対象のフォルダを選択します。
2. メニューバーのファイル > 名前を付けてワークスペースを保存を選択し、ワークスペース用のファイルを作成します。
3.ワークスペースを開く場合は、ファイル > ワークスペースを開くを選択し、作成したワークスペースファイルを選択します。
検索・置換
ファイル内の文字を検索する場合はCtrl + F キーを、置換する場合はCtrl + Hキーを押します。
エクスプローラーに表示しているすべてのファイルを対象にする場合は、アクティビティバーの検索アイコンを押し、サイドバーに表示されたフォームから検索・置換を行います。
まとめ
VSCodeは使いやすく、見た目も良いので初心者におすすめです。
最近人気のエディタなので一度使ってみてはいかがでしょうか。
- Visual Studio Codeのおすすめ書籍はコチラ -
コメント