Hey hey 👋
You may look at the title and sarcastically say "Yay, another VS Code extensions list", at least I would. The fact is that I end up opening said articles and realize that most times they share 8 out of 10 extensions between them all. I use most of them, so I'm not going to go into detail about those that are most featured in articles, instead I'll try to analyze the lesser known and most useful extensions I'm using. I've split the extension list into categories so you can easily find whatever you're looking for here, and at the end of the article you can find the full list of extensions I'm using.
Our Lord and Savior
Let's start with the editor itself. VS Code is a code editor made by Microsoft. It's mainly powered by the open source Monaco Editor, extensions and the extensive settings API. It's also pretty lightweight for all that it offers which is why I changed from Atom and have never stopped preaching about our lord and savior VS Code.
By using an extension called Settings Sync, I've kept about the same configuration throughout the years. Recently Microsoft added a built-in Sync feature which seems to work even better. Sometimes I clean up my extensions, change the color and icon theme and install a few new jewels, hence why I'm currently rocking 59 extensions.
This is my VS Code setup at the moment 👇
Some main changes from the initial layout include the sidebar on the right side, the activity bar, theme and sidebar items.
Starting with the theme, I'm currently using these extensions to achieve this look:
Theming & Layout
Theme: Electron vue
Sidebar Icons: Carbon Product Icons
Opacity (Linux & Windows only): GlassIt-VSC
Folder and File Icons: Moxer Icons
Font: FiraCode (w/ ligatures)
For the sidebar on the right side and other customizations that are available out of the box, you can add this to your
settings.json (You can open your settings by pressing Ctrl + P and selecting 'Open Settings (JSON)'.
Linting & Code Formatting
I've included there two settings which are for two extensions, ESLint and Prettier - Code formatter.
Prettier on the other hand is a code formatter, it 'prettifies' your code. So when pasting something my editor, the code gets instantly formatted by Prettier.
Something that I've seen in some projects is combining both ESLint and Prettier, meaning that if code style is off the linter will warn you and Prettier will also format your code according to the ESLint rules you have in place.
Other cool 'auto complete' extensions I have include Turbo Console Log which I use with the keyboard shortcut to log my highlighted variables, Auto Close Tag, a well known extension that works flawlessly even with self closing elements and my personal favorite Auto Import, which automatically finds and parses code actions for imports.
Productivity & Git
On the bottom bar there you can see how much I've coded for the day, I'm using two extensions for time tracking and I'm going to recommend the one I've been using for the longest time which is Waka Time. On the sidebar you can also see Project Manager's logo which is an extension for quickly switching between projects from your sidebar.
Also on the sidebar, we have two git extensions, Git Lens is the first and allows you to fully integrate git into your code editor by adding code blame, revision navigation and file,line and branch history all from your sidebar. The other one is Git Graph which adds a neat graphical interface to your Source Control tab and allows you to quickly check your repository status.
The last two items on the sidebar are Todo Tree, which shows all
// TODO comments on the current repository and the bane of our existence, Jira also has a VSCode extension, which I only recently discovered, and offers a quick glimpse of your assigned tasks out of the box.
Hermes Comments has about 1k installs and is a simple extension that adds comment commands to your VSCode Command Palette (Ctrl + Shift + P). Simply highlight text, hit the command palette and create framed or sub section comment out of the highlighted text.
Emoji Log is one of the many surfacing extensions that prefix your commits with Emoji. I prefer this one because it actually adds a button to the Source Control tab.
Power Mode is another extension I didn't know I needed until I had it. This baby adds up your keystrokes into combos and even has the option to add sparks and custom GIFs to your code editor.
People, I was blind before I started using ident-rainbow, Guides and Bracket Pair Colorizer. These are one of the most known and oldest extensions out there, and they're always present when I'm using VSCode, check them out if you haven't.
Theming & Layout
Productivity & Git
Languages & Snippets
ES7 React/Redux/GraphQL/React-Native snippets
IntelliSense for CSS class names in HTML
Typescript React code snippets
Thanks if you ended up reading through the whole list 💪 For more JS/React content you can check out my website and follow me on Twitter.
Let me know what extensions you're using that I did not mention in here so I can check them out 👀
Top comments (2)
Great write-up! I got a lot of new extensions!