DEV Community

Cover image for My VS Code setup - Making the most out of VS Code
Deepu K Sasidharan
Deepu K Sasidharan

Posted on • Updated on • Originally published at deepu.tech

My VS Code setup - Making the most out of VS Code

Originally published at deepu.tech.

Visual Studio Code(I like the sound of VS Code better), I just love it. It is my primary code editor.

I always loved lightweight editors over IDEs. Many years ago I was using Eclipse for development and Notepad++ with some plugins for all other lightweight stuff. Then I discovered sublime text and was using it for a while. I still was finding Eclipse too heavyweight when I was doing web development. Then came Brackets from Adobe. It was a fairly nice editor especially for web development and I started using it heavily for web development. But Brackets was bit slow back then on a large codebase. Then came Atom which revolutionized the NodeJS desktop application landscape by introducing the Atom shell which ultimately became Electron. So I switched to Atom and loved its slick interface and nice pluggable features. It became my primary editor for all web development.

So Electron paved the way for VS Code and though at first, I was skeptical due to the association with Visual Studio, I tried it out and was amazed by its speed and user experience. There was no turning back now. I slowly started using VS Code for most of my day to day development, except for JVM development which I was using IntelliJ Ultimate by now and it is hard to beat IntelliJ for JVM development. Fast forward now below are the editor/IDE I use for development.

  • VS Code: JavaScript, TypeScript, EJS, HTML, CSS, Golang, Rust, Python, Ruby, Shell, Docker, Kubernetes, Terraform and everything in between including writing this blog post.
  • IntelliJ Idea: Java, Scala, Kotlin, Groovy
  • VIM: For quick edits from the command line.

Plugins

Of course VS Code makes all this possible by allowing the use of plugins and there is a lot to choose from. Here are the plugins that I personally use to work on the above-said languages. You can use the code --install-extension command to install them from the terminal.

Language support

Based on the Languages you work with you can add syntax, utility and language support plugins for those. I use the below

JavaScript/TypeScript/Web

  • EJS language support - Adds EJS template support. > code --install-extension DigitalBrainstem.javascript-ejs-support
  • Close HTML/XML tag - Auto close HTML/XML tags. > code --install-extension Compulim.compulim-vscode-closetag
  • ESLint - Adds support for ESLint rules. > code --install-extension dbaeumer.vscode-eslint
  • TSLint - Adds support for TSLint rules. > code --install-extension ms-vscode.vscode-typescript-tslint-plugin
  • Prettier - Adds support for Prettier formatter. > code --install-extension esbenp.prettier-vscode
  • es-beautifier - Formats JS according to Eslint rules. > code --install-extension dai-shi.vscode-es-beautifier

Go

  • Go - Adds rich language support for Golang. > code --install-extension ms-vscode.Go

JVM

  • Language Support for Java - Adds Java language support. > code --install-extension redhat.java
  • Debugger for Java - Adds lightweight Java debugging support. > code --install-extension vscjava.vscode-java-debug
  • JHipster JDL - Adds syntax support for JHipster JDL files. > code --install-extension jhipster-ide.jdl

The Java support indeed is getting better and better, so I hope one day I can completely switch to VS Code.

Python

  • Language Support for Python - Adds Python language support, linting and debugging support. > code --install-extension ms-python.python

Cloud, Container & others

  • Docker - Adds Docker support(view and manage containers) and support for Docker, docker-compose files.

code --install-extension ms-azuretools.vscode-docker

code --install-extension secanis.jenkinsfile-support

  • Terraform - Adds support for Terraform files.

code --install-extension mauve.terraform

code --install-extension yzhang.markdown-all-in-one

code --install-extension jebbs.plantuml

code --install-extension VisualStudioExptTeam.vscodeintellicode

  • YAML - Adds YAML support. > code --install-extension redhat.vscode-yaml

Theme

Dark++ Italic

My default theme. Similar to VS Code default dark theme but has support for FiraCode and Operator Mono fonts. I personally use FiraCode.

