My experience with WebStorm and Rider
Working with .Net Framework/.Net Core on the backend side and with angular on the frontend side, I was used to working with VSCode and Visual Studio like most of my company’s mates. Note that I had Resharper installed in Visual Studio, but I didn’t use it fully.
Some months ago, I watched a video about Rider, and I decided to try it.
I also saw on the internet that WebStorm looked to fit the front-end need. From the start, I decided to work only with those new IDEs to force me to learn quickly and save time navigating between my previous IDEs and those new ones.
To be transparent, most of my teammates are currently working on VSCode and Visual Studio.
In the following points, I want to share an overview of what changed for me compared to using my previous IDEs (based on my keymap settings). I will also give you insights about useful shortcuts so you can experiment by yourself.
What does it change?
1 Visual studio dependency
When I installed Rider on my computer and wanted to launch some projects, I was stuck because projects require installing things that depend on Visual Studio installation. It’s been a long time, so I don’t remember the details, but I think it was related to the subject in this post.
2 KeyMap and Shortcuts
First good surprise, I can configure both WebStorm and Rider to have the same keymap as I was used to before with Visual Studio (most of them). Shortcuts are mostly the same for all navigation in the UI and even for refactoring.
Since I work more on the backend than frontend, when I get back to VSCode, I often misremember shortcuts and fail to use them. And since I needed help remembering basic shortcuts, I never took the time to learn more.
It saves me a lot of time and allows me to learn more shortcuts.
3 New shortcuts for navigation, selection, and edition
That looks like a detail, but that’s what I am doing all the time, navigating, selecting, and editing. Actions I was previously doing with my mouse are now done with shortcuts.
Here are the most useful ones :
- Double click or wider selection is often replaceable by
Ctrl+Alt+horizontal arrow, which increases or decreases selection logically.
Ctrl+Alt+Shift+horizontal arrowswitch order of parameters, properties, ….
Alt+vertical arrowallows navigating between methods.Ctrl+Alt+Shift+vertical arrowswitch orders of method or lines of code.
Ctrl+Shift+Jcollapse your code which is on multiple lines to one line.
Alt+1access/open/close to the solution view.Ctrl+-allows me to collapse folders and projects in my solution when I focus on the solution view.Alt+F1,Enterallow accessing the currently open file in the project tree. I use it often to find a class that is closed in the tree.Shift+Alt+Page upallows going to the next error in the solution. Very useful when you modify some code that impacts a lot of different classes.Shift+Enteradd a new blank line below the current line.Ctrl+Enteradd a blank line over the current line.
4 Folder and Class creation
The UI to create a class is more straightforward, using Ctrl + Shift + A:
5 IDE suggestions
When I launched Rider for the first time on a project, I was notified with suggestions like installing suitable plugins or launching a special command like yarn or npm install. It allows me to learn about a project even before looking at its structure and prevents some loss of time when someone in my team updates a project, and I didn’t know about it (a time I lost before having this functionality).
6 Searchability and learning curve
When you first open Rider, you can do some small exercises from the Tutorials Tabulation, which helps you learn some exciting functionalities.
If you know Shift +Shift, you will be able to find mostly whatever you want: a file, a class, an action, a command, …, allowing you to learn shortcuts at your own rhythm.
The Ctrl + Shift + F and other common shortcuts are also available for global research with a more straightforward search interface than I was used to. Search is also in real-time.
Note that if you put your mouse pointer on the functionality to the right, it shows you the related shortcut. This leads me to learn and use them.
7 Pannels filterability
A thing that I love (discovered by mistake) is the possibility to filter some pannels like below :
It is also the case in settings like, for example, in the Style code view :
Or even in the solution explorer view :
8 Behavior consistency during development through different projects
Whether I am working on a frontend project or a backend project containing a frontend project, I can expect my IDE to work exactly the same way, using the same interface, plugins, and behaviors.
9 NSubstituteComplete plugin
In our projects, we use NSubstitute to create mock. The first time I opened a project that used it, Rider proposed installing a plugin that allows some autocomplete.
It makes me earn a lot of time when doing unit tests knowing all the time I spend on it.
10 Configuration panel
The configuration panel helps me launch usual commands (IIS Express, Gulp, Nx, WallabyJs, …) from one place.
Using Ctrl + Maj + Alt + R will open the configuration panel at the center of the screen.
You can then use arrows to navigate, press Shift to activate Debug mode, and then press Enter.
11 Unit tests and coverage
After asking my C# unit tests to be launched in real-time and to cover the code, I can access the Unit Tests Coverage view, which shows what is covered or not in detail. I use it sometimes before doing a “commit” to ensure that I don’t forget anything important.
On the frontend side, I still use WallabyJs, which handles tests and coverage in real-time. The slight difference compared to VSCode is that the plugin allows me to access a test directly from the production code.
12 Nuget packages view
In Rider, do Alt + 7. When you update a package, the interface is not blocked.
13 Changing project
I configure Alt + P to open it.
14 Application Insight view
A great view is the Application Insight view, which allows seeing logs sent to Application Insight. The interface is more straightforward and doesn’t require me to do additional clicks to update logs after execution.
15 Warnings and errors
The first thing that popped up to me when launching one of our projects is warnings because they are more highlighted in the build view.
The Roslyn analyzer is also activated by default. It allows highlighting problems like memory allocation when using a global variable in a closure. You can learn more with this video. This pushes me to optimize my code a little more than usual.
There is now an “Error in solution” view to access all warnings and errors. I plan to use it more soon to delete most alerts not shown during a build that you see only when going into each concern piece of code.
16 Debugging in used libraries
When doing C#, by default, when debugging in my application, I was surprised to be able to do it in a library code like a NuGet package. It sounds weird, but it helped me better understand what I was using or give more valuable feedback to the team responsible for the rest-client, which threw me an error.
17 Expected behaviors
WebStorm and Rider don’t apply unexpected rules to a project. This leads to finding problems because VSCode can have its own configuration (different between developers) that overrides the project rules, whereas we used Prettier (a non-opinionated code formatter).
18 File system access from IDE
Using Alt + <- from Explorer, the file system view is accessible from the IDE, preventing me from going out of it when needed. Even in the file system view, you can see if projects are referenced or not in the solution.
19 Bookmarks
Bookmarks can be added according to a number. That’s useful when you face information that is hard to understand and requires navigating to understand what the code is doing.
For example, Ctrl + Shift + 1 allows adding or removing one while Ctrl + 1 allows access to it.
You can still use Ctrl + K, K to add or remove the same kind of bookmarks as Visual Studio (the ones without numbers) and use Ctrl + K, N to go to the next one if needed.
20 Code navigation’s link categorization
When we look at a class, a property, an interface, a virtual method, …, we now benefit from more precise links (overrides, extensions methods, …).
21 Sonar pre-commit analysis
Getting feedback at the commit level is satisfying and pushes me to correct more errors than if I wait to see the build result in the pull request.
22 Scratch files
Being able to create test files or reusable files at the computer level without leaving the current project helps with efficiency.
Summary
I didn’t expect my experience to be that different.
All that I did every day has been impacted positively, preventing useless loss of energy, helping me learn more about projects I work on, and doing the same things as before a lot quicker (I earn seconds most of the time when I do an action in my code).
Even if, used individually, VSCode and Visual Studio are great, they have different interfaces, plugins, shortcuts, and behaviors. When working on both, it implies a loss of efficiency for me that WebStorm and Rider fulfill.
And since Rider is based on the same engine as WebStorm, I left WebStorm aside. From what I understand, the only difference is you can’t access front-side technologies project templates by default. But you can add them or use well-known commands to create your project.
I encourage you to try it if I convince you that it could be helpful in your context.
On my side, I will continue my journey with Rider hoping my experience will continue to be as great as it is now and even better.
