Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Find and Replace is a bad experience. #22322

Closed
jhicken opened this issue Mar 9, 2017 · 41 comments
Closed

Find and Replace is a bad experience. #22322

jhicken opened this issue Mar 9, 2017 · 41 comments
Assignees
Labels
feature-request Request for new features or functionality search Search widget and operation issues ux User experience issues
Milestone

Comments

@jhicken
Copy link

jhicken commented Mar 9, 2017

I have a proposal. I think that global find and replace would be much more usable if it was laid out horizontally. Preferably where things like the "PROBLEMS", "OUTPUT", and "DEBUG CONSOLE" are.

I love Atoms and Sublimes find and replace for lots of different reasons but this is honestly my biggest hangup with vscode.

So here are what some of the competition does.

Atom (arguable my favorite experience and the most concise) ---- Horizontal and Vertical
screen shot 2017-03-09 at 11 30 36 am

Sublime (Cool but once you search you lose you search box) ---- exclusively Horizontal then Vertical
screen shot 2017-03-09 at 11 24 03 am

after search
screen shot 2017-03-09 at 11 32 48 am

And Webstorm I feel like they gave up and just made it work.
You get a separate popup
screen shot 2017-03-09 at 11 25 08 am

then that goes away after you search and you get results (In my opinion they are muddy and hard to read) Horizontal
screen shot 2017-03-09 at 11 33 26 am

THE POINT
The point is most other editor at least show search results in a Horizontal layout. This is for good reason. The results are much more digestible.

Here is what my results look like most of the time. (all squished on the side)
screen shot 2017-03-09 at 11 44 37 am

The funny thing about this.. When showing search in the documentation for vscode it looks more horizontal. I think the reason why is it creates a better user experience.
https://code.visualstudio.com/docs/editor/codebasics#_search-across-files
codebasics_search

So my issue is I think I could probably make a plugin to do this a little better but I wanted to see if this is the direction vscode will be going in the future or if it should be done as a plugin.

@markhicken
Copy link

Of all the find replace options, Atom does it best in my experience. This is one of the main reasons I can't switch to VS Code.

@ramya-rao-a ramya-rao-a added the ux User experience issues label Mar 9, 2017
@NKjoep
Copy link

NKjoep commented Mar 10, 2017

I just came to open an issue asking for some search panel improvements and then I discovered I am not alone. I agree on all the points above.

And I add my 2cents:

  • horizontal approach: a more horizontal window would improve ux a lot since it would be easier to read among the results
  • multiple search: multiple tabs and or possibility to run a new search without losing the previous results
  • options more visible and reachable: the search options aren't easy to reach because of those small buttons and the arrows to expand part of the panel. Those should be more visible and keyboard friendly
  • options by importance: reorganise the options by importance. I'd say it would be nicer to have term pattern and file pattern as the very first options in the search panel. Most of the times you know where to search and which file pattern use (i.e. *.html, *.js) and that speeds up research process.
  • options history: remember what patterns and options have been used in the previous session so the user can reuse tem easily with keyboard and/or autocomplete (see Atom)

edit: fix typo

@SyntaxErratum
Copy link

I agree. I tried VS Code for a couple of months and I like it but I went back to Atom solely because of the search functionality.

@schaveyt
Copy link

Yes, yes, yes!!! Please please please!!

Just clone atom or sublime's UX for this area and everyone and their sister will adopt vscode.

@stevencl
Copy link
Member

Thanks for the well articulated feedback. We'll discuss this in the team and figure out how we want to proceed with this.

@leemhenson
Copy link

If I may, I'd like to also propose that once you have an search results editor window open, it would be very neat to be able to edit the matches inline. Thus I could select a range of matches and, for example, replace a typo within that range only. Then I would hit cmd+s and the changes I had made would be saved to the relevant files.

CtrlSF plugin for Vim (https://github.com/dyng/ctrlsf.vim) does this, for example.

@NKjoep
Copy link

NKjoep commented Mar 29, 2017

@leemhenson that's a great feature. If I were the backlog owner I would put this as an additional feature after refactoring the base experience :) very cool though 👍

@tannerlinsley
Copy link

@waderyan This is huge :)

@umpirsky
Copy link

