はじめに

この記事は以下の3つの記事、

で、VirtualBox上にCentOS 7がインストールされている事を前提としています。

VSCodeとは

VSCodeとは、Microsoft社が開発して提供しているテキストエディタで『Visual Studio Code』の略称です。

拡張機能を導入することで、統合開発環境(IDE)と言っても良いほどの利便性が得られます。

Windows、Linux、MacOSそれぞれに提供されていて様々な言語に対応しており、それが基本的に無料で利用できます。

VSCodeがリリースされるまでは、Visual Studioというととにかく規模が大きく主にWindowsアプリケーションの開発に必要な機能が手あたり次第インストールされて結構なストレージサイズを必要としていました。

それがVSCodeではミニマルになり、必要な開発支援拡張機能をユーザーが選んでインストールするようになって、軽量でとても使いやすい開発環境となりました。ですから最近のソフトウェア開発の現場で最も使われているIDEは、おそらくVSCodeでしょう。

わたしはもう10年くらいNetBeans IDEを利用していてそちらに馴染んでいるので普段はNetBeansを使っていますが、サポートが不十分な言語、例えばPythonやRuby等を書く時には選択肢の一つになります。

この記事では、VSCodeのインストールと、実際に開発をするにあたってそれを楽にするための設定などを紹介します。

WSLの検討

Windowsはシステム文字コードやファイルシステムの関係でWEBアプリケーションの開発に支障が出る事が少なからずあります。

この点については、Windows 10から導入されたWindows OS上の仮想環境でLinux OSを利用する仕組みである『Windows Subsystem for Linux (WSL)』を導入するとこの問題が大幅に改善できます。

VSCodeではWSLの為の拡張機能も提供されているので、可能であればWSLを導入する事をおすすめします。

WSL機能の有効化については『WSLの有効化とUbuntuのインストール』を参照してください。

VSCodeの導入方法

インストーラーの入手

まず、インストーラーをMicrosoft社の公式サイトから入手します。

公式サイト:Visual Studio Code – コード エディター | Microsoft Azure

VSCodeホーム

ダウンロードページ

ダウンロードしたインストーラー

インストーラーの実行

ダウンロードされたインストーラーを実行してください。最初に、ライセンス条項への同意を求められます。

ライセンス規約への同意

MITライセンスのようですね。最近のオープンソースソフトウェアは大抵MITライセンスになっているので非常に安心して使える(ライセンス的に、という意味)ようになりました。

参考:MIT License - Wikipedia

ソフトウェアのインストーラーを実行している時点で『同意しない』という選択肢は実質的に選べませんので、ユーザーは利用したければ同意するしかありません。

以降は、特別な理由がなければデフォルトの状態で『次へ >』で最後まで処理を進めて構わないと思います。

インストールする場所の確認

スタートメニューへの登録方法

その他のインストール関連設定

インストール前の最終確認

インストール処理

インストール完了

完了』をクリックすると、インストーラーウィザードが閉じてVSCodeのWelcome画面が開かれます。

VSCodeのWelcome画面

VSCodeの初期設定

WSLのサポート

Windows 10にWSLがインストールされている場合は、ウィンドウ右下に表示されているボタンからWSL用の拡張機能がインストールできます。

WSL拡張機能のインストールボタン

インストールされた拡張機能

VSCodeの日本語化

初期状態のVSCodeのインターフェイスは当然、英語です。

これの日本語化については賛否両論あって、日本語化しないと初心者がとっつき辛いですが、日本語化してしまうと、そもそものメニューやダイアログの表記が違うために、マイナーなトラブルに遭遇してGoogle検索してたどり着いた海外サイトのQ&Aの意味が分からない、というジレンマが生じます。

とはいえ、しょっぱなから何が書いてあるのかわからない状態で使い始めるよりはマシな事は事実なので、今回は日本語化する事にします。

メニューから View > Command Paletteを選んでください。あるいは、Ctrl+Shift+Pでも構いません。

Command Palette

プルダウンメニューで『Configure Display Language』を選択するか、検索窓に左記の文字の冒頭を入力すると、対応言語リストに変わります。

言語選択

現在は初期状態でen(英語)しかインストールされていないので、install additional languages...を選んでインストールする言語リストを表示、日本語の『Install』ボタンをクリックしてインストールしてください。

インストールする言語の選択

日本語のインストール完了

画面右下にポップアップメニューが表示されていますが、日本語インターフェイスのインストールを反映する為に、VSCode自体を再起動してください。インターフェイスが日本語されているのが確認できる筈です。

日本語化完了

必要なプログラミング言語の拡張機能をインストール

