VSCode extensions === (easier and more fun) dev life
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)
