Awesome VS Code setup
Tags: vscode
Published: 2021-08-18 19:18:44


##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
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/g98fumokpyenjguj9rcf.png) 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](https://monokai.pro/vscode) (spectrum palette is my choice) 

**Another color theme variants** 
* [Jellyfish theme](https://marketplace.visualstudio.com/items?itemName=PawelBorkar.jellyfish)
* [GitHub theme](https://marketplace.visualstudio.com/items?itemName=GitHub.github-vscode-theme)
* [Atom One Dark Theme
](https://marketplace.visualstudio.com/items?itemName=akamud.vscode-theme-onedark)

####2. Font
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kdo0exa2o126ie8x82kd.png) 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](https://www.typography.com/fonts/operator/styles) or download for free from some repo in github [Operator mono](https://github.com/keyding/Operator-Mono/tree/master/Fonts) (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 
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wuauveo1ine95rq6a14s.png) The most beautiful icon theme (at this moment, which I found) is [Material Icon Theme](https://marketplace.visualstudio.com/items?itemName=PKief.material-icon-theme). I think 34 million downloads something matter)
####4.Product icon theme
![Product icon theme]
(https://dev-to-uploads.s3.amazonaws.com/uploads/articles/klqqje6ufo4arluzx9b6.png) At least default icons are not bad, but personally, I more prefer [Carbon Product Icons](https://marketplace.visualstudio.com/items?itemName=antfu.icons-carbon)(my choice) or you can try [Fluent Icons](https://marketplace.visualstudio.com/items?itemName=miguelsolorio.fluent-icons).

**Final view of these four setups**
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hamcd0rdrcekogpeuxft.png) (random project as example)
##Main Extensions
**At first, extensions which I use everywhere**
1. [Project Manager]
(https://marketplace.visualstudio.com/items?itemName=alefragnani.project-manager),![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/k5mwamtpgxucrtflyaj9.png) 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
](https://marketplace.visualstudio.com/items?itemName=kruemelkatze.vscode-dashboard)
2. [Indent Rainbow](https://marketplace.visualstudio.com/items?itemName=oderwat.indent-rainbow),![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4rremve6ruuj02mi64ec.png) in this img, not the best ilustration, but I totaly recommend use this extension, this effect I setuped in `setting.json`  with this config ![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5rf0dd48lna1ckufjsip.png) just changing alpha of black color, can be custom, for sure.
3. [Colorful Comments](https://marketplace.visualstudio.com/items?itemName=ParthR2031.colorful-comments)![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ecc1d7tp7djn14sxewc0.png)this 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.
4. [Change case](https://marketplace.visualstudio.com/items?itemName=wmaurer.change-case)![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1zu9sqf2bvcrsaggb1q7.png) 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.
5. [Save all](https://marketplace.visualstudio.com/items?itemName=nanlei.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.![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1ge5yjaomi7f9xr1sobf.png)
6. [Toggle Quotes](https://marketplace.visualstudio.com/items?itemName=BriteSnow.vscode-toggle-quotes), with `Ctrl` and some selection you can ```npm
  easily change quotes type from '' to "" or  ``
 ``` 
7. [Bracket Pair Colorizer 2](https://marketplace.visualstudio.com/items?itemName=CoenraadS.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,
```![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ui6qrrx74cp0ntmi06ti.png) as example
8. [Image preview](https://marketplace.visualstudio.com/items?itemName=kisstkondoros.vscode-gutter-preview), the name says everything for itself, ![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1ykcdumsshjdv1e54uvp.png) near a number of lines you will see a small preview of the image.

9. [Highlight Matching Tag](https://marketplace.visualstudio.com/items?itemName=vincaslt.highlight-matching-tag), ![PzVAkYdU_o](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pd7g99bgpmw32pse558w.png) small but useful tag highlighting extensions
10. [Path Intellisense] (https://marketplace.visualstudio.com/items?itemName=christian-kohler.path-intellisense)![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yd77zjnwgswlxh68pn7j.png)the must-have extensions that autocomplete filenames.

####For database control
* [Firebase Explorer](https://marketplace.visualstudio.com/items?itemName=jsayol.firebase-explorer)
* [MongoDB for VS code](https://marketplace.visualstudio.com/items?itemName=mongodb.mongodb-vscode)

####For REST process
* [REST Client](https://marketplace.visualstudio.com/items?itemName=humao.rest-client)
* [Thunder Client](https://marketplace.visualstudio.com/items?itemName=rangav.vscode-thunder-client)

####Other extensions
* [Trello Viewer](https://marketplace.visualstudio.com/items?itemName=Ho-Wan.vscode-trello-viewer)
* [Turbo Console Log](https://marketplace.visualstudio.com/items?itemName=ChakrounAnas.turbo-console-log)
* [Todo Tree](https://marketplace.visualstudio.com/items?itemName=Gruntfuggly.todo-tree)
* [React PropTypes Intellisense](https://marketplace.visualstudio.com/items?itemName=OfHumanBondage.react-proptypes-intellisense)
* [Rainbow String](https://marketplace.visualstudio.com/items?itemName=wk-j.vscode-rainbow-string)
* [Polacode](https://marketplace.visualstudio.com/items?itemName=pnp.polacode)
* [Import cost](https://marketplace.visualstudio.com/items?itemName=wix.vscode-import-cost)
* [File Utils](https://marketplace.visualstudio.com/items?itemName=sleistner.vscode-fileutils)
* [Color the tag name](https://marketplace.visualstudio.com/items?itemName=jzmstrjp.color-the-tag-name)
* [Bookmarks](https://marketplace.visualstudio.com/items?itemName=alefragnani.Bookmarks)
* [Random String Generator](https://marketplace.visualstudio.com/items?itemName=bibhasdn.random-string-password-generator)

####Also, additional extensions which everybody knowns
* [Auto Close Tag](https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-close-tag)
* [Auto Rename Tag](https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-rename-tag)
* [Visual Studio IntelliCode](https://marketplace.visualstudio.com/items?itemName=VisualStudioExptTeam.vscodeintellicode)
* [Prettier Formatter](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode)
* [GitLens](https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens)

##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 ♥.