VSCodeの導入

webで色々確認するツールを作っていた。最近はPythonでプログラミングすることが多い。経験としてWebサーバ側はphpで作っていることが多いし環境も持っている。でDBとしてmysqlも使っている。viの使い方も体が覚えているが、色々使うと混乱する。そのため、phpの文法エラーを見つけるのにえらく手間取った。そこで統合開発環境を使おうと思い立った。

で、何を使うかだ。以前もトライしたが、機能が多くて挫折した。かと言って、複数使うと本末転倒。で、資料が出回っており、有料で機能追加する必要がなさそうで、今使う言語に対応しそうなものを選んだ。それが、VSCodeだ。web版もあるようだが、今回は本体を入れてみる。まずは、ゲストを一つ作ってそこで、試してみようと思う。

インストール
リモートのWebサーバでPHPを開発できるようにする
phpのテスト実行
Pythonで使う
pythonをリモートで使う
pythonのテスト実行
mysqlを使う
参考

インストール

複数方法があるが、aptで自動アップデートできる方法にすることにした。snapは、設定が中に入って、updateすると消えることがあるので選択しないことにした。環境はubuntu 22.04　Ja　DISKトップを作った。レポジトリーの追加を行ってインストールした。

UbuntuにVSCodeをインストールする3つの方法 - Qiita

次の3つの方法を全部試してみました。感想としては1の方法が何となく正当なやり方なのかなと思ってましたが、2の方法がめちゃくちゃ簡単でした。基本的に公式サイトを参考にしています。マイクロソフトのリポ…

sudo省略

apt install curl
curl https://packages.microsoft.com/keys/microsoft.asc | gpg --dearmor > microsoft.gpg
cp microsoft.gpg /etc/apt/trusted.gpg.d/    < 今はコマンドでできたような気がするのだが、、、
echo "deb [arch=amd64] https://packages.microsoft.com/repos/vscode stable main" > /etc/apt/sources.list.d/vscode.list
apt install apt-transport-https
apt update
apt install code

コマンドで追加する方法が書かれているが。スタートメニュー？に追加されていた。

最近英語を使っていないので、日本語がないと少なくとも最初は厳しいので入れることにした。

Visual Studio Codeを日本語化する

Visual Studio Code はデフォルトでメニューなどの表示言語が英語になっていますが拡張機能「Japanese Language Pack for Visual Studio Code」をインストールすることで日本語に変更するこ...

codeのサイドバーに表示されている「Extensions」のアイコンをクリック。

Extensions の検索ボックスが表示されるので、「Japanese Language Pack」と検索。最初「J」を小文字にしていてでなくて焦った。

表示された Extensions の一覧の中から「Japanese Language Pack for Visual Studio Code」をクリック。

「Japanese Language Pack for Visual Studio Code」の画面で、「install」をクリック。

インストールが完了したら再起動を行う。完了後に画面右下に「Change Language and Restart」と表示されるのでクリック。

再起動されると日本語で表示されることになった。

リモートのWebサーバでPHPを開発できるようにする

参考にした情報

VSCodeでPHP開発のためのリモートサーバ環境構築ガイド

Ubuntuサーバ上でVSCodeを使用し、PHPのリモート開発環境を構築する方法を詳しく解説。NginxまたはApacheを利用したWebサーバの設定、MySQL/MariaDBのインストール、mysql_secure_installat...

VSCodeの拡張機能マーケットプレイスから「Remote Development」を検索し、インストール。一緒にRemote SSH、Remote Containers、Remote WSLが入る。

sshの設定　webサーバ側とcode動作側。＊省略＊

webサーバへ接続。VSCodeで以下の手順実施。

左下の「＞＜」アイコンをクリック。
上に出る「現在のウインドウをホストに接続する」を選択。
先ほど設定したwebサーバを選択
ソースのあるフォルダを開く（詳細省略　やり方がいっぱいあるが違いある？）

codeの中で　PHP拡張機能のインストール

PHP Intelephense：コード補完やエラーチェックを提供
PHP Debug：デバッグ機能を提供

WebサーバでXdebugをインストール

apt install php-xdebug

PHPの設定ファイルにXdebugの設定を追加　/etc/php/8.1/apache2/conf.d/20-xdebug.iniまたは/etc/php/8.1/fpm/conf.d/20-xdebug.ini (リンクされていて同じものらしい）

zend_extension=xdebug.so <=入っている
xdebug.mode=debug
xdebug.start_with_request=yes
xdebug.client_host=WebサーバのローカルIP
xdebug.client_port=9003

VSCodeでデバッグビューを開き、「Create a launch.json file」をクリック。PHPデバッグを選択し、以下の設定を追加または編集します。

{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Listen for Xdebug",
            "type": "php",
            "request": "launch",
            "port": 9003,
            "pathMappings": {
                "/var/www/html": "${workspaceFolder}"
            },
            "log": true
        }
    ]
}

ついでに　拡張機能として　「HTML　CSS　Support」を入れた。phpと一緒に書いているHTMLとCSSは理解しているようだったが、どのように変わるのだろう。