Recently we released Rush Snippets, which includes over 500 code snippets for VSCode.
Here we'll review key features of Rush Snippets and describe new functionality available in the latest update.
Overview
We should probably lead with the fact that Rush Snippets is free, and we have no plans to ever charge for it. We also plan to continue enhancing and maintaining it moving forward, so it's a win-win for VSCode developers.
Secondly, we should emphasize that Rush Snippets delivers significantly more power than what you might otherwise find in a typical collection of snippets. It has been carefully crafted by a dedicated team of developers with over 100 years combined experience building dev tools.
Some highlights of what sets Rush Snippets apart:
We Check the Context
Before expanding any Rush Snippet, we first ensure the code surrounding the caret matches the expected context for the snippet. So Intellisense only lists snippets that make sense for the active code you're in. This reduces noise and keeps Intellisense fast and easy to use. This also means it's unlikely you'll ever get an unexpected snippet expansion. Rush Snippets are built to only expand where they make sense.
![]()
Rush Snippets Correctly (and Automatically) Generate Imports
Rush Snippets adds missing dependent imports to the top of the file, if needed, to support the code in the expanding code snippet. New imports are placed alongside existing imports. Rush Snippets also checks if the necessary module import already exists, and only adds modules that need to be declared.
![]()
Discoverability and Speed
Rush Snippets deliver two kinds of Snippet shortcuts - ultra-short and descriptive.
Ultra-short abbreviations are for when you need to create code with maximum speed and efficiency. These snippets are the shortest path from thought to code.
We also ship snippets with longer, more descriptive names. These more descriptively named snippets improve discoverability, and make the full product accessible without training or memorization. We use meaningful expressions in a standard format, so it's easy to find useful snippets quickly with Intellisense. Like this:
More Than a Placeholder
To mark a section for change, traditional snippets from other companies use tabstops and placeholders. Rush Snippets has taken this technology to the next level in two ways:
We use Fields as a replacement for placeholders, and we use Links to connect placeholders that must have matching text. Fields are rendered with an amber frame around the placeholder text. And unlike traditional placeholders, Rush Snippets fields are solidly anchored in the code, so they still work even if you navigate through the file or switch to another document (for example, while gathering/viewing code elsewhere while entering snippet placeholder data).
We also correctly update link and field positions as you edit the text. So, you can make any changes you like to the code (even outside placeholder fields) and the links will still work, staying right where they belong, in sync with your changes.
![]()
The technology is simple, and it just works. Like you'd expect from a professionally-crafted product.
You can read more about Rush Snippets here: Rush Snippets - Speed Up Your Coding in VS Code.
Rush Snippets - Latest Update
The latest Rush Snippets release introduces new snippets for JavaScript projects, React hooks, and advanced imports generation. See the sections below for more details.
JavaScript Support
With the new JavaScript support in this version, Rush Snippets makes JavaScript development fast and easy, and also provides easy access to sophisticated React and Redux library constructs.
TypeScript Support
Rush Snippets also contains snippets for TypeScript (with React and Redux support). You can find a full list of these snippets on the product page.
Improved Imports Generation
It's rare to find a third-party snippets engine for VSCode that includes an understanding of the language, let alone the supporting frameworks. Most third-party snippets are just simple text expansions. And for that reason, if imports are needed to support a snippet they either need to be added manually (by you) after expansion or they typically expand in-place (in the wrong place) along with the snippet text. This traditional approach can easily lead to disorganized or incomplete code, increasing the burden on you to fix the "broken code". It's the opposite of what you want from a productivity tool.
As sometimes seen in competing products, here's an example of the absolutely wrong way to expand snippets with imports:
Snippets should be smarter. And with Rush Snippets they are.
With Rush Snippets, necessary imports are automatically and intelligently added at the top of the file where they belong, rather than being haphazardly dropped at random places in the code. Organized code is good code.
We also check existing imports to avoid duplicating code. Because duplication erodes code quality.
In our latest update, we took our obsession with both quality and organized code to the next level. Now, if a file already imports a required module (but is missing a reference to a needed export, such as useState), then we simply modify the imported object list (instead of adding new modules).
This is how it looks in practice (keep your eyes on line 1 when the snippet expands):
All this effort helps keep the code simple and easier to read. And that's important.
React Hooks Support
React Hooks are a well-established practice for developers who work with React. React Hooks allow you to easily consume React features (for example, state) without declaring component classes. A comprehensive list of React hooks, their detailed descriptions, and code examples are available here: Hooks API Reference.
This Rush Snippets update introduces snippets support for the following hooks: useState, useEffect, useContext, useReducer, useCallback, useMemo, useRef, useLayoutEffect, and useDebugValue.
Looking Ahead
In the first Rush Snippets release we shipped a collection of snippets for TypeScript with support for two UI libraries - React and Redux. In this release, we added support for JavaScript and made our import generation even smarter.
And we expect to continue evolving this product and plan to support other popular libraries, such as Angular and Vue, soon.
Your Feedback Matters
Did we mention that Rush Snippets is totally free, and that you can download it now from the VSCode marketplace? Get it here: Rush Snippets.
If you’re working in VSCode, give Rush Snippets a try and let us know what you think. We look forward to see your feedback/thoughts on Github.