VSCodeで「ファイルを並べて表示」「ファイルの比較」を行う

Pyxel解説書のコード入力時に役立つVSCodeの機能

 Python向けレトロゲームエンジン「Pyxel(ピクセル)」の解説書『ゲームで学ぶPython! Pyxelではじめるレトロゲームプログラミング』の学習を進める際に,知っていると役立つVSCodeの機能を紹介します。

 5章「Chapter 5 ワンキーゲームを作ろう」を例にして説明します。

ファイルを横に並べて開く

 パソコンのモニターがある程度大きい場合は,サンプルファイルのコードと自分の入力用ファイルを横に並べて表示できるとコードを入力しやすくなります。

VSCodeエクスプローラーでファイルの右クリックメニューから「横に並べて開く」ことができます。


(1)~(5)は入力用ファイルの準備です。(フォルダの作成,ファイルの作成は書籍の p.53 を参照してください)

((2)でお手本ファイルをコピーしていますが,元の場所で開いてもよいです)

(6) お手本のファイルをクリックしてエディタに表示します。

(7)(8) 入力用ファイルを右クリックしてメニューから「横に並べて開く」を選択します。

エディタでファイルが左右に分かれて表示されました。

お手本通りにコードを入力します。

(コメントも正しく写していくと処理内容がよくわかると思います)

 

ファイルを比較する

 VSCodeでは2つのファイルの内容を比較することができます。コードを入力して実行したが期待した動作にならず,原因もわからない場合などに利用しましょう。

 VSCodeエクスプローラーでファイルの右クリックメニューからファイルの比較を行うことができます。

ファイルの比較

(1) 表示を見やすくするためにタブを閉じておきます

(2)(3) 比較元のファイルを右クリックしてメニューから「比較対象の選択」を選択します

(4) 比較するファイルを右クリックしてメニューから「選択項目と比較」を選択します

2つのファイルで異なる場所がハイライト表示(色付きで表示)されます

特にファイルを変更せず,内容を比較したいだけの時は確認後にタブを閉じておしまいです。
自分の入力したコードが間違っていた場合,この比較画面で修正する操作を紹介します。

比較したファイルの修正

間違っている場所を比較モードのエディタで直接修正することができます。直すとすぐにハイライト表示が消えます。

また,エディタの機能で左側の内容を右側に反映することもできます。
(フォーカスが当たっている変更箇所の中間に表示される「→」をクリックします)

変更したファイルを保存

 

5章のサンプルプログラムを比較する

 space_rescue.py のソースコードの段階的な変更箇所を調べたり,比較表示したものを参考にコードを入力するときの操作例を紹介します。

(1) 比較元ファイルをクリックして選択状態にします
(2) 比較するファイルも選択状態にするために,Ctrlキーを押しながらクリックします
(3) 選んだファイルどちらかを右クリックしてメニューを表示します
(4) メニューから「選択項目の比較」を選択します。

変更箇所が表示されます。
自分の入力用ファイルを横に並べて開いたり,タブの表示位置をドラッグで移動させたりして見やすくしてください。