【統合開発環境（IDE）】VSCode

 昔は開発するのにお金を払ってVisualStudioを使っていました。

今は会社での開発でVSCode(Visual Studio Code)という無料のツールを使ってます。

VSCodeは、Visual Studioは同じくMicrosoft社の提供する統合開発環境（IDE）です。

以下サイトでVSCodeについて解説されているので、読んでためしてみるとよいとおもいます。

【参考URL】

https://codezine.jp/article/detail/16467

https://codezine.jp/article/detail/16930

https://codezine.jp/article/detail/17116

 

 

サイトは会員登録していないと見れないですが、必要な情報をまとめると以下のようになります。

1、環境構築

(1) VSCodeの公式サイト(インストーラ）

Visual Studio Code – コード エディター | Microsoft Azure 

Windowsでは、x86（32bit）、x64（64bit）、ARM（64bit）の3つのアーキテクチャ向けにインストーラが用意されています。

インストール方法に合わせてファイルをダウンロードして、User Installer(使うのは自分自身だけ)かSystem Installer(PCの全ユーザが使う)を使う。

 

(2)  MACの場合のインストール

Visual Studio Code – コード エディター | Microsoft Azure

プラットフォームに合ったZipファイルをダウンロードします。

• Universal…Intelプラットフォーム／Apple M1プラットフォーム
• Intel…Intelプラットフォーム（x64）
• Apple-Silicon Apple M1プラットフォーム 

 ダウンロードしたZipファイルを解凍してできる.appファイルを、アプリケーションフォルダにコピーまたは移動します。これでインストールは完了です。

 

(3)  VSCodeを日本語化

一番左側のツールバー（アクティビティバーといいます）にある拡張機能アイコン　　をクリックします。

その内側のサイドバー（プライマリサイドバーといいます）の表示が「EXPLORER」（エクスプローラー）から「EXTENSIONS」（拡張機能）に変わります

サイドバーの上部にある入力ボックスに、「japanese」と入力します。

地球儀のアイコンの付いた「Japanese Language Pack for Visual Studio Code」に表示された、青い［インストール］をクリックします。

サイドバーの右に「Japanese Language Pack for Visual Studio Code」の情報が表示されますので、青い［インストール］をクリックします

ウインドウの右下に「in order to use VS Code in Japanese, …」と表示されますので、［Restart］をクリックします

 ※VSCodeを起動した直後に、ウインドウ右下にポップアップが表示されたら、それは自動で日本語化できる合図です。［インストールして再起動 (Install and Restart)］をクリックすると、自動的にプラグインのインストールが実行されて再起動します。

 

(4) VSCodeの設定

VSCodeのさまざまな設定は、アイコンをクリックして表示されるメニューから［設定］を選択することで行えます。

よく行う設定は以下となります。

・ 自動保存するか（Files: Auto Save）

    off：自動保存しない（デフォルト）
    afterDelay：Auto Save Delayで指定される時間後（デフォルトは1秒）に自動保存する
    onFocusChange：エディターからフォーカスが外れたら自動保存する
    onWindowChange：ウインドウが切り替わったら自動保存する

・フォントサイズ（Editor: Font Size）

　デフォルトは12ピクセルです

・ フォントファミリ（Editor: Font Family）

・タブサイズ（Editor: Tab Size）

タブ1文字に相当するスペースの文字数です。デフォルトは4ですが、別の設定（Editor: Detect Indentation）がオンになっている場合、ファイルの内容から自動判定される文字数で上書きされます。

・空白文字の表示（Editor: Render Whitespace）

　エディターで空白文字をそれとわかるように（暗いドットで）表示するかの設定です。ここでいう空白文字とは、半角スペースです。

• none：一切表示しない
• boundary：単語間の1文字の空白文字以外を表示する
• selection：選択したテキストでのみ空白文字を表示する（デフォルト）
• trailing：行末以外の空白文字を表示する
• all：すべての空白文字を表示する 　　
•  　
•  
  

※マルチカーソル

マルチカーソルを使うと、複数箇所に一気に同じ文字列を入力したり選択できるなど、コーディングを効率化できます。

マルチカーソルを設定するには、指定キーを押しながらマウスの左クリックを繰り返します。あるいは、指定キーと［Shift］キーを押しながらマウスをドラッグします。マウスを使いたくない場合には、指定キーと［Command］／［Ctrl］キーを押しながらカーソルキーを使用します。解除は［Esc］キーなどです。