8 VS Code extensions you didn’t know you needed

8 VS Code extensions you didn’t know you needed

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.

vs code dashboard IDG

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. (Support for Apache Parquet 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 (10MB or more) aren’t an issue.

vs code data preview IDG

Data Preview allows interactive viewing and manipulation of data in many common formats, such as CSV. 

Placeholder Images

If you need placeholder images for a project—which is likely for web development, UI mockups, or documentation—look no further than Placeholder Images. This VS 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.

vs code placeholder IDG

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.

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.

vs code faker IDG

“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 VS Code status bar. 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.

vs code word counter IDG

WordCounter adds detailed readability statistics and count metrics to the status bar. All of its measurements can be configured. 

Jumpy

Fans of modal editors love the way they can dive across a line, a page, or a document to some specific logical point with just a couple of keystrokes and no mousing about. Jumpy adds the ability to move quickly through your code with nothing but the keyboard.

When you activate Jumpy, your code onscreen is decorated at various key points (line breaks, beginnings of expressions, etc.) with two-letter code labels. To go to a given label, just type the two-letter code. You can customize the symbols used for the codes or use the defaults, which are A through Z and 0 through 9.

Note that by default Jumpy does not have any keybinding. You have to set one up yourself to use it, which helps to avoid conflicts with other extensions.

vs code jumpy IDG

Jumpy in line mode. Typing one of the two-letter codes shown will move the cursor to that point in the file.

Toggle

VS Code’s settings can be a labyrinth to spelunk through and modify. It’s even less fun if you’re looking for the same settings time and again, to toggle them on or off depending on the case.

Toggle VS Code extension screenshot. IDG

With Toggle, options buried deep inside VS Code’s settings can be exposed and changed with the press of a hotkey.

Peng Lv’s Toggle extension lets you take any VS Code setting and assign a keybinding to it. Tap the key, and you swap the value of the setting; it’s that simple. You can even assign multiple settings to be toggled by the same keybinding.

The one downside to Toggle is you have to manually configure the keybind file, but that isn’t too hard. Use Preferences: Open Keyboard Shortcuts (JSON) to create or open the file, paste in the example provided, and use the keybinding reference to set up your bindings.

Text Power Tools

VS Code is, at heart, a text editor. “Text” doesn’t just mean program code; it can mean documentation in a variety of formats including plain text. The Text Power Tools extension equips VS Code with a battery of text processing utilities not included by default.

Text Power Tools VS Code extension screenshot. IDG

Type “tpt” in the VS Code command palette to see the options available for altering a text selection in Text Power Tools. Many more are not shown here.

Among the tools available in this collection: filter lines in a file by regular expressions; change or swap case of selected text; prepend or append text to lines or regions; sort text regions by various criteria; intelligently paste clipboard data in a variety of formats; generate placeholder data in various forms; change encodings for selections; alter Unicode normalization forms; and many more.

One very useful add-on is “text slots”—a way to quickly store up to five clipboard entries and re-use them. If you aren’t already using an enhanced clipboard utility, this is a handy way to get the same functionality.

Add a Comment