DEV Community

Cover image for What is a Smart Code Snippet?
Julien for Codiga

Posted on

What is a Smart Code Snippet?

Code Snippets help developers share knowledge. However, searching and using code snippets is difficult because they lack context and information about how to use them.

In this article, we explain the main problem with code snippets, what is a smart code snippet and how to use them.

Code Snippets lack context

Existing code snippets are shared online without much context:

  • they do not have keywords, a proper description, and meta-information that make them searchable. You likely find snippets by doing a search on StackOverflow or Google, which index them based on the text attached to the post, not based on what the snippet contains.
  • they do not explicitly mention what library they depend on. One snippet may be relevant for one context but not another. For example, if you look for “create component react”, the result depends on that underlying version of react you are using but also if you are using other libraries (such as NextJS).

These issues make code snippets hard to find (search engines do not index code snippets but use the text surrounding the snippet to index them). And more importantly, it makes it hard to import the snippet since it’s not clear what dependencies must be used to import the snippets.

What is a Smart Code Snippet?

A smart Code Snippet is an enhanced version of a Code Snippet with the following additional information:

  • Name: a sentence that explains what the snippet does
  • Language: the programming language of the snippet
  • Dependencies: what libraries of framework the snippet depends on (e.g. React, NextJS, etc.)
  • Placeholders: part of the snippet that can be customized by the user
  • Description: multiple sentences that explain what the snippet does
  • Keywords: helps to find the snippets for search engine
  • Tags: list of tags to organize the snippet

This information helps to overcome the existing issue and make the snippet contextual. Developers can then look for a snippet that matches their environment.

If you are a Data Scientist using Python with numpy, you will look for snippets for this particular environment and you can look for them directly within your IDE.

If you are a frontend developer using JavaScript with React, a search for “create component” will be different than for a developer using also JavaScript but with VueJS.

Creating Smart Code Snippets

You can create a Smart Code Snippet on Codiga with a few clicks. Once on the platform, use the Coding Assistant feature to create a snippet. Enter the name of the snippet, its language, dependency, and the code.

Smart Code Snippet Creation

Once the snippet is created, the Codiga engine generates a description for the snippet. You can then attach keywords and tags to the snippet.

Smart Code Snippet Edition

Searching Smart Code Snippets

Searching Smart Code Snippets can be done either on the Codiga Hub or directly within your IDE. To search on the web platform, head to app.codiga.io/hub and enter what you are looking for (e.g. “create react component in javascript” or “read file in python”).

If you want to search in your IDE (using Codiga VS Code or IntelliJ integration), open the Coding Assistant menu (CMD + SHIFT + C on VS Code or ALT + SHIFT + C on IntelliJ/JetBrains) and enter your query. The code appears directly in your IDE. Once you find a snippet of code that matches what you are looking for, press enter to import it. Importing the code also updates the code dependencies if necessary, making sure the snippet is correctly inserted.

Smart Code Snippet Use in VS Code

Wrapping Up

Smart Code Snippets overcomes the issues with traditional code snippets. Smart code snippets are contextual and help developers to find the snippets they need. You can easily create snippets on the Codiga platform and search and import snippets directly in your IDE.

Resources

Discussion (0)