My favourite Visual Studio Code tips for "how did you do it" kind of people
Apart from a web browser, Visual Studio Code is the application that I spend the most time using. “How did you do it” is something that I hear quite often from other developers whilst using it in front of them. This article is exactly for those kind of people — Visual Studio Code users keen to learn a few little tips for productivity, keyboard shortcuts and little known hidden gems.
- Use Visual Studio Code as a diff tool
- Switch theme based on the OS appearance
- Language-specific settings
- Change font size without changing the size of UI elements
- More descriptive project title (macOS)
- Rename symbol
Use Visual Studio Code as a diff tool
Having a simple diff tool to compare two files very often comes in handy. Command-line interface for Visual Studio Code has one.
code --diff one.js two.js
Switch theme based on the OS appearance
Modern operating systems now support light and dark color schemes. Wouldn’t it be cool to adjust the look of our editor based on a preferred mode? Turns out that auto-switch theme based on OS color scheme is at our disposal since version 1.42 (January 2020). Here’s the snippet required to enable it.
{
"window.autoDetectColorScheme": true,
"workbench.preferredDarkColorTheme": "GitHub Dark",
"workbench.preferredLightColorTheme": "GitHub Light",
}
Language-specific settings
Some customizations may be useful only for specific languages. My specific use case for this feature is to tweak slightly the Markdown display configuration. In contrast to code, in Markdown files I don’t care too much about line numbers. Word wrapping comes in helpful in reading/writing long-form paragraphs.
{
"[markdown]": {
"editor.lineNumbers": "off",
"editor.wordWrap": "bounded",
"files.trimTrailingWhitespace": false
},
}
Change font size without changing the size of UI elements
Bumping up the font size of my editor is very handy during live demos and pair-programming sessions. Clicking cmd + and cmd - comes as second nature to manipulate the size of a text. Unfortunately, these two shortcuts not only change the size of a font but affect the scale of all the UI elements. If it’s not something that you want, add this to your keybindings.json.
[
{
"key": "cmd+=",
"command": "editor.action.fontZoomIn"
},
{
"key": "cmd+-",
"command": "editor.action.fontZoomOut"
},
{
"key": "cmd+0",
"command": "editor.action.fontZoomReset"
}
]
More descriptive project title (macOS)
When I work with multiple projects, I like to have them open as a separated spaces (macOS). Unfortunately titles in Mission Control aren’t helpful enough to quickly identify the project of interest. One picture worth a thousand words.
With a one-liner config change, my life became much easier by showing a folder name, instead of the confusing path that is a default setting.
{
"window.title": "${folderName}",
}
Rename symbol
I change symbol names all the time. Simply type F2 to rename all occurrences of particular symbol. It’s not working for all languages, but inside JavaScript / TypeScript files it works like a charm.
That is it for today. Thanks for reading and until next time, stay safe!
very nice! I really like the window title setting