はじめに
はじめまして、WESEEK にてエンジニアをしている、藤澤です。
この記事では、個人的に推している VS Code でターミナルを扱う際の Tips のようなものを紹介させていただきます。
VS Code のターミナルを使う利点として
- コーディングとオペレーションで同じウィンドウ、同じショートカットキーで作業できる
- GUI、CUI の良いとこ取りができる
などがあると思っています。
そんな VS Code のターミナルを便利に使う方法の中でも、今回は code コマンド, devcontainer コマンドに関して紹介したいと思います。
codeコマンドとは
ターミナルから VS Code でファイルを開いたり、diff を見れるコマンドです。
VS Code でコマンドパレット(F1 を押すか Windows であれば ctrl + shift + P、Mac であれば command + shift + p)を開き、
Shell Command: Install 'code' command in PATH
を実行することでインストールできます。
使い方
基本的な使い方はターミナルを開き code file名 と入力することで VS Code でファイルを開けます。
以下ではファイルを開く以外に自分がよく使う code コマンドの使い方を紹介します。
ファイルのdiffを見る
code -d hoge.txt fuga.txt
と実行することでファイルの比較ができます。
ファイルを行数指定で開く
code -g hoge.txt:150
のように -g をつけて最後にコロンで行数を指定してファイルを開けます。
標準出力をパイプでVS Codeに表示する
今回特に紹介したいのがこちらでコマンドの実行結果などをパイプによって VS Code へ表示できます。
以下のようにコマンドの標準出力をパイプで code - にわたすことで表示できます。
ls | code -
このように VS Code によるシンタックスハイライトが効くので json や yaml などが見やすくなります。
curl の実行結果を受け取ったり、コマンドの出力を受け取って VS Code で検索、整形したりと応用が効くと思います。
devcontainerコマンド
devcontainer を開く際に code コマンドによってディレクトリを開き、その後左下のアイコンをクリックして「Reopen in Container」を選択、とやるのは二度手間なので、それを改善する devcontainer コマンドを紹介します。
code コマンドをインストールしたのと同様にコマンドパレット(F1 を押すか Windows であれば ctrl + shift + P、Mac であれば command + shift + p)を開き
Remote-Containers: Install devcontainer CLI
を実行することでインストールできます。
devcontainer open hoge-devcontainer-directory
と実行することで code コマンドを経由することなく devcontainer を開けます。
おわりに
今回は code コマンドと devcontainer コマンドについて紹介させていただきました。
特に標準出力を VS Code で表示する方法は、複雑なコマンドを打つ際に、途中で VS Code を経由しマルチカーソルとの連携や、置換したりすることで作業が単純になったりと色々応用が効くのでぜひ使ってみてください。
また VS Code は機能が豊富で開発も盛んなので今回紹介できなかった機能や、便利なショートカットなども今後紹介していきたいと思います。
参考
-
code コマンド
-
devcontainer コマンド
-
devcontainer の構築方法
-
おまけで面白そうな機能 (今後紹介するかもしれません)
