loading...

How I configure VSCode for Everything

amanhimself profile image Aman Mittal Updated on ・3 min read

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

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,

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!


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 📧

Posted on by:

amanhimself profile

Aman Mittal

@amanhimself

👨‍💻Developer 👉 Nodejs, Reactjs, ReactNative | Tech Blogger with 2M+ views on Medium | My weekly dev newsletter 👉 tinyletter.com/amanhimself

Discussion

pic
Editor guide
 

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

 
 

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

 

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

 

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.

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)

 

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.

 

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.

I did not know about this. Thank you!

 

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

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

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.

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

Hey dude! No worries. :)

 

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.

 

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

 

You should hyperlink all the extensions you mentioned.

 
 

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

 

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

 
 

Glad to hear that this post could be helpful:)

 

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

 

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.

 

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.

 

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.

 

Team Fairy Floss represent! 🙌

 
 

Now with default config + Django pluggin :D

 

Great config Aman, I use GitLens too!

 

Git Lens is really useful

 

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.

 

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.

 

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

 

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

 

Thank you so much for such a kind comment :)

 

Great write-up!

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