Brackets:ファイル内容を比較できるエクステンション「brackets-compare」

Brackets:ファイル内容を比較できるエクステンション「brackets-compare」

Brackets上でHTMLやCSSなどのファイル内容の相違確認・比較をさっとできないかなと思い方法を探してみたところ、まさにその機能を利用可能になる「brackets-compare」というエクステンションを見つけたので備忘録兼ねて紹介します。

インストール・起動方法

インストール後、エディタ右にファイルアイコンが表示される

Bracketsの「拡張機能マネージャー」で brackets-compare と検索すれば該当のエクステンションが出てくると思うのでインストール・有効化します。

エクステンションが有効化されると、画像のようにエディタ右に複数ファイルのアイコンが表示されるので、画面を分割した状態で(詳しくは後述)このアイコンをクリックすることでファイル比較の機能を実行させます。

使用方法

エクステンション実行時の画面

このエクステンションを使用するにはBracketsの表示を分割させる必要があり、まず内容を比較したいファイルをそれぞれ分割した画面に表示させます。
分割してファイル表示を変える際の注意点としては、エクステンション起動後は左側で表示されているものは編集可能で、右側はread-onlyとなり編集不可になるので、内容を比較しつつ編集もしたいというファイルの時はそれを左側に配置しておきます。

エディタを分割表示状態にしたらエディタ右に表示されている複数ファイルのアイコンをクリックしてエクステンションを実行します。
実行後は上のイメージのような見栄えになり、相違がある部分は薄黄色でハイライト表示されるようになります。
また、上のイメージだとわかりづらいと思いますがエディタの中央下部にアイコンが表示されており、これはクリックすることでエディタ内をスクロールした際に左右一緒にスクロールさせるかどうかを切り替えられるようになっています。

終了したい時は実行時と同じアイコンを再度クリックすれば元の状態に戻すことができます。

上下分割にしていてもエクステンション実行時は左右分割になってしまったり強制的にテーマが変更される部分、あとは右側がread-onlyとなっているのを変えることができないなど、個人的に所々こうなっていればと思う部分はありますが、このエクステンションを使うことでBracketsでファイル内容を比較しながら編集ができるようになるので、この機能がほしかったという人は是非使ってみてください。

エクステンションの詳細については以下より確認できます。

Back to Top

Brackets:ファイル内容を比較できるエクステンション「brackets-compare」

Brackets:ファイル内容を比較できるエクステンション「brackets-compare」

/ Services & Resource

Tagged with:

NxWorld

Sorry... doesn't support your browser

To get the best possible experience using our site we recommend that you upgrade to a modern web browser.NxWorldではご利用中のブラウザサポートはしていません。
Internet Explorerのアップグレード行う、もしくはその他のブラウザを使用しての閲覧をお願いします。