Tips to get the most out of VSCode
VSCode is a powerful and fast code editor that has taken the development world by storm.
While a few short years ago developers were siloed within their favorite code editors like Atom, Sublime Text, Brackets, or the good ol’ reliable Notepad++, the current landscape seem to have shifted towards Visual Studio Code, an open-source initiative spear-headed by none other than Microsoft.
Developers worldwide tune into VSCode for their daily development duties, but many haven’t gone as far as exploring what the editor can really do.
So in this article I hope to share a few tips and tricks that can kick your VSCode skills into a new gear. I’ll share a few tips on basic usability and offer some opinionated advice on how to customize your workspace, and then introduce a couple of more advanced functionalities like debugger configurations and developing in remote environments!
Run from CLI
Instead of using vim to edit files and configurations you are working on, use the code command that is provided by VSCode by default to quickly open and edit a single file (or directory)
code ./index.jsIf the command above doesnt work, add VSCode to your path with cmd + shift + p and search for Shell Command: Install code command in PATH
Shortcuts
VSCode comes with dozens of shortcuts built to speed up your workflow, below are some of the most commonly used shortcuts in VSCode:
Cmd + B: Toggle open/close sidebarCmd + P: File Switcher
This command is especially useful to quickly find a file when you don’t remember its exact path.
In the example below I was able to find all components with picker in the title just by typing components pickerinto the file switcher search.
Cmd + Shift + P: Command palette
With this command you can run virtually every action present in extensions you install, or built-in VSCode functions as well!
Pictured below is a list of all Git related commands in my VSCode (Some from the Git Blameextensions, and some built-in)
Cmd + ,: Open Settings
By going to code > Preferences > Keyboard Shortcuts, you can also register your own custom shortcuts to actions you perform regularly!
Customizing your workspace
VSCode offers a variety of opportunities to make your VSCode feel like home. And since us developers spend a huge portion of our day staring at our editors, it makes sense to try to make it as visually pleasing as possible!
Themes
On the top of the list of customizable things in VSCode we have our color schemes, I personally enjoy the Dracula at Night theme, and the 2077 theme for its colorful cyberpunk vibes.
Take a look at the VSCode themes site below and find a theme that you enjoy best 🤩
Icons
Alongside an attractive theme is a set of icons for your file tree. I find that the Material Icon Themes offers a wide variety of icons that dynamically adapt to the file extension and name it represents, offering some additional insights in the contents of what you’re developing.
Some other icon sets like Chalice Icons are more minimalistic but offer a lot of charisma in their own way too!
Fonts
When it comes to fonts it’s great to have attractive and easily readable fonts available in your editor, below are my suggestions for a free font and a paid font that I would like to recommend:
- FiraCode (free)
Installation Instructions (Mac):
- Install Homebrew
- Run
brew cask install homebrew/cask-fonts/font-fira-codein your terminal - Open your VSCode settings with
CMD + ,and add:
"editor.fontFamily": "Fira Code",
"editor.fontLigatures": true,- Dank Mono (40£)
Buy it at https://dank.sh
Remove unused functionality
For the vast majority of functionality visible in VSCode, there will be some setting to disable it. It’s great to get rid all the UI clutter by adding a few simple lines to your settings file.
Here are a few examples of things I’ve disabled in mine:
- Minimap:
"editor.minimap.enabled": false, - Open Editors (Element on top of file tree):
"explorer.openEditors.visible": 0, - Breadcrumbs:
"breadcrumbs.enabled": false - Exclude certain file paths from being displayed in file tree:
"files.exclude": {
"**/node_modules": true
}After playing around with all the options above I was able to get my workspace to look like this 😎
Debugging
VSCode offers a surprisingly complete suite of debugging functionalities. Albeit not explored too thoroughly by most developers, here at Wanted we are trying our best to utilize this functionality to seamlessly integrate a debugging experience directly to our editors, without needing additional debugger; lines to use the Chrome Dev Tools debugger functionalities.
To setup a debugger in your project, you just need to create a launch.json using the command palette, and selecting the option below:
You can check out Microsoft’s vscode-recipes repository for detailed information on how to set up your launch.json file.
Another part of the VSCode debugging experience is the existence of logpoints , which unlike breakpoints, don't stop the flow of your original application, and only log the values you need inside of the DEBUG CONSOLE section of your bottom panel. I find logpoints to be a great replacement for the constant console.log additions to the codebase
Remote Environments
Another powerful set of functionalities present in VSCode is the ability to edit files and projects that are not present in your local environment.
Remote development in VSCode comes in two different flavors. For more traditional workflows you’re able to SSH into a remote server, and set port forwarding that lets you connect tohttp://ocalhost:8080 even though you're really connecting to a remote server!
The other type of remote environment revolves around containerizing your applications with Docker, and performing the entire development of your application from the inside of these docker containers!
This method of development is great because having a containerized application means that the only thing new developers need to worry about setting up is VSCode and Docker, the remaining dependencies for their development environment comes baked into the repository
- Extension Link: https://marketplace.visualstudio.com/items?itemName=ms-vscode-remote.remote-containers
Additional information on how remote containers work can be found here
