DEV Community

Aman Mittal
Aman Mittal

Posted on • Updated on

How I configure VSCode for Everything

cover-img

Recently, I was at the Boryspil Airport, Ukraine, working on a blog article when suddenly my VSCode stops working. It actually got crashed! Not once, but twice under 30 minutes. Some of the content was autosaved, some of it was gone forever…

I was frustrated at first as to why it had to crash at that moment! Next, after re-opening the editor, I was angry with myself for I had to write some of the stuff again that didn't get save.

ss1

Also, at times, previous this experience, it did feel that I have bloat of extensions that I am not using since I have stopped working with some of the frameworks in recent months (example, Angular).

What did I do? After none of the emotions helped, I had to find a way to cope better. On a network that was not so crappy, but did have to login every 30 minutes due to WIFI restrictions, I re-installed VSCode.

VSCode uses Electron as its base that enables it to be cross-platform and work on macOS, Windows, and Linux. It is built using Node.js and has the complete support for any JavaScript developer. Now, that's what I call win-win. It's fast as compared to the previous editors (Atom) and IDE (Webstorm) I have used.

Themes

First thing I did was to install themes that I am habitual seeing all day. I like my editor to be charming and appealing to the eye. Thus, I use the following themes for different purposes.

  • FairyFloss (most of the time, cause I love purple backgrounds!)
  • Dracula Official (I used this with my iTerm setup a lot)
  • Night Owl (just try something new)
  • Material-Icon-Theme (for file icons)

ss2

Configuring VSCode

Next, I changed a few things that I could remember from my previous settings.

  • setting Tab size to two spaces! (we can still be friends)
  • enabled emmet for HTML and JavaScript
  • enable autoSave with a delay of 5 seconds
  • use OS's terminal setup and shell (zsh)
  • enable formatting files on save and pasting snippets from elsewhere 👀
  • disable minimap, I do not like to give unnecessary space, plus we are writing modular functions modules these days, aren't we?
  • also, enable wordwrap
"editor.tabSize": 2,
"emmet.includeLanguages": {
    "html": "html",
    "javascript": "javascriptreact"
},
"workbench.iconTheme": "material-icon-theme",
"files.autoSave": "afterDelay",
"files.autoSaveDelay": 5000,
"terminal.external.osxExec": "iTerm.app",
"terminal.integrated.shell.osx": "zsh",
"editor.wordWrap": "on",
"editor.formatOnSave": true,
"editor.formatOnPaste": true,
"editor.minimap.enabled": false
Enter fullscreen mode Exit fullscreen mode

Extensions I use

Next step for me is to make this editor work like a charm with the help of some awesomely maintained and available for free extensions.

  • :emojisense:
  • Bracket Pair Colorizer
  • Code Spell Checker (I write a lot of blog posts in VSCode)
  • Code:: Stats (a small stats tool, for fun)
  • Data Preview (when I am using VSCode, I'd love it to open every file whether its excel sheets with charts or a simple JSON config. This extension lets me do that)
  • ESLint
  • Indent 4-to-2 (converts indentation from tab 4 spaces to 2 spaces. Are we still friends?)
  • expressjs (a snippets package written by me)
  • markdownlint (I sometimes write more Markdown in a day than JavaScript code)
  • GitHub Pull Requests
  • GraphQL (published by Prisma)
  • Import Cost
  • npm Intellisense
  • Path Intellisense
  • pug (another snippet by me for JADE and Pug template languages, for some old projects)
  • IntelliSense for CSS class names
  • React Native Tools
  • Todo Tree
  • Version Lens
  • Settings Sync (one of the most important extension I have mentioned here)
  • Word Count
  • Prettier - Code formatter (can't live without it, period.)

With prettier, I like to use my own set of configuration as described below.

"prettier.jsxSingleQuote": true,
"prettier.printWidth": 100,
"prettier.semi": false,
"prettier.useTabs": true,
"prettier.tabWidth": 2,

Enter fullscreen mode Exit fullscreen mode

Conclusion

That's the setup I use now for my JavaScript, NodeJS, React and React Native work. I hope you enjoyed reading this post.

Happy Coding!

What about you? What VSCode configuration do you use? How does it look like? Is there a markdown related secret config that I don't know 😁, please let me know!

Further reading

How I Set up my M1 Macbook Pro


I often write on web technologies and React Native. You can either follow me on Twitter or you can subscribe to my weekly newsletter to receive all my tutorials straight in your inbox 📧

Discussion (37)

Collapse
andyh profile image
andy

Nice list. One extension I can't live without is Settings Sync.

Collapse
amanhimself profile image
Aman Mittal Author

Me too 😄

Collapse
felixdorn profile image
Félix Dorn

You should use vscodium, it's vscode without Microsoft's telemetrics.

Collapse
intrnl profile image
intrnl

The question is, do you really have to go that way though?

Collapse
doug profile image
Doug

I had this question, and frankly the quality of the app justifies for me the telemetry MS get from my use which I hope helps feedback for improvements.

However I think it is very cool that MS provide a pure FLOSS version for anyone so concerned.

That said, I don't know why anyone would say you SHOULD use one over the other, but the choice is there.

Thread Thread
felixdorn profile image
Félix Dorn

I think, it's not only for improve user experience, Google steal your personal data, Apple, Microsoft too. So why with vscode Microsoft don't steal your personal data. It's no longer about Microsoft. I think it's about ethical.
(I'm sure I do some fault, I'm a french teenager sorry)

Collapse
amanhimself profile image
Aman Mittal Author

I have heard about it. Haven't tried it. Are you using it in your daily workflow? If yes, please let me know more about experience.

Collapse
felixdorn profile image
Félix Dorn

It's exactly the same, nothing changes a MS engineer say "When we [Microsoft] build Visual Studio Code, we do exactly this. We clone the vscode repository, we lay down a customized product.json that has Microsoft specific functionality (telemetry, gallery, logo, etc.), and then produce a build that we release under our license.

When you clone and build from the vscode repo, none of these endpoints are configured in the default product.json. Therefore, you generate a "clean" build, without the Microsoft customizations, which is by default licensed under the MIT license".
So vscode and vscodium are the same, but one are really ethical. BTW, the only thing vscodium do not, it's to add to the path the code command.

Thread Thread
garrett profile image
Garrett

I did not know about this. Thank you!

Collapse
felixdorn profile image
Félix Dorn

I use vscodium 60h per week and it's only pleasure.

Thread Thread
sebalr profile image
Sebastian Larrieu

What about asp.net core debugger?.I think it's not such a things in foss.
Also y believe your intention are good but "you should" it's a little imperative

Thread Thread
emptyother profile image
emptyother

The aspnet debugger is an external extension so isn't affected by vscodium, right? Vscodium doesn't protect you from telemetry in extensions i assume.

Thread Thread
felixdorn profile image
Félix Dorn

Sorry about "you should" I'm French and it's maybe not the right word

Thread Thread
amanhimself profile image
Aman Mittal Author

Hey dude! No worries. :)

Collapse
felipe1982 profile image
Felipe Alvarez

You should hyperlink all the extensions you mentioned.

Collapse
_dermatz profile image
Mathias Elle 👨🏽‍💻

but why?! Just copy & paste

Collapse
felipe1982 profile image
Felipe Alvarez

Because that's what computers are for, automation. And because I am on my mobile phone.

Collapse
saulojoab profile image
Saulo Joab

Whenever I'm working with front-end outside of React, I like to use this extension called Live Server, which basically creates a little server with the HTML file you're editing and auto-refreshes it whenever you save :)

