Visual Studio Code is a terrific software development environment, not only because it has excellent code editing features and language support. Thanks to its rich culture of extensions, it also allows you to perform many supporting tasks besides. You’ll find Visual Studio Code extensions for everything from speedy navigation of the editor to working with data to effortlessly inserting placeholder text and images.
Here are seven extensions that you might not encounter when putting together a development environment for your language of choice or work scenario, but could be extremely useful additions to your toolkit — and even part of your daily workflow.
Dashboard
Users of Chrome and Firefox ought to be familiar with the “speed dial” menu displayed by default when you open a blank tab. The Dashboard extension does something similar for Visual Studio Code, allowing you to access your most common projects or workspaces quickly. Projects can be added, edited, removed, or re-ordered freely, and you can use colors, gradients, or emojis to set project buttons apart. If a project is detected as being a Git repository, Dashboard will give it an icon to indicate it.
Commonly used projects can be pinned to Dashboard’s launcher page, placed in custom groups, and assigned custom colors.
Data Preview
Visual Studio Code can work as an environment for data preparation and data wrangling as well as authoring and executing code. But if you’re working with anything more sophisticated than the simplest files, the built-in file handlers for data formats won’t cut it. Data Preview adds handlers, visualization tools, and management functions for a wide variety of common formats—not only JSON or CSV, but also Excel, Apache Arrow and Avro, and YAML and other configuration files. (Apache Parquet support is scheduled for a future release.) Data Preview uses a streaming data analytics library written in WebAssembly to handle the heavy lifting, so even large files (10 MB or more) aren’t an issue.
Data Preview allows interactive viewing and manipulation of data in many common formats, such as CSV.
Jumpy
The more you type, and the faster you type, probably the less you like switching to the mouse to move the cursor to the next part of the document you want to work on. Jumpy provides a fast way to navigate to an exact point in a document by using the keyboard, and without having to hammer the arrow keys.
When you invoke Jumpy, two-letter codes appear to mark the word and line boundaries for the document on-screen. Type the two-letter code, and the cursor jumps to the marked position. You can use word or line mode to navigate within a given line or across the screen. You can also freely configure key bindings as well as the regular expressions used to match word boundaries or empty lines.
Note that, by default, Jumpy doesn’t assign key shortcuts to activate it. You must set these up yourself before you can use it.
Jumpy in line mode. Typing one of the two-letter codes shown will move the cursor to that point in the file.
Placeholder Images
If you need placeholder images for a project — a likely event for web development, UI mockups, or documentation — look no further than Placeholder Images. This Visual Studio Code extension lets you insert images as HTML references from a number of popular free-to-use image providers, including stock-image services like Unsplash. To select an image, just provide a target size along with the provider, and a random image that fits the bill will be chosen from the provider in question.
Placeholder Images taps many common sources of free-to-use images to insert placeholder images as HTML references, or it can copy image URLs to the clipboard.
Settings Sync
Settings Sync allows Visual Studio Code settings to be synced across multiple machines by storing them in a GitHub Gist. These include the user settings, keybindings, launch options, snippets, extensions, workspaces, and snippets. You can use public or private gists to share your settings with team members or keep them to yourself. You can also selectively exclude settings or extensions from being synced. Settings Sync also provides a GUI for changing settings and setting up one’s GitHub credentials.
Settings Sync can save Visual Studio Code settings to public or private GitHub gists.
VSCode Faker
Sometimes you just need some placeholder text—a fake address line, a fake phone number, or a quick of “lorem ipsum,” Maybe you’re constructing an HTML template example. Maybe you’re substituting fake data with live data for a screenshot or a config file. VSCode Faker generates fake data of all kinds, fast, without your having to think about it. VSCode Faker can even be set to generate fake data for a specific locale, as long as you have the locale ID.
“Lorem ipsum” text generated with VSCode Faker. VSCode Faker’s fake text can be single sentences or whole paragraphs.
WordCounter
Word counts and reading time are super useful for blog posts and news articles, so why stop there? Wouldn’t it be nice to have some idea of how long it will take to digest a README, or to know exactly how simple that “simple” introduction is to the documentation you’re writing? WordCounter places a detailed and configurable word, character, line, paragraph, and reading-time meter in the status bar of Visual Studio Code. It’s highly configurable; you can change what constitutes a word delimiter, for instance, or the count of words per minute used to calculate reading time.
WordCounter adds detailed readability statistics and count metrics to the status bar. All of its measurements can be configured.