HTML ProofView

HTMLをレンダリングした見た目のまま、文言の変更だけをgitの比較元（既定はステージ＝git add した内容）と比べて表示し、プレビュー上で直接書き換えられるVS Code拡張です。

HTML ProofView is a VS Code extension for proofreading the copy of HTML pages. It renders the page as-is, highlights word-level text changes against a git ref (the index by default, so git add clears what you have already reviewed), and lets you fix the wording in place. The UI is in Japanese.

• 既定ではステージと比べるので、確認し終えた変更を git add すると差分から消えます。修正しながら、どこまでレビューしたかが分かります。コミットと比べたいときは比較元を HEAD などに変えます。
• 変更箇所は語単位で表示します（削除は赤の取り消し線、追加は緑）。
• 文言をクリックするとその場で編集できます。Enter（またはほかの場所をクリック）で確定してファイルに保存し、Escでキャンセルします。
• 文言を全部消して確定すると、それで空になる要素（p・li・見出し・b や a などのインライン要素・空になったリスト）もソースの行ごと消します。div・section・td などの枠になる要素は残して、文言だけ消します。
• Ctrl+クリック（macは⌘+クリック）で、その文言のソース位置にジャンプします。
• Ctrl+F（macは⌘F）でプレビュー内を検索できます。見えている文言（差分表示中は削除部分も）から探し、編集して再描画されても検索語と位置を保ちます。
• ソースに対応づけられない文言（SVG内のラベル、textarea・option の中身、ページ自身のJSが書いた文言）はグレーの点線で囲んで表示します。見えますが編集はできません。件数はツールバーの ⊘ に出ます。

インストール

• VS Code の拡張ビューで「HTML ProofView」を検索するか、Marketplace からインストールします。
• Marketplace を使わない場合は Releases の .vsix をダウンロードして次のコマンドでインストールします。

code --install-extension html-proofview-X.Y.Z.vsix

比較元の取得に git コマンドを使うので、git が PATH にあり、対象のHTMLがgitリポジトリの中にあることが前提です（リポジトリ外でも、差分なしのプレビューと編集は使えます）。

使い方

1. HTMLファイルを開きます。
2. エディタ右上の差分アイコンを押すか、Ctrl+Shift+V（macは ⌘⇧V）を押すか、コマンドパレットで「HTML ProofView: プレビューを開く」を実行します。
3. 横にプレビューが開きます。右上のツールバーの見方は次のとおりです。
   • +追加 ~変更 −削除 は件数です。⊘ は編集できない箇所の数です（ある場合だけ出ます）。
   • ▲▼ で変更箇所を移動します（キーは n / p、または F7 / Shift+F7）。
   • 「差分」ボタン（d キー）で差分表示を切り替えます。オフにすると完成形の見た目になります。
   • ⟳ でgitから比較元を読み直します。
   • 虫眼鏡（Ctrl+F / ⌘F）で検索欄を開きます。Enter / Shift+Enter（または F3 / Shift+F3）で次・前の一致へ移動し、Esc で閉じます。大文字・小文字や、空白・改行の数の違いは区別しません。
   • 「比較元」を押すと比較するrefを変更できます。INDEX でステージと比べます。

プレビューで確定した編集はエディタ上のドキュメントに反映して、そのまま保存します。エディタで Ctrl+Z を押せば戻せます。保存せずに反映だけにしたいときは設定 htmlProofView.autoSave をオフにします。保存すると比較元を読み直します。git add、コミット、チェックアウトも自動で検知します。

設定

ライセンス

MIT