VS CodeのMarkdownプレビューから編集位置へ移動できなくなった理由

VS CodeのMarkdownプレビューで見出しを操作すると、対応するMarkdownの編集位置へ移動できたはずです。ところが、いつの間にか移動しなくなっていました。

当初は見出しのidを除去する拡張機能が原因だと考えました。しかし、ID除去を無効にしても動作は戻りません。

調べてみると、見出しIDと編集位置への移動は別の仕組みであり、VS Code側で設定の既定値が変更されていたことが分かりました。

目次

結論:VS Code 1.120で既定で無効になった

プレビューから編集位置への移動を制御するのは、次のVS Code設定です。

JSON
"markdown.preview.doubleClickToSwitchToEditor": true

VS Code 1.120でこの設定の既定値がfalseに変更されました。ダブルクリックでテキストを選択したいユーザーにとって、エディターへの切り替えが予期しない動作になるためです。

変更の理由と、必要な場合は再度有効にできることが、Visual Studio Code 1.120のリリースノートで説明されています。

従来の動作に戻したい場合は、ユーザー設定またはワークスペース設定で上記の値をtrueにします。そのうえで、Markdownプレビュー上の対象をダブルクリックします。

補足

1. シングルクリックではなくダブルクリック

VS Codeの公式ドキュメント[1]でも、プレビュー上の要素をダブルクリックすると、対応する行の近くをエディターで開くと説明されています。

シングルクリックはリンクの操作などに使われます。見出し付近をシングルクリックしただけでは、原文の編集位置へは移動しません。

2. 見出しIDは移動先の行を決めていない

次のような見出しがレンダリングされたとします。

HTML
<h2 id="example">Example</h2>

このidは、#exampleのようなアンカーリンクでプレビュー内の見出しへ移動するために使われます。

一方、プレビューからMarkdown原文の編集位置へ移動する処理は、プレビュー上の位置と原文の行情報との対応を使います。VS Code 1.136.2の内蔵Markdownプレビューの実装を確認すると、ダブルクリックされた縦位置から対応行を求め、エディター側へ通知していました。

そのため、見出しIDの有無がダブルクリック移動を決めているわけではありません。制御している設定も、利用している情報も異なります。

3. スクロール同期も別の設定

Markdownエディターとプレビューのスクロール同期は、次の2つで制御されます。

JSON
"markdown.preview.scrollPreviewWithEditor": true,
"markdown.preview.scrollEditorWithPreview": true

これらは、一方をスクロールしたときにもう一方を追従させる設定です。ダブルクリックでエディターへ切り替える機能とは別です。

まとめ

今回の現象は、見出しIDの削除ではなく、VS Code 1.120でmarkdown.preview.doubleClickToSwitchToEditorの既定値がfalseに変更されたことが原因でした。

似た機能でも、見出しアンカー、エディターへのダブルクリック移動、スクロール同期はそれぞれ別の仕組みです。どの動作が使えないのかを分けて考えると、拡張機能の影響とVS Code本体の設定変更を切り分けやすくなります。


  1. Markdown and Visual Studio Code — Editor and preview synchronization ↩︎

この記事が参考になりましたら、
上記の「いいね」を押していただけると嬉しいです😄
今後の記事作りの励みになります!
目次