Using Snippets in Visual Studio Code

Introduction

Compared to the posts I have uploaded so far, this will be super short and brief, so I will briefly go through the topic of Snippets and how you should utilize it in Visual Studio Code, to ultimately enhance your experience as a developer! I am writing this as an assignment of the coding bootcamp that I am currently attending right now, so like I previously mentioned, it will be very concise and right to the point.

Snippets?

Snippets are simply bits of code that you frequently utilize in your daily coding lives, that you tend to sort of copy and paste in so many parts of your projects. For example, to create an HTML document, you mostly start with the very line, which is <!DOCTYPE html> followed by various tags, such as <html>, <head>, <body>, etc. Quickly, having to repeat the patterns of typing all those manually become somewhat tedious, and you want to find the solution to simply not having to repeat those manually, every time you create a new page for your website. That's where Snippets come in. By using a functionality that simply include the code at your whim, you tend to use less time having to set up the basic structure of code, which simply allows you to save your time and let you work towards your goal from the get-go.

How to use it?

I am currently writing this in context of using Visual Studio Code by Microsoft, since it seems to be the most convenient and advanced form of IDE currently. To enable the functionality of Snippets in VSC, we first have to download the extension called Snippet Generator by the user called fiore.

I will use part of what I am currently working on as an example, in an effort to showcase the usage of the extension we have downloaded. To give you context, as part of the project, I am currently creating the frontend of the bookshop project that I have been working on for some time, using TypeScript and React. In React, there is a thing called a component, which is basically a piece of reusable code that may be used throughout a project. To create a component, you tend to repeat the same process: You first have to create a function, import the same libraries, etc. Like I said, it starts feeling really tedious and annoying. I will show you in an example below, alongside how to register and use snippets.

Regardless of the nature of the language and the project you are working on, as long as you feel like you tend to repeat a lot of the same code over and over again, throughout your experience as a developer, it's going to come very useful.

import styled from "styled-components";
import { useForm } from "react-hook-form";
import InputText from "../components/common/InputText";
import useAuth from "../hooks/useAuth";


const Login = () => {
  const { userLogin, error } = useAuth();
  const { handleSubmit, register } = useForm<LoginFormProps>();

  return (
    <LoginStyle>
        <form onSubmit={handleSubmit(userLogin)}>
            <InputText placeholder="Email" inputType="text" {...register("email")} />
            <InputText placeholder="Password" inputType="password" {...register("password")} />
            <button type="submit">Login</button>
        </form>
        {error && <p>{error}</p>}
    </LoginStyle>
  );
};


const LoginStyle = styled.div`
  padding: ${props => props.theme.layout.medium.padding};
  background-color: ${props => props.theme.color.background};
  border-radius: 0.25rem;
`;

export default Login;

Above is a file for containing the component called Login, which is rendered and displayed on the screen, when a user decides to log in to the website. Some of the notable lines in the code block includes the followings:

import styled from "styled-components";
- styled is used in every page component. Definitely a part worth being a part of the snippet.
const Login
- You may replace the word Login, with any name that you would like to call your component with. Regardless of whatever page component you create, you always have to name a component, so it is something that gets repeated every time.
const LoginStyle
- This is also a bit of code that gets used for every page component. Just with the example above replacing the name of the component, we may replace the substring Login with the same name that the component is named after, so it is definitely worth making this part of the snippet for creating a page component.
export default Login;
- Lastly, using the component Login in other files requires it being exported. This line gets used in every page component, and should be a part of the snippet. Just with the variable LoginStyle, this contains the name of the component, so you know what to do.

Identifying bits of lines that may be incorporated and used in other files that contain a page component, we end up with the following code block:

import styled from "styled-components";

const Login = () => {
  return (
    <LoginStyle>

    </LoginStyle>
  );
};

const LoginStyle = styled.div``;

export default Login;

Okay, so let's get to turning the code above into the snippet!

1. Replace the name of the component

Before we turn those into a snippet that we would like to use over and over again, we have to prep them into being used as one. Like I said, in order to reuse the bits of code above, all we have to do is to replace the name of the component, which in this case is Login, with its respective name. Replace its name with $1

import styled from "styled-components";

const $1 = () => {
  return (
    <$1Style>

    </$1Style>
  );
};

const $1Style = styled.div``;

export default $1;

As you can see, I have replaced the substring Login with the substring $1.

2. Highlight, Right-click them, and choose an option for creating a snippet

If you have installed the extension I mentioned at the beginning, once you right-click the highlighted section of the code, you should see the option called Generate snippet in the options.

3. Choose the programming language

What programming language is the code based on? If you are writing a snippet for C language, then choose C. Since I am trying to use this snippet to automate the initial process of creating a page component, I will choose the option typescriptreact.

4. Name a snippet

Name it how you like!

5. Choose the prefix

The prefix is basically used to generate the snippet in your code. The naming convention seems to be that it should always start with the underscore character, for the fact that it may be more distinct and may not be confused with other items in the autocompletion feature that VSC provides us with.

6. (Optional) Provide a description

Maybe you would like to explain to yourself what it is used for, for future references. This step is completely optional, so you may skip this step by simply pressing the ENTER on your keyboard!

7. Let's use this

Typing the prefix of the snippet that I just created, I get prompted with the following autocomplete. By pressing ENTER, I end up with the following snippet of code, with which I can start working on making a new page component right away!