konchangakita

KPSを一番楽しんでいたブログ 会社の看板を背負いません 転載はご自由にどうぞ

【おてがる開発環境をつくろう】VS Code あれもこれもエクステンション

f:id:konchangakita:20210614213524p:plain:w200

VS Codeは、初期状態からエクスプローラ機能、ターミナルが使えて便利ですが、拡張機能(エクステンション)を導入することで真価を発揮します
エクステンションは数多くあるので、奥が深いです
とりあえず自分が使った範囲で、Python、Jupyter、Dockerを扱う環境で便利だったエクステンションをご紹介


【おてがる開発環境をつくろう】
1.まずは Docker Desktop インストール
2.Docker であそぶ Python 入りのコンテナつくる
3.コンテナで Jupyter Lab 環境
4.さいきょうのえでぃた VS Code
5.VS Code はあれもこれもエクステンション ←今ココ


とにかく便利なエクステンション(とりあえず入れておけ)
indent-rainbow:インデントに色をつけて見やすくしれくれます
Trailing Spaces:空白に色をつけて余計な空白の見落としを防ぎます
Material Icon:アイコンをかわいく表示
python:コーディングが楽になる
Jupyter:JupyterをVSCodeで実行
Docker:Docker機能を可視化
Remote Development:VSCodeからSSHして、ローカルかのようにファイル管理できる

indent-rainbow

タブごとに色分けにしてくれて、ぱっと見がわかりやすくなります
f:id:konchangakita:20210606160405p:plain

Trailing Spaces

無駄な空白を赤くみせつけてくれます
f:id:konchangakita:20210606160833p:plain

Material Icon

アイコン表示をかわいくしてくれます
f:id:konchangakita:20210606161033p:plain

python

構文に合わせて色とか変えてくれる
予測変換的なこと(Lint)もしてくます
f:id:konchangakita:20210606161313p:plain

Docker

コンテナイメージのビルドやコンテナ内のファイルをGUIで扱える
でも実際にファイルをいじるのはこの後の Remote-container の方が便利
f:id:konchangakita:20210606163211p:plain

Remote Development とにかく超便利

Remote-WSL, Remote-Containers, Remote-SSHの3つセットになっています
これがあるから VS Code はやめられない!
Remote接続して、エクスプローラで操作が可能になり、Remote接続先のファイルを ローカルと同じように VS Code で編集
Teratermさようなら案件

「Ctrl+Shift+P」でコマンドパレットを開き「remote」と入力
接続したい環境を選ぶ
 ・SSH
 ・Container
 ・WSL(使ったことない)
f:id:konchangakita:20210606165119p:plain

SSH 接続

初めて接続するホストの場合は「Add New SSH Host」
f:id:konchangakita:20210606165203p:plain

ホスト側の ~/.ssh/authorized_keys にkey設置しておけば、次回からサクッと接続
f:id:konchangakita:20210606165213p:plain

Container 接続

f:id:konchangakita:20210606165303p:plain

接続後は

作業フォルダを登録する
あとはファイルを選べば、後は VSCode上でコーディング
vi も FTP ももう不要!
f:id:konchangakita:20210606165402p:plain

再接続は

一度接続した接続先情報は覚えている 便利!
f:id:konchangakita:20210606182336p:plain

さいごに

これでおてがるにどんなところ(新しいPCとかWindowsMAC選ばず)でもちょっとした開発環境が作れるです
ローカルで作ったファイルをFTPでアップロードしたり、SSHして vi で編集するというのはもうやらないんだなぁ、と実感してしまいました
次はなにをつくろうか!