umpirsky commented Jul 6, 2017

Related #30104

I agree Atom does great job here, it simply looks more polished, starting with position, buttons, icons and results.

@rattrayalex-stripe
Copy link

Are there any community plugins that deliver this in the meantime?

@MikeRatcliffe
Copy link

MikeRatcliffe commented Jul 28, 2017

There are no plugins at the moment, maybe somebody could create one? I don't have time at the moment.

I would say that these are the killer features that could be included:

  • horizontal approach: a more horizontal window would improve ux a lot since it would be easier to read among the results
  • multiple search: multiple tabs and or possibility to run a new search without losing the previous results
  • search within results: it is hugely useful to be able to search within a set of results e.g. to find / replace all instances of a string in all files containing a particular require path.
  • options more visible and reachable: the search options aren't easy to reach because of those small buttons and the arrows to expand part of the panel. Those should be more visible and keyboard friendly
  • options by importance: reorganise the options by importance. I'd say it would be nicer to have term pattern and file pattern as the very first options in the search panel. Most of the times you know where to search and which file pattern use (i.e. *.html, *.js) and that speeds up research process.
  • options history: remember which options have been used in the previous session.
  • search history: remember the last x strings, paths and regexes that have been used. The number of history items should be configurable.
  • access to regex captures: use e.g. $1 - $9 or \1 to \9 to access captures.
  • regex special characters: allow \t, \r, \n etc. Of most importance is the newline, which allows modifications to whole blocks of code.
  • live view: When a value is changed and no longer matches the search string it should be removed from the list.
  • JS functions for replace: an option could be added to use a JS function as the replacer... this would give the editor a fairly unique feature that devs would love.
  • display replacement preview with search results: old value in red and new value in green as follows:
    screen shot 2017-07-28 at 10 07 54

@MikeRatcliffe
Copy link

I started working on this but, really, until there is support for creating and opening a bottom panel it is a non-starter.

@schaveyt
Copy link

SublimeText's approach is to skip the bottom panel all together and simply use an entire first-class file tab titled "Find Results" where all results are continually appended to the end. The vscode extension sample repo has a content provide example that is a great start to this. https://github.com/Microsoft/vscode-extension-samples/blob/master/contentprovider-sample/README.md

@spiritson
Copy link

spiritson commented Sep 27, 2017

+1. The major reason stopping me from switching to VSCode from Atom.

@chenka
Copy link

chenka commented Oct 12, 2017

I agree with you, put searching bar in bottom is better than aside.

@scholtzm
Copy link

Atom even allows to open search results in a split pane. Clicking the results opens files in the left pane. This in my opinion is superior compared to tiny search panel VSCode offers. Hopefully this will be improved in the future.

image

@garconvacher
Copy link

+1. I still use atom regularly only to perform search/replace in projects. The vscode search bar is really painful.

@bpasero bpasero added the search Search widget and operation issues label Nov 11, 2017
@isidorn isidorn added the feature-request Request for new features or functionality label Nov 20, 2017
@isidorn isidorn added this to the Backlog milestone Nov 20, 2017
@drawcard
Copy link

drawcard commented Dec 14, 2017

I switched from Atom about a week ago and am loving the VS Code experience, but the one thing holding it back is this UX blocker. Search results frequently run off the panel unless you go to the trouble of resizing it manually, ie. each time I do a simple find/replace I have to resize the panel.

I really look forward to the day search results appear in a bottom panel and greatly miss how things are in Atom... in fact it would be nice to leave it open to development so we can shift any of those vertical panels to a bottom space.

@fantasmasnc
Copy link

fantasmasnc commented Jan 11, 2018 via email

@gusbemacbe
Copy link

I have this bad experience.

When I find and replace a word in all files, it automatically opens all the files. I disapprove it strongly.

@viralanomaly
Copy link

I have someone actively researching alternatives to vscode because of the search location. It is a serious concern to those of us using it every day. Is there any plan to look at this?

@davidlygagnon
Copy link

I also feel the same about search in vscode. It's been annoying me for a while now. I can live with it for now but hopefully we'll have the option the configure the placement soon. I'd say search is a vital feature for developers and it's not the best experience in vscode so far.

