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.
// 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.
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.
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.
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.
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.
Supporting all JetBrains products
The Codiga extension is also available for:
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).