あとは、開発したいプログラミング言語の拡張機能をインストールします。

画面左に表示されているボタンから拡張機能のマーケットプレイスで、使用する言語を検索して必要な物をインストールしてください。

拡張機能マーケットプレイス

インストールされた拡張機能

SFTP拡張機能

VSCodeで編集したファイルを自動で即時的にサーバーにSSH接続でアップロードする為のSFTP拡張機能をインストールします。

SFTP拡張機能については前述と同様にマーケットプレイスにあるので『SFTP』で検索してインストールしてください。

SFTP拡張機能

SFTPでのファイル同期テスト

さて、ではVirtualBox上のCentOSとファイルの同期テストを行ってみましょう。

※SFTPについては、必要であれば『CentOSにSFTP接続でファイルを転送する』を参照してください。

ワークスペースの作成

まず、テストを行うフォルダを任意の場所に作成します。このフォルダがワークスペース用のフォルダになります。

テストフォルダ

このフォルダをVSCodeで開きます。

フォルダを開く

開いたフォルダ

SFTP接続情報の設定

VSCodeでフォルダがワークスペースとして認識されたら、Command Paletteを開きます。メニューから選択しても良いですが、頻繁に使うのでCtrl+Shift+Pで開きましょう。

検索窓で『SFTP: Config』を入力し、クリックしてください。開いたフォルダの中に.vscodeというこのワークスペース専用のフォルダが作られ、中にsftp.jsonというJSON形式の設定ファイルの雛形が作成されます。

SFTPの設定ファイルメニュー検索

sftp.json

SFTPはSSHプロトコルを使って通信を暗号化するので、Vagrant+VirtualBoxで利用しているアカウントと秘密鍵をそのまま利用しようと思います。

Vagrantで管理しているSSH用の秘密鍵の場所はVirtualBox上のゲストOSを起動した状態で

vagrant ssh-config

で確認できます。

VagrantのSSH接続設定

{
    "name":             "VirtualBox-CentOS7",
    "host":             "192.168.33.10",
    "protocol":         "sftp",
    "port":             22,
    "username":         "vagrant",
    "remotePath":       "/var/www/html/",
    "privateKeyPath":   "C:/Vagrant/centos7/.vagrant/machines/default/virtualbox/private_key",
    "uploadOnSave":     true,
    "ignore":           [".vscode", ".git", ".DS_Store", "node_modules", "map"]
}

新規ファイル作成

開いているワークスペース(フォルダ)内でマウスを右クリックし『新しいファイル』メニューからindex.phpというファイルを作成してください。

※画面右下に英語で『実行可能なPHPが見つかりません。PHP 7をインストールして環境変数PATHに追加するか、php.executablePath settigを設定してください』と表示される場合は、『WindowsホストOSにPHPをインストールする』を参照してWindows用のPHPをインストールして環境変数PATHを設定してください。

※今回はこのポップアップは無視して×ボタンでクローズし、そのまま進めても構いません。

index.php

一時的なバグ対応

2021年5月6日

実は、上記SFTP拡張機能ですが、直近で行われたアップデートによるバグが混入しているようです。

詳細はGitHubの開発者リポジトリにissue: 『error 'no such file' during upload on save #915』として上がっていますが、どうも開発元が、十分なバグチェックを行わないままリリースしてしまったらしく、SFTP接続でのファイルの同期は正しく行われており、エラーメッセージだけの問題のようです。

SFTP拡張機能のバグ

VSCodeのバージョンを1.55に下げて機能拡張を再インストールすれば問題は解消するようですが、恐らくは一時的なバグで近いうちに修正されると思いますので、わたしは暫定的に拡張機能のコードに一時凌ぎのコードを追加して対応しました。

参考:『#915のコメント

388行目

if (code === STATUS_CODE.OK) {
        ↓
if (code === STATUS_CODE.OK || code === STATUS_CODE.NO_SUCH_FILE) {

パッチコードを追加したらVSCodeを再起動してください。

これで、とりあえずエラーメッセージは表示されなくなります。

※2021/05/24現在でもまだこのバグは修正されていません。

ファイルの同期確認

では、ファイルが同期されているか確認してみます。

ブラウザを開き、アドレスバーにVirtualBox上のCentOSのIPアドレスを入力します。あるいは、hostsファイルを編集してホストOS内だけの独自ドメインを設定してある場合は、そのドメインでアクセスしても構いません。

ブラウザでアクセス

VSCode上のindex.php内の文言を更に編集してからブラウザをリロードする事で、編集が即時的に反映されるのが確認できると思います。