code --install-extension idbartosz.darkpp-italic

Material icon theme

A nice icon theme based on material icons.

code --install-extension PKief.material-icon-theme

Peacock

Subtly changes the workspace color of your workspace. Helpful to identify when you have many windows open.

code --install-extension johnpapa.vscode-peacock

Tools

Auto rename tag

Automatically rename paired HTML/XML tags

code --install-extension formulahendry.auto-rename-tag

Bracket pair colorizer 2

Marks matching bracket pairs with unique colors. This really makes reading code nicer

code --install-extension CoenraadS.bracket-pair-colorizer-2

Change case

Convert between different cases. Trust me this is so handy

code --install-extension wmaurer.change-case

Code spell checker

Fairly useful for spell checking within code. Takes cameCase etc into account

code --install-extension streetsidesoftware.code-spell-checker

Easy snippet maker

Useful to store re usable snippets.

code --install-extension tariky.easy-snippet-maker

EditorConfig for VS Code

Add support for EditorConfig.

code --install-extension EditorConfig.EditorConfig

Git History

Enable viewing Git history within VS Code.

code --install-extension donjayamanne.githistory

Gitignore

Makes it easy to work with .gitignore files.

code --install-extension codezombiech.gitignore

Hide gitignored

Hides patterns defined in .gitignore from the editors explorer.

code --install-extension npxms.hide-gitignored

Mark as excluded

Exclude stuff right from the explorer tree.

code --install-extension jcmordan.mark-as-excluded

Toggle Excluded Files

Easily toggle between showing and hiding excluded files/folders.

code --install-extension eamodio.toggle-excluded-files

IntelliJ IDEA Keybindings

I have bad muscle memory so wanted to use the same keyboard shortcuts as IntelliJ. There are mappings available for Sublime, Atom and so on.

code --install-extension k--kato.intellij-idea-keybindings

Sort JSON

Sorts JSON object keys.

code --install-extension richie5um2.vscode-sort-json

Test Explorer UI

Adds an explorer panel for running tests. Supports multiple languages and testing frameworks.

code --install-extension hbenl.vscode-test-explorer

Todo Tree

Aggregate TODO, FIXME, etc in a tree view in explorer.

code --install-extension Gruntfuggly.todo-tree

Terminal setup

If you are using Zsh shell with Oh-my-zsh like me as explained here, you might want to do the below to get the same terminal experience in the integrated VSCode terminal as well.

Follow these steps

  • Download and install a patched font.
  • On GNU/Linux, run fc-cache -f -v to refresh font cache.
  • On VSCode, open Preferences → Settings and click on the {} icon to open JSON mode and set the below
    "terminal.integrated.shell.linux": "/usr/bin/zsh",
    "terminal.integrated.fontFamily": "'SauceCodePro Nerd Font Mono','Source Code Pro'",
    "terminal.integrated.rightClickCopyPaste": true,
    "terminal.integrated.fontSize": 14,
    "terminal.integrated.cursorStyle": "underline",
    "terminal.integrated.cursorBlinking": true
Enter fullscreen mode Exit fullscreen mode

Replace linux with osx if you are on a Mac.


Conclusion

This might seem like too many plugins but on my configuration VS Code is lightning fast and loads up immediately and is faster then IntelliJ to load and work with. The beauty of VS Code is that you don't need all the plugin all the time, you can disable the ones not required per workspace to make it even faster.

Many people ask me why I use VS Code when I have IntelliJ and my answer have been always the same. IntelliJ is great but its also quite heavy. While all those advanced features are needed for Java, Scala or Kotlin development, VS Code is perfectly capable of giving a nice developer experience for lightweight languages like JS, TS, Go, Python, Rust, Ruby, etc.

