3
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

Visual Studio Codeの差分表示機能を活用しよう!

Last updated at Posted at 2020-12-19

※2022年から技術系の記事は個人ブログに投稿しております。ぜひこちらもご覧ください→yamaday0u Blog

プログラミングスクールやweb公開されているカリキュラムなどで学習しているとき、
手本通りにコードを書いたはずなのにエラーになってしまった!ということがよくありますよね。

そんなときに便利なのがVisual Studio CodeのCompareコマンドをつかったファイル比較です。
個人的にとても感動したので共有します。

実行環境

  • macOS Catalina 10.15.7
  • Visual Studio Code:1.51.1

ファイル同士を比較

次の画像を見てください。
右が正しいコードで、左がエラーになるコードです。
どこが違うが見つけられますか?
スクリーンショット 2020-12-19 22.08.34.png

この例では左右で色が違う箇所があるので、慣れている方は割とすぐわかると思いますが、そうでない方にはなかなか難しいと思います。

次にCompareコマンドを使ってファイルを比較するとこのようになります。
スクリーンショット 2020-12-19 21.57.55.png
いかがでしょうか?
左右のファイルで異なったコードが書かれている行がハイライトされ、異なっている箇所がさらに濃い色でハイライトされています。
ちなみに正解はバッククォート(``)で書くべきところをシングルクォート('')で書いている、でした。

ファイルとクリップボードを比較

Compareコマンドでは、コピーしてクリップボードに保存されているコードとも比較できます。
これにより、手本のコードをコピーして、自分が書いたコードと比較することができます。

Compareコマンドの使い方

Visual Studio Code上で shift + command + Pを押してCompareコマンドを起動します。
スクリーンショット 2020-12-19 22.14.38.png

「ファイル:アクティブファイルを比較しています…」をクリックすると、比較するファイルを選ぶ画面が出てくるので、比較したいファイルを選ぶと、先程の画像のように比較することができます。

「ファイル:クリップボードとアクティブファイルを比較」をクリックすれば、クリップボードに保存されているコードと比較できます。

3
2
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
3
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?