HuwaHuwa

UIUXデザイナー 松木順子

vs codeでファイルを比較する

約 3 分

vimに挫折し、Atomの激重に閉口し、現在vs codeを使いはじめました。
コーディングにおいて快適なエディター環境は必要不可欠。早くベストパートナーと遭遇したいものです。(いや、vs code云々ではないんですけどね)

同じようなファイルを編集する時や、複製したファイルの編集など
どこがどう変わっているのかファイル上で知りたい場合があります。
そこでvs codeの標準機能でのファイル比較の方法について纏めます。

[themeone_header type=”h2″ txtalign=”txt-left” subtitle=”” txtcolor=”” decor=”” decorcolor=”” decorheight=”2px”]
比較したいファイル名にオンマウスして右クリックする
[/themeone_header]

左側のファイルエクスプローラー上で、比較したいファイル名を右クリックすると、サブメニューが出ます。ここから、「比較対象の選択」を選びます。この時点でメニューを選択しても、見た目上はまだほぼ変わりません。
ここで選ばれたファイルが比較対象となり、後ほど比較の際に左側に表示されます。
比較対象となるファイルはその名の通り、比較対象としてのみ表示され、編集はできません。

[themeone_header type=”h2″ txtalign=”txt-left” subtitle=”” txtcolor=”” decor=”” decorcolor=”” decorheight=”2px”]
比較をして、編集したいファイル名上で右クリックする
[/themeone_header]

比較をして、編集したいファイル名上で右クリックし、「選択項目と比較」を選びます。このファイルは後ほど右側に表示されます。

[themeone_header type=”h2″ txtalign=”txt-left” subtitle=”” txtcolor=”” decor=”” decorcolor=”” decorheight=”2px”]
2つのファイルが比較されて表示される
[/themeone_header]

ファイルが比較表示されました!

左側:比較対象のファイル(編集NG)
右側:比較して編集したいファイル(編集OK)

となります。
保存をしなくても、編集すればファイルに反映されます。地味に便利。(ちなみに比較自体も未保存のファイル可能)

[themeone_header type=”h2″ txtalign=”txt-left” subtitle=”” txtcolor=”” decor=”” decorcolor=”” decorheight=”2px”]
比較ファイルを閉じて終了
[/themeone_header]

比較ファイルのタブにある☓マークを押して、比較ファイルを閉じます。
閉じると編集がそのまま反映されているのが確認できると思います。便利!

比較機能は日常的に使う便利機能です。
上手に活用してミスを無くし、スピーディーに編集したいものです。

投稿者

フリーランスデザイナー & イラストレーター松木 順子
フリーランスのウェブデザイナーです。イラスト、ワードプレスサイト制作、UIUX設計などをやっております。 基本的には納豆とRockと酒があれば幸せです。餡子があればスキップします。
Follow :

コメントする

*
*
* (公開されません)

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

Facebookへコメントする