23rd Oct 2020

Supercharging your development environment on Visual Studio Code

by

Like many developers out there, Visual Studio Code (VSCode) is now my go to editor for almost everything (with the exception for Android Studio (for Android) and IntelliJ IDEA (for Java)). I really like customising my VSCode, so that it is easier for me to develop on.

Shortcuts

There’s a lot of shortcuts that I use on a day to day basis within VSCode, the ones that I use the most include:

  • Quick Find: ⌘ (Command) + P
  • Command Palette: ⌘ (Command) + Shift + P
  • Open Terminal: ^ (Control) + `
  • Duplicate current line up or down: ⌥ (Option) + Shift + (Up or Down arrow)
  • Move current line up or down: ⌥ (Option) + (Up or Down)

There’s a lot more shortcut keys that I use, but those are the most common ones. The VSCode team also has some awesome key binding posters that you can print out and stick near your desk (I used to print these out with macOS on one side and Windows on the other and stick it around the office).

User Settings

There’s some neat settings that I always loved being enabled within my VSCode User Settings (globally).

The first one is Format on Save, with this enabled VSCode automatically formats the file you are working on, it picks up ESLint, TSLint and Prettier configs which is pretty neat.

The second one is the Terminal Font Family, if you customised ZSH like me, the default terminal sometimes doesn’t know what font to render your icons in your terminal in and you’ll end up with question marks in boxes.

The last one is Enable Commit Signing, this automatically uses the -S for your commits, (use this if you use GPG signing for your git commits!) and integrates nicely with VSCode’s inbuilt Git feature.

Plugins

I always loved the customisability of VSCode with the community building many beautiful plugins (and language support!).

Excluding language based plugins such as C/C++, Dart, Python, etc. I usually add themes, formatters, and other tools that I use.

Development Based

These plugins help me with my day-to-day use.

  • GitLens: gives you the ability to see the history of the file, in addition to files. Also can use git blame more easily too! 🙈
  • Polacode: Share your code by sending awesome screenshots!

Themes that I love using include Halcyon and One Dark Pro

There’s a lot more tips and tricks that I use for my VSCode, but they’re not really for everyone.

Thanks for reading this!

Enjoyed the post? You might want to read similar posts:

Static Site Deployments with Webhooks

Previously on my personal website, the blog content, after converting it back to Static Site Pages, I figured out that you can use webhooks to trigger rebuilds. As both Vercel (the hosting provider) and Prismic (the headless CMS provider) have support for webhooks. To do this, we are going to try and trigger a build on the creation and deletion of blog-posts documents.

Read Article

Published on 29 Oct 2020

October 2020 Site Upgrades

Something happened to my blog but you can't really tell if you visit the frontend of my blog! I migrated all my blog posts over to Prismic as a Headless CMS solution, after finding that I prefer writing my blog content over on a rich text editor and also having to roll out a change to my preview and main branches on my repository (github.com/ericjiang97/nextjs-personal) especially with blog posts.

Read Article

Published on 24 Oct 2020

Migration of Live/Music

A few days ago whilst browsing through my old repositories on GitHub, I've discovered a really old app which showcased chaining some really awesome technologies together. This app showed what music I was playing anytime on Spotify or iTunes via Last.fm.

Read Article

Published on 2 Aug 2020

Like what you read? You may want to subscribe to my newsletter

I also occassionally write on my newsletter, so please subscribe below.

Powered by Buttondown

Copyright © Eric Jiang 2016 - 2021

Powered by Vercel & Prismic. Built in NextJS with Bumbag

Find the code on GitHub

Encoutering issues? Submit an issue