Anatolii

Posted on Aug 18, 2021 • Edited on Aug 24, 2021

Awesome VS Code setup

#vscode

Introduction

So I have been spending a lot ( so much ) time creating the best coding setup, this story is intended for Javascript or Typescript dev.

Extensions as separate parts

1. Color Theme

So this color theme is free to use(something u will need to click to close button ), but you will have the best opportunity to make your coding process so lovely Monokai Pro (spectrum palette is my choice)

Another color theme variants

2. Font

This part is so important, but I need to warn you when you will start using this font, after that, you will not able to use another one because this font is almost perfect ( this font don't have ligatures), but don't worry I added to this font ligatures, and in the near future will write a story about it so you can buy in this site or download for free from some repo in github Operator mono (medium is my choice)
✳important to better coding effect additionally install italic variant, because Monokai Pro color theme supports multi types of fonts

3. Icon theme

The most beautiful icon theme (at this moment, which I found) is Material Icon Theme. I think 34 million downloads something matter)

4.Product icon theme

At least default icons are not bad, but personally, I more prefer Carbon Product Icons(my choice) or you can try Fluent Icons.

Final view of these four setups
(random project as example)

Main Extensions

At first, extensions which I use everywhere

Project Manager, this extension gives u the opportunity to easily open your projects with paths which you will set up, it will be useful when you need some part of code in some project, and with this extension, you can easily navigate. Also, great alternative Project Dashboard
Indent Rainbow, in this img, not the best ilustration, but I totaly recommend use this extension, this effect I setuped in setting.json with this config just changing alpha of black color, can be custom, for sure.
Colorful Commentsthis extension will help you create more human-friendly comments in your code. With this Extension, you will be able to categorize your code by a special color. Also, you can manually change colors in settings, and if you want u can add a background color. And here u can see integration with italic font type of Operator mono font.
Change case give you the opportunity to quickly change the case (camelCase, CONSTANT_CASE, snake_case, etc) of the current selection or current word. So useful with a custom keyboard shortcut or Shift + Ctrl + P.
Save all, if you working on a big project as always if u running a server with nextjs for example, everyone knows that saving the file by open, will at any time re-build it, so this extension partially resolves this problem.
Toggle Quotes, with Ctrl and some selection you can ```npm

easily change quotes type from '' to "" or {% raw %}`

Bracket Pair Colorizer 2, with this config react "bracket-pair-colorizer-2.colors": ["Gold", "Orchid", "LightSkyBlue"], "bracket-pair-colorizer-2.colorMode": "Independent", "bracket-pair-colorizer-2.highlightActiveScope": true, "bracket-pair-colorizer-2.showBracketsInGutter": true, as example
Image preview, the name says everything for itself, near a number of lines you will see a small preview of the image.
Highlight Matching Tag, small but useful tag highlighting extensions
Path Intellisense the must-have extensions that autocomplete filenames.

For database control

For REST process

Other extensions

Also, additional extensions which everybody knowns

Conclusion

For sure you can use all extensions which I describe, but most likely it will so laggy, so better practice (if you use this extension not often) is to use the extension only when you need it. And yeah, I know that everybody knows that, but probably this story will useful for somebody.

Thanks for reading, I so appreciate this ♥.

Top comments (18)

Mark Eliot • Aug 19 '21

Check out doom emacs; I think you'll like it.

Jeremy Ward 😎🤓 • Aug 19 '21

Spacemacs! Never tried doom emacs but i did love spacemacs. When i made my way back to (n)vim I had to hook up spacevim. Now I'm back in vscode, (the performance has gotten a lot better) and there is a VSPaceCode 😎

Gonna go google doom emacs real quick tho

Mark Eliot • Aug 19 '21

Wow! I might have to give VS another go, then! I remember VSCode being the primary TextEditor for classes but i've started leaning between vim and emacs. But doom emacs is cool; you can do anything in emacs, from sending emails, chatting on irc, browsing the web, usiing terminal for your local computer and a special eshell for managing emacs files. Its such a powerful app, and doom emacs puts Emacs in evil mode, so you have vim key bindings if you have a vim background (which helped me out, a lot :) )

Jeremy Ward 😎🤓 • Aug 19 '21

Damn it! Are these little words going to send me on an editor spirl again? Doom looks sweet I might have to try it out.

Mark Eliot • Aug 19 '21

Hey, im just heading out of my spiral... I might be heading back in again to check out how much VSCode has changed.

Anatolii • Aug 19 '21 • Edited

Yeah, for sure I like it, its a kind of awesome project, but I think its not for everyday use, thanks for your recommendation.

Pawel • Aug 19 '21

Checkout "JellyFish Theme" you'll gonna love it.

Here's the link
mycd.ml/jellyfish

Anatolii • Aug 24 '21

Yeah, pretty good theme, so I added this theme as additional variant, thanks for your recommendation.

Pawel • Aug 25 '21

My pleasure

Bruno Magalhães • Aug 22 '21

It is my new favorite

njitman • Aug 21 '21 • Edited

I used Project Manager for a couple of years, but recently switched to Project Dashboard. I like the grouping and it can load on start, so I can quickly pick a new project if I need to switch.

marketplace.visualstudio.com/items...

Also, Save All link is opening Toggle Quotes and VSC supports native save all via key shortcut Ctrl + K , S. I think this is the link to the Save All extension if you want the icon to show in the editor. It's cool - I may try it out.

marketplace.visualstudio.com/items...