この記事は、Visual Studio Code（以下「VS Code」といいます）でできるだけターミナルを使わないで開発する方法を紹介する記事です。
ターミナルを使わない理由
VS Codeはターミナルを内蔵しており、VS Codeを離れることなくコマンドを使って作業できることが便利とされていますが、初学者の方はコマンドを覚えていなかったり、ターミナルでの作業に慣れていなかったりすると思います。ですので、この記事ではVS Codeを使って便利に作業する方法をご紹介します。実際の開発の流れに沿って紹介します。
できるだけターミナルを使わないVS Codeでの開発方法
Gitの操作
まずはリポジトリをクローンしましょう。もちろん、ターミナルは使いません。まず、ソース管理を開きます。
ここで、リポジトリの複製をクリックすると以下のような小さなポップアップが出ます。
このテキストボックスにリポジトリのURLを入力するとクローンできます。
次にブランチを作ります。まずコマンドパレットを開きます。コマンドパレットを開くには、タイトルバーの🔎をクリックし、「コマンドの表示と実行」をクリックします、コマンドパレットに「ブランチ」と入力すると、以下のようにブランチに関する様々な操作が表示されます。「Git: ブランチの作成」をクリックします。そして、作りたいブランチ名を入力します。
コマンドパレットはCtrl + Shift + Pを押すことでも開けます。
このコマンドパレットからGit以外にも様々な操作ができますので、ショートカットキーを覚えておきましょう。
npmパッケージの操作
次に依存するライブラリをインストールして環境を構築します。私は普段、Node.jsのアプリケーションを開発していますので、npmパッケージをインストールします。コマンドパレットを開いて「タスク: タスクの実行」をクリックします。すると以下のようにどの種類のタスクを実行するかを選ぶポップアップが出てきます。ここではnpmパッケージをインストールしたいので、npmをクリックします。
最後にパッケージをインストールしたいのでタイトルバーに付近に表示される「npm: install」をクリックすると依存するパッケージをインストールできます。
npmのscriptを実行したい場合は、エクスプローラーの...をクリックし「Npm スクリプト」をクリックすると
以下のようにこのプロジェクトの全てのscriptsが表示されます。後は、実行したいスクリプト名にカーソルを合わせ、実行ボタンをクリックすると実行できます。
このようなnpmのscriptを実行したり、コマンドを実行したりする機能をtasksと言います。
Dockerの操作
最後にVS Codeを使ったDockerの操作について紹介します。まず、Dockerをインストールします。例えば、Dockerイメージをビルドしたい場合は、ビルドしたいDockerfileを右クリックし「Build image...」をクリックするとビルドできます。
また、Docker Compose upしたい場合は、Docker Compose upしたいcompose.yamlファイルを右クリックし「Compose Up」をクリックするとできます。
これらの方法の利点は、Dockerfileやcompose.yamlがあるディレクトリまで移動する必要がないことです。
まとめ
この記事では、できるだけターミナルを使わないVS Codeでの開発方法を紹介しました。具体的には、できるだけターミナルを使わないために以下のことを紹介しました。
- コマンドパレットを使う
- Git操作は「ソース管理」を使う
- npmのscriptsはVS Codeのtasksを使う
- Dockerの操作はDockerに関係するファイルを右クリックする
今回紹介したもの以外にもVS Codeでは様々な操作をターミナルを使わずに行うことができます。詳しくは公式ドキュメントを読んでください。
この記事を書いた人
石井 智大
2023年新卒入社
Visual Studio CodeよりもAtomの方が好きです。
Discussion