← All posts
Julien Delange Friday, August 26, 2022

Manage your JavaScript and TypeScript Code Snippets with WebStorm

Share

AUTHOR

Julien Delange, Founder and CEO

Julien is the CEO of Codiga. Before starting Codiga, Julien was a software engineer at Twitter and Amazon Web Services.

Julien has a PhD in computer science from Universite Pierre et Marie Curie in Paris, France.

See all articles

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.

Install Codiga Plugin in WebStorm

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.

Get your API token

Getting Codiga API token

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.

Setup API Keys

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.

// 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.

Searching Code Snippets in WebStorm using JavaScript/TypeScript comments

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.

Searching Code Snippets in WebStorm

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.

Importing a Code Snippet in WebStorm using a shortcut

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.

Creating a Code Snippet from WebStorm

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:

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).

Schedule a demo

Code analyzed in seconds with Codiga Automated Code Reviews.

Write code faster with the Codiga Coding Assistant.

Let's talk!