Craft well-formed HTML
When browsers parse malformed or incorrect HTML, they don’t throw an error, like they do for script. They ignore bad HTML and carry on parsing the rest. The end result is pages that look odd or not quite right. Tables and other elements aren’t symmetrical, and browsers make other aspects of the UI appear strange. So we can’t build great looking UIs without well formed HTML elements. Fortunately for us, Rider is always monitoring our HTML to ensure it’s well formed and up to date so our pages will appear as intended.
Nobody has the time to type out all the brackets and double quotes needed to create proper HTML. So Rider relies on Emmet to provide several basic but super handy shortcuts to help you write it faster. Just type in the tag name, press Tab, and off you go! The tag is automatically completed. Sometimes, the simplest features are the most effective and useful.
A common activity when writing HTML is the need to sweep through a section of code and replace all tags (start and end tag) with another. Often, developers use the Find/Replace command in many editors, but Rider makes it even simpler. Just place the cursor on the tag to be changed, press Alt + Enter, choose Replace all ‘span’ tags, and enter the new tag. Look at just how much more smooth replacing a tag is as opposed to a Find/Replace.
All too often, we write some code and then realize that we’ve gone a bit overboard on nesting tags (looking at you, div tag). Usually removing the extra tags involves finding both the start and end, then deleting it, but losing our place in the process. Then we end up with mismatched tag starts and ends, and some red squiggles or an indicator of malformed code, while we wonder how we messed up something so simple. That’s just no fun and gets in the way of getting work done. Rider has a simple yet perfect solution to this. Use the ever familiar Alt + Enter and select Remove tag and promote children. Now our work on structure and layout has become much easier.
Links are the very foundation of the World Wide Web. Without them, the Internet wouldn’t even function! Because of that, nearly every page on the internet has links, and that means someone has to create them (that’s us!). The Surround With feature, invoked by Alt + Enter, allows us to highlight some text and wrap a link around it. Presto! The easiest anchor, ever.
Surround with also allows you to surround any chunk of code or text with HTML tags as well.
Create CSS the easy way
Part of building a sleek front-end that people love to look at is ensuring that CSS is done right. The problem is that many people have a difficult time writing CSS that works properly – as there are many caveats to using the language. But CSS doesn’t have to be such a struggle. Rider has hundreds of CSS inspections, as well as a validator that validates CSS with W3C CSS validator library, and support for the popular Stylelint library as a plug-in.
Because it’s important for browser compatibility to know which version of CSS we’re working with, Rider shows the version whenever there is a code completion tool window is displayed, along with lots of other important information.
As CSS in a project becomes more complex, we often find ourselves with duplicate CSS properties, so Rider performs an overwrite detection, and notifies us when there are duplicates. This feature is super handy, since it’s so easy to overlook properties that were already added.
Color me impressed by Rider’s color tools. Traditional web apps often use HEX color codes, RGB, or named colors. While these colors are no problem for machines to read, they’re not exactly friendly for us humans. Newer, modern web apps often use the HSL (hue, saturation, lightness) or HWB (hue, whiteness, blackness) instead. The latter options give designers more flexibility in the opacity, lightness, or darkness of the color portrayed. Rider lets you convert between all these color formats with a quick shortcut (Alt + Enter).
Often, we create a shorthand CSS property just to find out that we need to break it out into separate parts. Perhaps we’ve added a border to an element, but noticed that we could reuse that same ruleset on other elements (Alt + Enter).
catch calls to an
Subscribe to Blog updates
Thanks, we've got you!
Another Look into the Future with Rider’s Predictive Debugger
In the 2023.2 release cycle, we’ve introduced the Predictive Debugger in ReSharper, which gives you predictions about code paths and variables beyond the current execution pointer. We’ve written extensively about its advantages compared to alternative debugging strategies like thorough thinking, log…
Visualize Entity Framework Relationships and Additional Query Analysis in ReSharper 2023.3
A lot of teams are using Entity Framework or EF Core to work with their database. As an Object-Relational Mapper (ORM), it bridges objects in code to a relational database model, so that as a developer you don’t have to worry too much about the actual database. We all know: that’s not entirely tr…
Automatically Analyze ASP.NET Core Performance With Dynamic Program Analysis
Slow web pages may make your users or customers abandon your web application, even before they’ve had a proper look at it. You’ve likely also been frustrated working with a web application that is slow to load. The good news is that the latest versions of ReSharper and JetBrains Rider’s Dynamic P…
OSS Power-Ups: MassTransit – Webinar Recording
The recording of our webinar, OSS Power-Ups: MassTransit, with Chris Patterson, is available. This was the thirteenth episode of our OSS Power-Ups series, where we put a spotlight on open-source .NET projects. Subscribe to our community newsletter to receive notifications about future webinars.…