いろいろやってみるにっき

なんとか自分の会社を立ち上げるところまで漕ぎ着けた、てきとーに生きている奴の日記

https化に伴い、表示できなくなっているリンクについて修復中。
2018年から遡って修正し、2015年分まで修正完了。


VS CodeのRemote Developmentを設定してみた ─WSL編

遅ればせながらVS CodeのRemote Developmentを使ってみた。本来であればVMとかVPS/CloudとかDockerのコンテナとかを触るのだが、WSL(Windows Subsystem for Linux)も触れるということで、手始めにWSLからやってみた。


Remote Developmentのインストール

ExtensionsでRemote Developmentを探す。

f:id:shigeo-t:20190626095356p:plain

グリーン白抜きの[インストール]をクリック。ウィンドウが開く。

f:id:shigeo-t:20190626095423p:plain

右下にVS Codeのバージョン上げろが出ている。

f:id:shigeo-t:20190626095444p:plain

そこでバージョンアップ。1.35になった。

f:id:shigeo-t:20190626095529p:plain

もう一度検索して[インストール]をクリックするとウィンドウを開いてインストール実行。

f:id:shigeo-t:20190626095602p:plain

左下にというアイコンが出る。はhtmlの<sub>タグと<sup>タグでアイコンと同じように上下にずらしてみた。

f:id:shigeo-t:20190626095621p:plain

 

WSLで使ってみる

をクリックすると上部中央にこのようなリストが出る。出るリストはマシンによって異なるので、今まで何をやったかで変わるようだ。このマシンではWSLも使っているしSSHはもちろん使うし、Dockerも入っている。

今回はRemote-WSL:New Windowを選択。 

f:id:shigeo-t:20190626095642p:plain

 

ちなみに一つ下のRemote-WSL:Getting Startedを選ぶと下記のページをブラウザに表示する。英語である。そして以下に書いたような手順が英語で書かれている。先にこれを読めばよかったw

 

Remote-WSL:New Windowを選択すると、新しいVS Codeのウィンドウがポップアップ。左下のはOpening Remote…になっている。

f:id:shigeo-t:20190626095721p:plain

そして右下にはこれ。オレのPCはWSL導入済なんだがこれはなんだろう。

f:id:shigeo-t:20190626095741p:plain

 そしてファイアウォールがポップアップ。node?このPCはWindows版のNode.jsもインストール済。[アクセスを許可する(A)]をクリック。

f:id:shigeo-t:20190626095757p:plain

 左下がWSLになった。

f:id:shigeo-t:20190626095826p:plain

 フォルダを開いてみると/home/shigeo-tからになっているので、明らかにWSLのディレクトリを指している。

f:id:shigeo-t:20190626095859p:plain

 node_modules/ を開いてみる。インストール済のjson2csv.jsがある。

f:id:shigeo-t:20190626095955p:plain

 開いてみるとこんな感じ。

f:id:shigeo-t:20190626100021p:plain

 

本体が日本語なのにWSL用が英語だと気持ち悪いので日本語化

元々のVS Codeは日本語化されているのに、WSL用で開いたウィンドウが英語版なのは気持ちが悪い。実害は無いが。そこでExtensionsでJapanese Language Packを検索。

f:id:shigeo-t:20190626100044p:plain

 インストールする。

f:id:shigeo-t:20190626100110p:plain

 Japanese Language Packの使用法(↑)の通り、設定してみる。コマンドパレットでconfigを入れるとリストに「ja」が出る。

f:id:shigeo-t:20190626100218p:plain

 VS Codeのこんなダイアログが出る。[Restart]をクリック。

f:id:shigeo-t:20190626100259p:plain

 本体とこのWSL子ウィンドウの両方が再起動され、WSL用のウィンドウも日本語化された。

f:id:shigeo-t:20190626100340p:plain

 

今度はVMVPSUbuntuCentOSにつないでみようと思う。オレの環境ではWSLのコマンドラインでcodeって叩くとWindowsVS Code使えてたから、このエントリに書いた機能は無くても困らないんだよな(ぉぃ

Visual Studio Code Distilled: Evolved Code Editing for Windows, macOS, and Linux

Visual Studio Code Distilled: Evolved Code Editing for Windows, macOS, and Linux