I'll add to this, what about adding search and replace/modify within the search window like Intellij/Webstorm does? That feature is pretty neat!

@umpirsky
Copy link

umpirsky commented Mar 10, 2018

Looks like it is available in preview?


#43833

@NKjoep
Copy link

NKjoep commented Mar 10, 2018

yes, read the release notes --> https://code.visualstudio.com/updates/v1_21#_horizontal-search

to enable it, add "search.location": "panel" to your settings.

@drawcard
Copy link

I have enabled the preview feature and so far it's working wonderfully. Thank you for addressing this! Productivity is over 9000 now...

@gusbemacbe
Copy link

Still useless. I found and replaced a word in all files and it open all files. What a waste of time!

@tannerlinsley
Copy link

tannerlinsley commented Mar 14, 2018 via email

@umpirsky
Copy link

Mass file opening is a big fail. Is it reported?

@gusbemacbe
Copy link

@umpirsky one of developers updated, but the file opening still continues, so I reported, check his update comment: #14554 (comment)

@gusbemacbe
Copy link

gusbemacbe commented Mar 16, 2018

@umpirsky, @tannerlinsley, @jhicken, @markhicken, @SyntaxErratum, @schaveyt,

Microsoft has just updated the version of VSCode and now you can find and replace one word in all file without opening all files!!! I tested and it worked!

@daybreaker
Copy link

daybreaker commented May 4, 2018

Horizontal search is great. Now it just needs a config option for search context that puts X lines before and after each result. There's only a few things remaining for VS Code to be fully better - or at least equal to - Atom, and this is one of them.

@tommai78101
Copy link

tommai78101 commented May 5, 2018

I'm just hoping that you can use regex for replacing found regexes.

Find: \s+
Replace: \n

So if it finds 1 or more than 1 whitespaces, it replaces them all as 1 newline, instead of inserting \n to the found whitespaces.

@drawcard
Copy link

drawcard commented May 6, 2018

@tommai78101 if you hit the button with the asterisk icon, you can target the spaces you're wanting to remove:

image

image

becomes

image

@tommai78101
Copy link

@drawcard Oh, it was fixed. I didn't know that... I wondered why I wasn't able to do this before...

@davidlygagnon
Copy link

One thing that I noticed with the search experience in general:

When you have a search results spanning multiples files, and selecting each file one by one to do some editing, search looses focus on the file as soon as you go to the file. In other words, the search panel does not keep the latest file opened highlighted.

After editing a file, when I get back to the search editor, I need to know which file I was just editing.

Has anyone else noticed that?

@frguthmann
Copy link

Is there a way to replace the search box entirely? I want to be able to hit CTRL-F and have an atom / sublime experience: open the horizontal search bar and every time I type enter it scrolls through the occurrences in the opened document?
And of course we need an option to specify if we want to search all files.

@drawcard
Copy link

drawcard commented Jul 17, 2018

@frguthmann are you using the latest version of VSCode? I get the Sublime style search panel:

image

Edit - sorry this is if I do a search across all files (which I do more frequently than a search inside a single file)

@frguthmann
Copy link

@drawcard Yep I wish I could use this to search inside the opened file too.
Plus the results being displayed under the search bar is terrible imo.

@stormhillmedia
Copy link

I would also love it if it displayed the scope of your search. If you are searching a folder, have something saying "searching inside... " Most of the time I can only assume it is working but then sometimes it does not find the string I know is present in the files I am searching. Then I wonder where it is searching. The UI of VScode is overall lacking but this is one of the worst bits

@apahne
Copy link

apahne commented Aug 29, 2018

I would like it to be able to toggle the panel using the usual keyboard shortcut.
If not visible -> make visble and focus
if visible, unfocused -> focus
if visible, focused -> hide

@miguelsolorio
Copy link
Contributor

@stormhillmedia when you do "Find in Folder" there is an input field that shows the scope:
image

@apahne you can toggle and focus to search via Shift + Cmd/Ctrl + F

Closing this as you can now change the location of search via search.location in your settings file.

@vscodebot vscodebot bot locked and limited conversation to collaborators Oct 26, 2018
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
feature-request Request for new features or functionality search Search widget and operation issues ux User experience issues
Projects
None yet
Development

No branches or pull requests