Manage your JavaScript and TypeScript Code Snippets with WebStorm

When writing frontend code with JavaScript or TypeScript, we often reuse the same code and components. Because we reuse so many code blocks, we often save them as code snippets.

WebStorm have live templates to create code templates, but there is no easy way to share them with other team members or share them across IDEs.

In this article, we present the Codiga Coding Assistant plugin for WebStorm. It lets you create, share, search and imports code snippets in WebStorm. Code Snippets created with Codiga are shareable with your team and work across different IDEs (JetBrains, VS Code, etc.).

We will illustrate how Smart Code Snippets work and illustrate it by using TypeScript with Chakra.

Install the Codiga WebStorm Plugin

First, install the Codiga plugin extension in WebStorm. Go to the preferences of WebStorm first and go to the PlugIns section. Look for the Codiga plugin in the marketplace and click install.

The hardest part is almost done! Next, let's set up your API token set up!

Setup your Codiga API token

First, head to Codiga and create your API token. This token will link your Codiga account with WebStorm.

Once you get the API token, enter it in WebStorm. Go to the preferences. Under the Tools section, find the Codiga sub-section and enter your API token.

IMPORTANT: do not forget to click on Apply before testing the API connection.

Search JavaScript/TypeScript Code Snippets in WebStorm using comments

Open WebStorm and start a comment with your search keywords. For example, enter the following comment in a JavaScript or TypeScript file.

COPY// create chakra header

The Codiga plugin queries the Codiga Code Snippet engine for the snippet based on the keywords you entered. The plugin detects your dependencies (React, Chakra, VueJs, etc.) and only suggests snippets matching your development environment.

The plugin proposes multiple code snippets based on your suggestions. You can browse the suggestions using ALT + ] (next snippet) or ALT + [ (previous snippet). Use TAB to insert a snippet and ESC to remove suggestions.

IMPORTANT: the Codiga engine uses extract the comment content to get the keywords. If you create a code snippet on Codiga and want to make them searchable, make sure you add keywords to your code snippets.

Search JavaScript/TypeScript Code Snippets in WebStorm using embedded search

Sometimes, you prefer a search interface to browse all code snippets. Open the code snippets panel in WebStorm. The panel finds the language in the editor and suggests code snippets based on the packages being used in your environment.

Enter your search request. You can then go on the button to preview the snippet and if the snippet is what you need, click to insert it into your code.

IMPORTANT: the Codiga engine uses all the words in the comments to find snippets based on their keywords. If you create a code snippet on Codiga and want to make them searchable, make sure you add keywords to your code snippets.

Import a JavaScript/TypeScript Code Snippet in WebStorm using shortcuts

A shortcut is a short set of words that triggers the snippet and inserts it into your IDE. It is very useful when you repeat the same code very often.

Some code snippets have a shortcut (you can see the shortcut in the code snippet panel). Shortcuts are associated when you create the snippets. They are a great way to associate a code snippet with a short keyword.

Start typing a . in your editor, followed by the shortcut you want to use. Codiga will then suggests shortcuts as you type. Select the shortcut in the suggestions to insert it in the editor.

Create JavaScript/TypeScript Code Snippets in WebStorm

You can also create code snippets from WebStorm. Select the code you want to share in WebStorm, make a right click and select Create Codiga Snippet. The plugin opens your browser to create the snippet.

After creating a snippet, you can associate the following elements:

• keywords: keywords are used to index the snippet and make them searchable in the snippet search, either in the panel or in the comments.
• shortcut: shortcuts make snippets easy to find. Typing a . followed by the keyword will suggest the snippet directly in your editor.

Share your JavaScript/TypeScript Code Snippets on the Codiga Hub

When creating a code snippet on Codiga, the snippet is either public or private. Public snippets are shared on the Codiga Hub, a central repository for code snippets.

If you create code snippets for JavaScript/TypeScript, your snippets will be available and indexed on the Codiga Hub. As you create more snippets, your Codiga karma will increase, unlocking badges and rewards.

Supporting all JetBrains products

The Codiga extension is also available for:

• PyCharm
• IntelliJ

Wrapping Up

Creating code snippets in WebStorm has never been so easy with the Codiga extension. Code Snippets are shared across the Codiga community on the Codiga Hub and reusable across platforms (such as other JetBrains IDEs and VS Code).