VScodeの初期設定

2021年4月20日

まさかのBrackets様の終了に伴い後継として紹介されるVScodeをセッティングする。

ダウンロードとインストール

Visual Studio Codeインストール手順＜Windows向け＞
ダウンロードとインストール参考

を参考にさせてもらいダウンロードしてインストール。これはスムーズに完了。Visual Studio Code　https://azure.microsoft.com/ja-jp/products/visual-studio-code/がダウンロード公開サイト。

日本語化

日本語でないと読めません。以下のサイトを参考に日本語化

https://rfs.jp/sb/vsc/vsc-japanese.html

ありがたやありがたや。簡単に日本語になりました。

ライブビュー

これが曲者でした。

https://eguweb.jp/html/live-server-extended-function-that-checks-in-real-time-when-editing
を参考にしてすすめます。拡張機能を入れて右下のgoliveボタンをクリック。簡単これだけで見れるかと思いきやPHPファイルは開けない、ページの切り替えができない、と何が何だか分かりません。検索してゆくともう一つ必要な拡張機能がありました。

live-server-web-extension

これをchromeに入れる必要があり、有効化の設定をします
LiveRelodoをオンにして、 don’t want proxy setup (recommended)からチェックを外します。

次にvscode側の設定です。
https://ipsjk.nori2tae.com/178を参考にさせて頂き、

Live Server Configのsetting:Proxyで

"liveServer.settings.proxy": {
    "enable": true,
    "baseUri": "/",
    "proxyUri": "http://localhost"

と修正する。そのうえでsetting:Use Web Extでチェックを付けます。
編集フォルダ上に.vscodeフォルダを作りsettings.jsonファイルを作ったうえで上記を記載してもよい。（ワークスペースに作成）

とりあえずここまででPHPファイルがLiveViewできるようになりました。ただ、ファイルの保存の場合は更新されるが、別ファイルの修正や変更した場合Brackesのように別ファイルのLiveviewにならない。一回切ってから開きなおせばライブビューはできる。まーこれはそんな問題にならない。ただ、下層のPHPファイルの場合には上記ProxyUriを下層に編集しないとできない。これはどなたかわかるかた教えて下さい。

WEB