So I have been a front end engineer for … well, lets just say a while. 😄 I used to love Sublime editor and it was my code editor of choice for a long time. That is until VSCode launched, and even then I held out for a few years until the team that I was on used VSCode. So I gave in and decided to try it out. Needless to say over the years I have built up a list of extensions that immediately get installed when I receive a new machine. Here is the rundown.

GitLens

GitLens is a great little extension. It actually packs a lot, but the one piece that I love the most is the current line git blame. This has been super helpful when working on a piece of code that is older or when one isn’t too familiar with the code base yet. Highly reccomend!

[GitLens — Git supercharged — Visual Studio Marketplace](https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens)

Bracket Pair Colorizer

Now this extension is a godsend. No more having to hunt down where that missing bracket might be. There are some settings that I totally reccomend checking out as well. Also, there is a new version of this extension, but I have yet to try it out. It looks very similar from what I have read.

[Bracket Pair Colorizer — Visual Studio Marketplace](https://marketplace.visualstudio.com/items?itemName=CoenraadS.bracket-pair-colorizer)

Indent-rainbow

Now this one is subtle (colors can also be updated in settings) but helpful with keeping a files tidy. The indents will appear a different color for indent issues — to help with consistency. This is a big help when working on a large team.

[indent-rainbow — Visual Studio Marketplace](https://marketplace.visualstudio.com/items?itemName=oderwat.indent-rainbow)

CSS Peek

What dev doesn’t love a shortcut to a file?! It works by ctrl+hovering over a class you’d like to inspect. There are a few other great features that are worth checking out, but I mostly use it for the hover and peek functionality.

[CSS Peek — Visual Studio Marketplace](https://marketplace.visualstudio.com/items?itemName=pranaygp.vscode-css-peek)

Sort Lines

This is a newer addition to my list of extensions. Some teams like to ensure that imports are alphabetized, so this is easily accomplished with this easy to use extension. Top used command:

sortLines.sortLinesNatural

Just a side note — VSCode actually has a built in sort that does ascending and descending.

[Sort lines — Visual Studio Marketplace](https://marketplace.visualstudio.com/items?itemName=Tyriar.sort-lines)

Angular Snippets

Framework related: I had been using Angular 8 and Typescript/HTML VS Code Snippets from Dan Whalin, however have switched to this extension since it gets updated often. If on Angular 8 or need an older version I reccomend the Dan Whalin extension. Very useful. Worth to take a look at the snippets.

[Angular Snippets (Version 11) — Visual Studio Marketplace](https://marketplace.visualstudio.com/items?itemName=johnpapa.Angular2)

Angular Language Service

Framework related: Just check it out. It has been a huge help — cut those typos down!

[Angular Language Service — Visual Studio Marketplace](https://marketplace.visualstudio.com/items?itemName=Angular.ng-template)

Debugger for Chrome

Essential for any front end dev. Helpful for debugging those bugs.

[Debugger for Chrome — Visual Studio Marketplace](https://marketplace.visualstudio.com/items?itemName=msjsdiag.debugger-for-chrome)

Prettier

Now this is a standard extension that definitely should be installed. One cavet with this one though. I have found that sometimes the .editorconfig and visual studio code settings compete for priority (even though .editorconfig should take priority). I reccomend setting up a prettier config file if possible.

[Prettier — Code formatter — Visual Studio Marketplace](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode)

ESLint

This one is just essential. Nine times out of ten, you probably have this one already installed.

[ESLint — Visual Studio Marketplace](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint)

PowerShell

Now this is related to what environment you may be working in. Necessary for me to run some scripts.

[PowerShell — Visual Studio Marketplace](https://marketplace.visualstudio.com/items?itemName=ms-vscode.PowerShell)

C#

This one is also environment and project related. This provides development tools for dotnet.

[C# — Visual Studio Marketplace](https://marketplace.visualstudio.com/items?itemName=ms-dotnettools.csharp)

Path Intellisense

Complete those filenames without having to go trackdown the actual file name in the project. Timesaving — ✅

Npm Intellisense

Similiar to path intellisense, but for your imports. Just install it. It will save you some ⏱️.

Markdownlint

A few years ago I really got into taking notes in markdown. This is just a linter that helps keep those notes pretty and functional.

[markdownlint — Visual Studio Marketplace](https://marketplace.visualstudio.com/items?itemName=DavidAnson.vscode-markdownlint)

Vscode-icons

Icons. What more need I say. Sometimes I switch it up and use Material Icons, but vscode-icons are usually my go to.

[vscode-icons — Visual Studio Marketplace](https://marketplace.visualstudio.com/items?itemName=vscode-icons-team.vscode-icons)

Bonus: Themes

The theme I often use (because sometimes it is nice to change things up) is Horizon Theme. I use Horizon bold, but there is also a light version. My eyes seem to appreciate the dark theme that has a slight warmth to it.

[Horizon Theme — Visual Studio Marketplace](https://marketplace.visualstudio.com/items?itemName=jolaleye.horizon-theme-vscode)

It is always fun to switch things up. Here are a few other themes that I sometimes use.

[Atom One Dark Theme — Visual Studio Marketplace](https://marketplace.visualstudio.com/items?itemName=akamud.vscode-theme-onedark)

[One Monokai Theme — Visual Studio Marketplace](https://marketplace.visualstudio.com/items?itemName=azemoh.one-monokai)

[One Dark Pro — Visual Studio Marketplace](https://marketplace.visualstudio.com/items?itemName=zhuangtongfa.Material-theme)

Often starting something new can be daunting. My mind builds up this never-ending list and taking the first step frightens me. I’m fearful of doing something the wrong way and failing. There is the “what should my first step be?”. Or the ever crippling “Do I need my own blog platform?”. Truthfully there is no right or wrong way to start something. In the words of 12-year-old me who loved everything Nike — Just Do It.

If all you can do is crawl, start crawling — Rumi

It has been daunting for me. I have wanted to start writing for many years and never have taken that leap. Sure I have written random articles here and there, but nothing consistently. So, here I am attempting again and hoping this time I will be able to stick to it. Not just for the fact of saying “Hey I write blog posts”, but more to improve on myself and learn to get over the initial fear of taking the first step and continuing onward.

So if you love plants, enjoy drinking coffee, like having fun outside, are a bit crazy about Star Wars, or just are looking to read something a little different yet the same — I hope you enjoy the upcoming posts.