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.
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)
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
autoSavewith 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!
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 📧
Top comments (37)
Nice list. One extension I can't live without is Settings Sync.
Me too 😄
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.
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.
but why?! Just copy & paste
Because that's what computers are for, automation. And because I am on my mobile phone.
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.
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:)
Same here
I did not know about this. Thank you!
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.
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.