VS Code の Docker 拡張機能の使い方

この記事は最終更新日から 1年以上 が経過しています。

VS Code に Docker 拡張機能をインストールすると、 Dockerfile もしくは docker-compose.yml ファイルを編集する際にコード補完機能が使用できるようになったり、 VS Code から Docker のコンテナやイメージを操作できるようになります。

Docker 拡張機能のインストール

さっそくですがインストールしていきましょう。

VS Code に Docker 拡張機能をインストールするには、 拡張機能の検索欄に「docker」と入力して検索しインストールします。 おそらく一番上に出てくるので迷わないとは思いますが、 もし同じ名前の拡張機能が表示された場合は、Microsoft 社製のものかどうかを確認しましょう。

install.png

コマンドパレット

拡張機能がインストールできたら、コマンドパレットに Docker を操作するコマンドが大量に増えていますので確認してみましょう。 VS Code の操作に困ったり、操作を覚えるのがメンドウな場合などに使用すると良いでしょう。

コマンドパレットを使用するには、Ctrl + Shift + P を使用します。 コマンドパレットで「>docker」と入力すると、追加されたコマンドを検索できます。

palette.png

Docker ファイルの編集

Dockerfile もしくは docker-compose.yml ファイルを編集する際に IntelliSense によるコード補完機能が使用できるようになります。 Docker のコマンドを補完してくれたり、ヘルプが表示されたりするようになります。

コード補完の一覧を表示したい場合は、Ctrl + Space を使用します。

構文エラーなどの内容を確認したい場合は、「PROBLEMS」パネル(Ctrl + Shift + M)で確認できます。

intellisense.png

コンテナの簡単な操作

Dockerfile もしくは docker-compose.yml ファイルの右クリックのメニューから、 コンテナの簡単な操作を行うこともできるようになります。

contextmenu.png

Docker エクスプローラー

VS Code に「Docker エクスプローラー」ビューが追加されます。 この Docker エクスプローラーを使用すると、Docker のコンテナやイメージなどを VS Code から操作できます。

Docker エクスプローラーを使用するには、VS Code のアクティビティバー(左端の縦のバー)の Dokcer のアイコンをクリックします。 コンテナやイメージなどを操作したい場合は、操作したい対象を選んで、右クリックでメニューを開いて、そこから操作することができます。 コンテナの起動や停止、再起動、ログの表示など、さまざまな操作を行うことができます。

explorer.png

コンテナ内のファイルを確認する

Docker エクスプローラーのコンテナの「Files」から、そのコンテナ内のファイルの一覧を確認することができます。 ファイルを開きたい場合は、ファイル名の右にある「Open」のアイコンをクリックすると、そのまま VS Code で開くことができますしかもそのまま編集もできます。 さらに右の「Download」のアイコンをクリックすると、そのファイルをコンテナからダウンロードすることができます。 かなり便利な機能なのではないでしょうか。

とはいえ、新しくファイルを作成したり、ファイルの名前を変えたり、コピーしたり、削除したりすることはできません。 ディレクトリも操作できませんし、パーミッションなども変えられません。 そういった細かい操作を行いたい場合は、コンテナ内に入ってコマンドで行う必要があります。

files.png

VS Code のターミナルでコンテナのシェルを開く

コンテナ内に入ってコマンドで何か作業をしたい場合は、 VS Code のターミナルでコンテナのシェルを開くと良いでしょう。 コンテナを選択し、右クリックでメニューを開いて「Attach Shell」を選択すると、 VS Code のターミナルでそのコンテナのシェルを開くことができます。

terminal.png

参考サイト

関連記事

Docker は、構成を気軽に組み替えたりできるので、とても便利ですよね。Windows で Docker を使って開発している方も多いと思うのですが、個人的にはどうしても気が乗らない理由がありました。それは処理速度です。遅い。遅すぎる。めちゃくちゃ遅い。つらい。耐えられない。。。ということで調査しました。いろいろと調 ...
最近では、アプリケーションの実行環境の構築に Docker を使うことも珍しくなくなりました。Docker は便利ではあるのかもしれませんが、難しく感じて敬遠されている人もいるのではないでしょうか。その感覚はおそらく間違っていません。実際、知れば知るほど奥が深い技術だと感じてしまいます。もはや沼というか深淵を覗いている ...
デフォルトの VS Code には、キーボードマクロ(キーマクロ)というキー操作を記録して再生するという機能がありません。秀丸エディタやサクラエディタなどで、キーボードマクロを多用していた方はかなり困るのではないでしょうか。そこで、VS Code でもキーボードマクロが使用できるようにしてみましょう。VS Code に ...
あまり頻度は多くありませんが、ファイルの内容をテキストではなくバイナリで確認したいときがあります。VS Code に「Hex Editor」拡張機能をインストールすると、VS Code 上でファイルの内容をバイナリで確認したり、直接バイナリで編集したりすることができるようになります。「Hex Editor」拡張機能のイ ...
デフォルトの VS Code の場合、PHP ファイルの関数一覧は表示されません。PHP ファイルが縦に長い場合は、関数一覧が無いと不便だと思いますので、VS Code で PHP の関数一覧が表示されるように設定してみましょう。アウトラインビューを使用するVS Code には変数や関数の一覧を表示するためのアウトライ ...

記事検索

最新記事

人気記事

RSSフィード

お知らせ

フィードバック

要望などあれば、お気軽にどーぞ。 不具合やバグを発見した場合も、連絡をいただけると助かります。

匿名でフィードバックする
匿名でフィードバックする

要望などあれば、お気軽にどーぞ。 不具合やバグを発見した場合も、連絡をいただけると助かります。

なお、このフォームから入力された内容について、管理者から返信はできませんので注意してください。 もし、管理者からの返信が必要であれば、X(Twitter) もしくは、お問い合わせより、お願いします。

  • フィードバックの送信が完了しました。