/vscode-search-tree

🔎 (Draft!) VSCode extension to show the search results in a tree view

Primary LanguageTypeScript

vscode-search-tree

🔎 (Draft!) VSCode extension to show the search results in a tree view

The work on this extension is on-pause for now since VSCode team has put the #20224 issue into their "Aug-2022 iteration" #157454 to "Explore showing search results as a tree view". If this will be done in a VSCode core it would be ideal solution and this extension won't be needed.

Issue

Currently, the search results in VSCode cannot be grouped in a Tree View structure. See microsoft/vscode#20224.

Let me quote some folks:

  • "holy sh∗t, how can this still be missing after 5 years... back to eclipse it is" - fm-swe [1]
  • "Unfortunately no." - leo-diehl [2]

Suggestion

Add a possibility to show search results in a tree view, for faster and less overwhelming information lookup.

Current state of the plugin

The code is super-raw, not optimized and not tested. Basically it is not ready to be published as of now.

However, here is what was done currently

Extension demo

  • Custom "Search Tree" view container in a side-bar
  • Custom command via Cmd+Shift+P: "Search Tree: Search"
  • Custom Input dialog for the search query
  • Custom hotkey: Ctrl+Shift+F
  • Custom search engine: via fast-find-in-files package
  • Tree view provider was used
    • Custom numbers (of search results)
    • "Native" file icons
  • Open the file line in the code browser
  • Auto-scroll to and auto-highlight the found text
Search results as a List Search results as a Tree
Search results as a List Search results as a Tree

Implementation issues

It is not clear (not possible, or at least not documented) how to do the following:

ToDo

  • Make the Search Tree to be a part of Search view container
  • Auto-focus on the Search Tree view when pressing Ctrl+Shift+F
  • In-place (non-popup) input field
  • Collapse/Expand all
  • Light/Dark mode icons
  • Search in specific folders (via regexp)
  • Search in specific files (via regexp)
  • Optimize search engine for large amount of files

Developing

Install dependencies

npm install

Run the extension in the development mode in VSCode

"Run and Debug" → "Run Extension"

Docs