# Rush Snippets - Key Features and New Enhancements (JavaScript Support, Advanced Imports Generation, and More)

As you may know, we recently released [Rush Snippets](https://marketplace.visualstudio.com/items?itemName=DevExpress.rushsnippets), which includes over 500 code snippets for VSCode.

In this blog post we'll review key features of **Rush Snippets** and describe new functionality available in our 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 stress that **Rush Snippets** delivers significantly more power than what you might otherwise find in a typical collection of snippets. It's carefully created by a dedicated team of developers with over 100 years combined experience building dev tools.

Here are some highlights that set 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, reducing noise and keeping 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 expanding code snippet. New imports are placed among existing imports. It 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 long. 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 use [tabstops and placeholders](https://code.visualstudio.com/docs/editor/userdefinedsnippets#_tabstops). **Rush Snippets** has taken this technology to the next level in two ways:

1) 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).
2) We 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 and in sync with your changes.


It's 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](https://dev.to/eugenr79/rush-snippets-speed-up-your-coding-in-vs-code-2fbi).

## 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 mdetails.

### 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](https://marketplace.visualstudio.com/items?itemName=DevExpress.rushsnippets).

### 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 after expansion or they typically expand in-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 is good.

We also check existing imports to **avoid duplicating code**. Because duplication erodes code quality.


In our latest update, we took our obsession with 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 (**watch 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](https://reactjs.org/docs/hooks-reference.html).

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.

We certainly expect to continue evolving this product and we plan to support other popular libraries (e.g., Angular and Vue) soon.

## Your Feedback Matters

Did we mention that **Rush Snippets** is **totally free**, and that you can download it from the VSCode marketplace? Get it here: [Rush Snippets](https://marketplace.visualstudio.com/items?itemName=DevExpress.rushsnippets).

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](https://github.com/DevExpress/vscode-rushsnippets/issues).