Also, Code Runner helps me a lot when I need to run snippets on the fly, it supports a lot of languages.

Collapse
amanhimself profile image
Aman Mittal Author

Yeah, I did have live server on my previous config but I find myself using serve (from CLI) more than any other package.

Collapse
wolfhoundjesse profile image
Jesse M. Holmes

I use so many great extensions, and still I've found a few in your list that I wasn't using. Thanks!

Collapse
adityapadwal profile image
Aditya Padwal

Same here

Collapse
amanhimself profile image
Aman Mittal Author

Glad to hear that this post could be helpful:)

Collapse
tarifa10 profile image
tarifa-man

good day dear Aman Mittal well this is unexpected - i am very glad to read your ideas. - , great and overwhelming - i appreciate your text it is very very good .
i am happy to read your text - i like it very much. Can you give us more hints to run VSCode or VSCodium on mx-linux:

cf : I use VSCode daily and it is widely used, i am shocked it is not in stable repo. Please add VSCode to the package list.
see more here: forum.mxlinux.org/viewtopic.php?f=...
you are invited to add your ideas to the thread.

well we look forward to hear form you -regards tarifa

Collapse
igoldny profile image
Igor Goldny

if you like purple themes you should try "Shades of Purple".
for me (react developer) setting up vs code is easy, just install "React Food Truck 🍔" and let the extension collection do the work for me.

Collapse
dpashutskii profile image
Dmitrii Pashutskii • Edited

I use VS Code for Front end a few years I think, but it's still the pain for working with Back end like Rails a little bit. But I'm trying to switch from RubyMine.

Collapse
tarifa10 profile image
tarifa-man

hello and good day.

i am on mx-linux, and i just have setup a php-development-environment.
i just have installed PHP on the machine. Now i need to add a editor and yes: since vscode is used by a increasing number of folks i think i have to try out.
btw: what about setting up vscode as a php editor - sensu blog.theodo.com/2019/07/vscode-php...

is this a recommended way to go!? i have installed vscode on my machine now i want to setup it as a editor for the work with php.

i will have a closer look at the options.

Collapse
terabytetiger profile image
Tyler V. (he/him)

Team Fairy Floss represent! 🙌

Collapse
amanhimself profile image
Aman Mittal Author

🙌

Collapse
coelhoadler profile image
Adler Coelho Santos • Edited

Great config Aman, I use GitLens too!

Collapse
adityapadwal profile image
Aditya Padwal

Git Lens is really useful

Collapse
swizzmagik profile image
J. Brandon Johnson

Thank you for taking the time to put this together. You have helped a lot of people, including me!

Collapse
amanhimself profile image
Aman Mittal Author

Thank you so much for such a kind comment :)

Collapse
dcruz1990 profile image
Dennis Quesada Cruz

Now with default config + Django pluggin :D

Collapse
mittalyashu profile image
Yashu Mittal • Edited

I think you also don't have to install emoji extension, since all desktop OS have their own emoji picker.

Not sure about Linux, but both MacOS and windows do have an emoji picker.

Collapse
amanhimself profile image
Aman Mittal Author

I am on macOS and yes, it does have one. But I like the ease of using slack style emojis (using colon). Check it out, if you haven't yet.

Collapse
mittalyashu profile image
Yashu Mittal • Edited

That's true, the ease and power come with a : 😄.

Collapse
logicmason profile image
Mark

Great write-up!

How did you find the experience of writing those to extensions? Was there much involved in getting them listed?