【VSCode】仮想サーバ上のファイルをWindowsで編集する方法

【VSCode】仮想サーバ上のファイルをWindowsで編集する方法

※今はRemote DevelopmentというプラグインがMicrosoft公式から出ており、こちらの方が使いやすいです。
(2019年9月7日現在)

>>Remote Developmentを使ってVSCodeでリモート開発する方法

 
前回に引き続きCentOSのお話です。

VirtualBox上にCentOSをインストールして、そこにPythonやらgccを入れて実行できる環境を作りましたが、実際コードを書ときは入力補助などの便利機能がついてるエディタを使って書きたいですよね。

でも今回導入したCentOSはコマンドしか扱えないため、エディタを使用するには別の方法をとる必要があります。

そこで今回取り入れたのは「Visual Studio Code」(通称VSCode)を使ってCentOS上のファイルを直接編集する方法です。

独学がつらいと感じているあなたへ

TechAcademyなら、1週間無料でプログラミングスクールの体験をオンラインで受けることが可能。

この無料期間にわからない部分の質問をするのもいいですし、プログラミングスクールの雰囲気も体験できるので、いい刺激になりますよ。

目次

拡張機能のインストール

今回はVSCodeの拡張機能である「ftp-simple」というプラグインを使用しました。

VSCodeのMarketplaceで「ftp-simple」と検索し、インストールします。

SSH接続するための設定

インストールが完了したらCentOSへとSSHで接続する設定をします。

VSCode上でF1キーを押してコマンドパレットを表示させます。

そこでftpと検索すると先程インストールしたftp-simpleの項目が出てきます。

その中のConfigを選択します。

コンフィグファイルが開きますので、ここでCentOSへと接続するための設定をします。

コンフィグファイルの中身はこんな感じです。

そこまで行数多くなくいので見やすいですね。

らけ

それぞれの項目について解説します。

  • name:識別名なので好きにつけて大丈夫です
  • host:CentOSに設定してあるIPアドレスを書きます。ここで書いたIPアドレスに対して接続しに行きます
  • port:SSH接続を使用するので22番ポートに設定します。ポート番号を変えている場合はその番号を設定してください
  • type:SSHを使うのでsftpで
  • username:CentOSのユーザ名を書きます
  • password:上で設定したユーザアカウントのパスワードを書きます
  • path:最初にアクセスするディレクトリのファイルパスです。下階層に降りることはできるので/でいいんじゃないかなと私は思ってます
  • autosave:自動保存機能の有効化or無効化です。無効にする場合はfalseに書き換えます
  • confirm:保存時に本当に保存していいのかと確認されるようになります。確認がいらなければfalseで無効化できます

設定できたら保存してから閉じます

これでVSCodeからCentOSに接続ができるようになりました。

保存を忘れると設定が反映されないので注意です。

VSCodeでCentOSにアクセス

F1キーを押してコマンドパレットを表示させて、Remote directory open to workspaceをクリックします。

すると、コンフィグファイルに設定したpathへとアクセスし、そこのディレクトリ一覧を表示してくれます。
そこから作業用ディレクトリを辿って追加します。

これでCentOSのディレクトリがWorkspaceに追加されるので、そのディレクトリのファイルの編集が簡単にできます。
編集して保存すればそのままCentOSにも反映されます。

最後に

今まではサーバ側にも編集用にエディタを苦労しながら入れてましたが、VSCodeのおかげでその手間なくサーバ上でコードを書いたり編集したりすることができます。

他のPCにも同じようにVSCodeを入れてこの設定をすれば同じようにSSH接続をして編集することができるので便利です。
(LAN内だけですが)

これで環境が整ったので、本格的にネットワークプログラミングの勉強を始めていこうと思ってます。

学生ならPrime Studentがお得!

もし、あなたが学生ならを使うことで、参考書を実質10%OFFでお得に買うことができます。

とは、通常会費の半額の月額250円で、Amazonプライム会員と同じサービスを受けることができるようになるサービスです。

しかも、には通常のプライム会員とは別に、

  • Adobe Creative Cloudが5%OFF
  • Microsoft365 Personalが5%OFF
  • Jabraワイヤレスイヤホンが最大4,000円OFF

などの特典が盛りだくさん!

学生のうちにしか受けることができないサービスなので、このチャンスを逃さないようにしてください。

>> Prime Studentをチェック

よかったらシェアしてね!
目次
閉じる