WindowsのVS CodeでTerminal（コマンドプロンプト・PowerShell）を表示する
CUIツールとしてコマンドプロンプトかPowerShellが良く使われますが、WindowsではPowerShellが優先される様です。
VS codeのターミナルでもPowerShellが初期状態ですが、設定からでも起動中からでもコマンドプロンプトへの変更が可能です。
ターミナル画面は分割したり表示位置を変更したり、タブとして表示・全画面表示もできます。
WindowsのVS codeでCUIツールを使う場合
一般的にコマンド操作に使うCUIツールといえば、コマンドプロンプトまたはPowerShellですよね。
最近のWindowPCでは、デフォルトのCUIとしてPowerShellが設定されています。
それはPowerShellの方が、コマンドプロンプトと同等でかつより多くの操作が可能なためです。
ですが基本的なコマンド操作なら、コマンドプロンプトでももちろん十分です。
Reactなどの開発でよく使う
コマンドプロンプトやPowerShellなどのCUIツールが動く場を、一般的にターミナルと呼びます。
特にReactなどでアプリを開発する際は、VS codeでターミナルを展開した状態にします。
それはアプリの実行結果を常にlocalhostで確認できるようにしておくためです。
npmを使っている場合、ターミナルのCUIツール上から「npm start」など命令を入れればlocalhostが立ち上がります。
エラーをリアルタイムで表示
アプリ上にエラーがあるとlocalhostに直接反映され、ターミナル上にエラーが表示されます。
書いたコードが正しく動いているかどうかが、ターミナルでリアルタイムに確認できる訳ですね。
本記事ではWindowsのVisual Studio Code（以下：VS code）における、ターミナルの表示方法についてご紹介します。
[an error occurred while processing this directive]ターミナル画面の出し方
まずはVS codeを開きましょう。
本場面ではReactアプリのプロジェクトファイル環境を開いて説明しています。
上部の横並びメニューで「表示」→「ターミナル」と進めば、ターミナルのパネルが開きます。
ショートカットとして「Ctrl+@」で開く事も可能です。
既定のCUIツールを変更する
ターミナルを開いた時、おそらくCUIツールとしてPowerShellの方が開くはずです。
WindowsのVS codeでは、PowerShellが初期選択されるようです。
この初期選択は、コマンドプロンプト（cmd）に変更する事ができます。
VS code左下の歯車マーク「設定」をクリックし、メニューの中から「設定」をクリックしましょう。
設定のタブが新しく開き、上部に設定の検索ボックスが表示されていると思います。
powershellで検索
検索ボックスでpowershellと入力すると、以下の様な画面が出てくると思います。
Terminal › Integrated › Default Profile: Windows
Windowsで使用される既定のプロファイルです。terminal.integrated.shell.windowsまたはterminal.integrated.shellArgs.windowsのいずれかが設定されている場合、現在この設定は無視されます。
下にあるPowerShellとなっている選択ボックスを開き、項目の中からCommand Promptを選択しましょう。
これにより、ターミナルを開いた時のCUIがコマンドプロンプト（cmd）で開くようになります。
※VS codeを開き直さないと、設定が有効にならない場合があります。
powershellでヒットしなくなる
変更時に注意する事があります。
項目をcommand promptに変更するとpowershellの検索結果が消え、同じワードではヒットしなくなります。
これはcommand promptに変えた事で、powershellの検索結果が無くなったためです。
PowerShellに戻すなら、command promptで検索を掛ける
も元のPowerShellに戻したいなら、今度はcommand promptで検索すれば良いです。
そうすると先程の設定項目がヒットしますので、選択ボックスからもとに戻す事ができます。
起動中にCUIツールを変更する
ターミナル起動中に稼働するCUIツールを変更する事もできます。
ターミナルパネルの右上欄にある「下向き印」をクリックしてみましょう。
表示された項目の中からPowerShell或いはcommand promptを選べば、そのツールに変わります。
ただしこの時、元のツールとは別窓で選択したCUIツールが表示さる様になります。
画面右端にツールが2段になっている事がわかりますね（cmdがコマンドプロンプトです）。
それぞれの名称部分をクリックすると、アクティブなCUIツールが切り替ります。
既定のプロファイルを変更する
ターミナル起動中に、既定のCUIツールを変更する事もできます。
ターミナルパネルの右上欄にある「下向き印」をクリックしてみましょう。
メニューから「既定のプロファイルの選択」をクリックします。
上部のコマンドパレット部分にCUIツールの一覧が表示されますので、希望のツールを選択すればOKです。
※VS codeを開き直さないと、設定が有効にならない場合があります。
ターミナル画面のアイコンについて
ターミナルの画面上部にアイコンが並んでいます。
簡単にそれぞれのアイコンの役割を紹介しましょう。
CUIマーク
ここをクリックすると、ターミナルに関する操作メニューが表示されます。
この中で「ターミナルをエディタ―領域へ移動」をクリックすると、各構築ファイルと同位置にタブ画面として表示されます。
他にもターミナルを分割したり、強制終了させたりができます。
＋マーク
React開発でlocalhostで確認するコマンドを入れると、その後続けて別コマンド命令を受け付けなくなります。
このような場合に、CUIツールを追加起動させるために使われます。
これによりlocalhostの状態はそのまま、他のコマンド操作が可能になる訳です。
縦に並んだアイコンをそれぞれクリックすると、アクティブなツールが切り替わる訳ですね。
ターミナルの分割
「ターミナルの分割」アイコンを押すと、ターミナル画面を左右に分割して表示してくれます。
単体で利用していても分割すると2つ目のCUIが起動します。分割しておけば両方一度に見れますね。
×マーク・ゴミ箱
×ボタンはもちろん、ターミナル画面全体を閉じるアイコンです。
ゴミ箱マークもターミナルを強制終了するアイコンですが、CUIが2つ以上並んでいる時はそれぞれにごみ箱マークがつきます。
削除したいCUIのごみ箱を押す事で、そのツールだけを閉じれます。
[an error occurred while processing this directive]ターミナル画面の移動
ターミナルのパネル自体は画面下に出るのが通常ですが、左や右に移動させることもできます。
これは先程紹介した「ターミナルをエディタ―領域へ移動」でタブとして表示させるのとは違います。
画面の移動メニュー
ターミナルの見出しの部分を右クリックすると以下のメニューが表示されます。
・パネルを右に移動
・パネルを左に移動
・パネルを非表示
それぞれを押す事でパネルがその画面位置に移動します。
ターミナルが左に移動した状態です。
パネルが左に来ている時、先程のメニュー欄に「パネルを下に表示」が現れます。
矢印について
一番右の印マークは、「パネルサイズの最大化」アイコンです。
クリックすると、JSファイルのタブを隠し画面をターミナル表示だけにします。
ターミナルが下にある時は上向き、左にある時は右向きとなり、それをクリックすると全画面表示となる訳です。
全画面中はその逆向きになり、それをもう一度押すと全画面表示が解除されます。。
この操作をするとJSファイル群が見えなくなるので、消したと勘違いしないようにしましょう。
