最近、WindowsでやっていたことをMacbookでやってみようとしているのですが、
Windowsでリモート環境の開発に愛用していたNotePad++がMacでは使えなさそうということに気づいたので、
かわりのツールとしてVSCodeを使うことにしてみました。
デバイス情報
Macbook Air m2
VSCodeのインストール
ダウンロード
こちらよりVSCodeをダウンロードします。
「Visual Studio Code をダウンロードする」をクリックすると対応OS一覧が出てくるので、自分の環境と同じものをクリックしましょう。


今回自分がインストールする対象はMacbookなのでMacを選択します。
するとダウンロードが始まります。
大体200MBぐらいあるので完了するまで待機。
インストール
ダウンロードが完了すると、以下のようなファイルがダウンロードフォルダにあるはずなので解凍。


解凍したら、「Visual Studio Code.app」をアプリケーションフォルダに移動させます。

これでVisual Studio Codeのインストールは完了です。
必要拡張機能のインストール
日本語化拡張機能
VSCodeはデフォルトだと英語の表示となっているため、日本語化します。
まずは左下の拡張機能のマークをクリック。(下図赤枠)

検索欄に「japanese laugage pack」と入力します。
出たきたものをインストールします。

インストールが完了すると、右下に以下のようなポップアップが出てくるので、「Change Launage and Restart」をクリック。

再起動後、日本語化が完了しているはずです。
Remote Development
リモート環境の開発ができるようになるライブラリです。
SSHで接続してファイルのやり取りができるようになる他、VSCode上でコンソールを動作させてコマンドの実行などができるようになります。
日本語化と同じように拡張機能のマークをクリックし、今度は「Remote Develop」と入力。

出てきたものをインストールします。
使用方法
リモート接続先の設定
「Remote Development」をインストールすると、左のメニューにリモートのアイコンが出ています。
ので、それをクリック。

プルダウンを「リモート」に変更します。

TunnelとSSHと項目があるので、SSHの「+」をクリック。

上部にSSH接続コマンドを入力する箇所が出てくるので、接続したいホストの情報を入れます。

例えば、192.168.1.100 に対して[test]というユーザーで接続したい場合は
ssh test@192.168.1.100
と入力します。
鍵を使いたい場合は-iオプションで指定もできます。(今回はパスワード認証です)
入力後Enterを押下すると端末のsshコンフィグの場所を聞かれるので、使用しているファイルを指定します。

デフォルトだとおそらく
/home/[username]/.ssh/config
だと思います。
ファイルを指定するとそのファイルに今回のSSH接続先の情報が書き込まれます。
接続方法
上記の設定が終わると、右下にポップアップが出てきます。
そこで「接続」を押下。

パスワード接続が必要な場合、上部にパスワード入力を求められる入力欄が出てくるので、パスワードを入力します。
また、一旦設定したあとは左メニューの「リモート」のアイコンをクリックして、SSHの設定に前回設定したホストのIPアドレス(またはドメイン)があると思うので、
その箇所から「現在のウィンドウで接続」もしくは「新しいウィンドウで接続」をクリックします。
接続後、左メニューの「エクスプローラー」のアイコンをクリックすると、「フォルダーを開く」というボタンがあるのでクリック。

リモート接続先ホストのどのフォルダを開くかを聞かれるので、自分が開きたいフォルダを入力します。
指定したら「OK」をクリック。
なお、接続しているユーザーで参照できないフォルダを選択しても権限の問題で開けないので注意です。

ちなみに、初めてフォルダを開く場合は以下のようなポップアップが出るので、「はい、作成者を信頼します」をクリック。

すると左に指定したフォルダに格納されているファイルが一覧で出力されます。

あとは編集したいファイルを探してクリックするとエディター部に表示してくれます。

コンソールの開き方
VSCodeでリモート接続して開発することの最大のメリットはターミナルが使えること(だと勝手に思ってる)
というわけでターミナルの開き方。

右上の上記画像のアイコンをクリックすると、下部にターミナルが表示されます。
コンソールじゃない場合は「ターミナル」のタブを開くとOK

これで編集したプログラムをすぐに実行することができます。
いちいち他のターミナルソフトを使わずとも、1つで完結しているのが非常に使いやすいですね。
コメント