Wednesday, 27 May, 2020 UTC
Summary
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
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 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", } 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 }, } 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" } ] 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}", } 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!