VS Code extensions for the best experiance

By Markus Johansson
2023-11-11

I have been thinking about writing a couple of lines about my VS Code setup and finally, it's time. As a C#-focused developer, I'm a big fan of both full-blown Visual Studio and JetBrains Rider but I find myself using VS Code more and more. Especially for note-taking and working with markdown. In this blog post, I'll share my favorite extensions and some tips that will hopefully take your documentation and markdown work to the next level.

C# and .NET

I tend to only use VS Code for light-weight changes, small proof of concepts, and so on but I must say that the experience is getting better and better. 

Here are some of my favorite extensions for C# and .NET:

C# Dev Kit

Microsoft's latest tools for working with .NET solutions and C# and Razor in VS Code.

Link to Marketplace

JetBrains Rider Dark Theme

I've spent many hours trying to find the right dark theme for VS Code. Since I also use Rider a lot, I ended up feeling that the best approach for me was to use the same, great color scheme in VS code as well.

Link to Marketplace

Notes

I tend to use VS Code a lot for writing documentation and taking notes in markdown files.

Draw.io VS Code Integration

I've been using a lot of different tools for diagrams, flow charts, and so on over the years and always felt that they were "too far from the source code". These days are gone. It was actually this extension that inspired me to finally write this blog post.

With the draw.io-extension you can draw and embed diagrams into markdown files directly from VS Code, if you create a ".drawio.svg" file it will be stored as SVG and you can easily commit them into your source control and Github will even show your diagrams - this almost blew my mind!

Just:

  • Create a file with the extension ".drawio.svg" for example test.drawio.svg
  • Open the file in VS Code, add some stuff and save.
  • Include in md file like so: ![Drawing](test.drawio.svg)

Link to Marketplace

Markdown All in One

Great extension that brings shortcuts, auto completions, and other features to the markdown editing experience.

Link to Marketplace

Dendron Paste Image

This one is another "life server" that makes it super easy to paste images from the clipboard into a markdown file. Perfect in combination with ShareX, just grab screenshots, edit them, and paste them into the markdown.

Link to Marketplace

 

HTML, Javascript & Typescript

Lit-html

As an Umbraco-developer this is a must-have in the future when the new backoffice comes out. This extension brings syntax highlighting and other lit-related features.

Link to Marketplace


VS Code Import code

This great little extension will indicate the size added to your js-bundle when importing dependencies in your files.

Link to Marketplace

 

Auto Rename Tag

Will automatically rename paired HTML/XML elements when you edit them in VS Code.

Link to Marketplace

 

Other tools


Material Icon Theme

This extensions brings these beautiful icons to the tree in VS Code, I was looking around and testing a lot of different options but I really understand why this one has over 20 million downloads as of now.

Link to Marketplace

Todo Tree

Looks for TODOs in your code base and adds a tree with todo-items from your code base.

Link to Marketplace

YAML

Red Hat's extremely popular YAML extension brings highlighting and helps you write your YAML.

Link to Marketplace

PowerShell

Great extension when you need to create PowerShell-scripts, the experience with this extension in VS Coder is almost better than in the PowerShell ISE.

Link to Marketplace

GitHub Actions

Makes it a lot easier to write and manage your workflows in VS Code.

Link to Marketplace

 

 

 

 






More blog posts



15 januari 2021

Umbraco and MiniProfiler