VS Code extension: ドラッグ&ドロップでファイルを並び替える

VS Code機能拡張で拡張したサイドバーに、ドラッグ&ドロップでファイルの順番を並び替えるツリービューを実装し、VS Code meetupで発表しました。

Transcript

1. speaker: Taiyo Fujii Drag and Drop for Tree View Drag and Drop for Tree View
2. 小説執筆 長いファイルを分割して書きたい 長編小説は 100メートル そもそも何で？ そもそも何で？
3. 機能拡張を作りました 機能拡張を作りました
4. テキスト結合 青空文庫注記 原稿用紙プレビュー 品詞ハイライティング 文字数カウント etc...
5. 原稿ファイルだけを表示 フォルダごとの字数集計 連番も拡張子も非表示 原稿ツリー 原稿ツリー
6. ドラッグ &ドロップで変えたい！ 順番を変えたい 順番を変えたい
7. 大変なのはわかっている 大変なのはわかっている
8. VS Code Treeview Provider TreeDragAndDropController
9. 自由度が低かった …… 自由度が低かった ……
10. Dropノードは決められるが、挿入する場所が決められない！
11. GPTに聞けばなんとかなるじゃろ …… WebViewだ、 Reactだ！ WebViewだ、 Reactだ！
12. なんとかなるか？ return ( <div ref={(node: HTMLDivElement) => dragRef(dropRef(node))} className={`tree-node ${expanded ? "expanded" : ""} ${ highlightedNode === node.dir ? "highlighted" : "" }`} onClick={handleNodeClick} > <div className={`tree-label ${!node.children ? "text" : ""}`}> <span className="triangle" onClick={toggleExpand}> &gt; </span> <span className="item-name"> {node.name.replace(/^(?:\d+[-_\s]*)*(.+?)(?:\.(txt|md))?$/, "$1")} </span> <span className="chars">{node.length.toLocaleString()}文字</span> </div> {node.children && ( <div className="tree-node-children"> {node.children.map((child) => ( <TreeView ... /> ))} </div> )} </div> );
13. しかし イベント駆動で挿入エレメントを挿入 キーイベントでリネーム用の inputを増やす ドラッグのイベントパブリングを絶妙に制御 ドラッグ中は hoverしたときは キーイベントがあった時は ... やばい、状態が多すぎる、ついていけない
14. 設計は自分でやろう 設計は自分でやろう
15. Demo Demo
16. Windows対応は、 vscode.workspace.fsPathと pathに注意！ VS Code API VS Code API
17. vscode.workspace.fs.rename("2-はじまり.txt", "1-はじまり.txt", { overwrite: true }) まずい、まずいぞ …… まずい、まずいぞ ……
18. Demo Demo
19. novel-writer 3.0.0 novel-writer 3.0.0