As a regular user of both IntelliJ and VS Code, I prefer VS Code as much as possible. The user experience is much nicer for my taste. In fact, I like the developer experience in VS Code better for JavaScript, TypeScript, Web, Python, and Golang. Also switching between them for JVM projects and others don't feel weird for me as I have the same keyboard mappings for both. The only time I fire up IntelliJ these days is when I want to do full-fledged Java development. For everything else, I use VS Code.


I hope you find this useful. If you have any questions or if you think I missed something please add a comment.

If you like this article, please leave a like or a comment.

You can follow me on Twitter and LinkedIn.

Top comments (22)

Collapse
 
dotnetcoreblog profile image
Jamie

If your serious about using Code for authoring markdown files, I cannot recommend the docs authoring pack enough. Its a "metapackage" of sorts which brings a bunch of different markdown extensions together.

Collapse
 
deepu105 profile image
Deepu K Sasidharan

Cool. I'll check it out

Collapse
 
deepu105 profile image
Deepu K Sasidharan

It looks more specific for Doc specific markdown, I think I already use some of the individual plugins though. Will try later to see if its better than the one I currently use.

Collapse
 
mukherjee96 profile image
Aritra Mukherjee

GitLens is an amazing extension for collaborative projects.

Collapse
 
deepu105 profile image
Deepu K Sasidharan

I had that, but then disabled since I wasn't using it much

Collapse
 
heikokanzler profile image
Heiko Kanzler 🇪🇺 • Edited

I thought I am the only one. I am a long term IntelliJ User (almost exclusively Grails for over a decade now) and started recently in the JS (seriously) and I love VS Code. I even use it, like you for smaller things with my Grails Code Base. In fact, i haven’t tried an JS/Angular Project with IntelliJ...

Collapse
 
deepu105 profile image
Deepu K Sasidharan

Once you go code you don't go back

Collapse
 
tarifa10 profile image
tarifa-man

Hello dear Deepu - wow i am really impressed. You are great!!!

This text is outstanding 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.

deepu . just see more here: forum.mxlinux.org/viewtopic.php?f=...
you are invited to add your ideas to the thread.

dear . well we look forward to hear form you -regards tarifa

Collapse
 
adam_cyclones profile image
Adam Crockett 🌀

Alphabetical sorter. The simplest most versatile extension you will miss if it's gone. alphabetical-sorter

Collapse
 
deepu105 profile image
Deepu K Sasidharan

It looks cool!

Collapse
 
adam_cyclones profile image
Adam Crockett 🌀

Fix those, imports, consts, CSS rules, XML and JSON props, nice and easy. 100% a must have.

Collapse
 
bcroq profile image
Bertrand Croq

No love for ungit?

Collapse
 
deepu105 profile image
Deepu K Sasidharan

Never tried it. Looks interesting will check it out

Collapse
 
antlio profile image
Anthony Lio • Edited

Great thanks!
Just had to replace "/usr/bin/zsh" per "/bin/zsh" (on osx).

Collapse
 
denvash profile image
Dennis Vash

For react developing, check out this extensions pack: marketplace.visualstudio.com/items...

Collapse
 
trondulseth profile image
Trond Ulseth

Many good ones here, also some I’ve not seen yet, so thanx for the list. I also love Indent Rainbow: marketplace.visualstudio.com/items...

Collapse
 
deepu105 profile image
Deepu K Sasidharan

Thank you

Collapse
 
fultonbrowne profile image
Fulton Browne

Thanks love it!

Collapse
 
deepu105 profile image
Deepu K Sasidharan

Oops thanks. I'll correct it soon

Collapse
 
krutikkhatri profile image
krutikkhatri

Hii
You can also use onlinejsontools.org/ for json validator,beautify,minify,xml,yaml,CSV,bson,plain text,base64,tsv.
Do checkout this site!

Collapse
 
krutikkhatri profile image
krutikkhatri

You can also use yamlonline.com/ for the yaml validator as well as yaml converter to json,csv,xml,base64 also for beautify and minify YAML.

Collapse
 
aaronngray profile image
Aaron Gray

Great but no notes on how to use some of the extensions