How to work in Sublime Text with Code Snippets

How to work in Sublime Text with Code Snippets

Hello friends today we gonna learn about How to work in Sublime Text with Code Snippets. So read this article, How to work in Sublime Text with Code Snippets step by step so you may understand it in a better way. If you have query related to same article you may contact us. So Lets begin:

Guide: How to work in Sublime Text with Code Snippets

Throughout the coding process, developers (myself included) tend to rewrite or reuse the same bits of code over and over again. One way to eliminate this repetitive process is to keep codes we often use around in the form of snippets. This makes them easy to pick up and easy to access.

To make your coding more efficient, Sublime Text (code editor) allows developers to easily add custom code snippets in the editor. In this post we will see how to create, manage and insert code snippets to significantly streamline our workflow in Sublime Text.

Let’s see.

back to menu ↑

Create new clip

To create a new clip, we go to Tools> New Fragment

Sublime Text will then provide the following template to set up the new fragment.

Hey -> source.python ->

We just add the code snippet inside element, for example:

Next, we set the trigger keyword for Sublime Text to automatically complete the fragment. The trigger name should be easy to remember, but it closely matches the snippet. In this example, we’ll set the trigger name with the keyword shadow.

shadow

Finally, we set the range in which this snippet can be added. Since we’ve added CSS3 Box Shadow, we might want to limit the use of this snippet to just a CSS stylesheet.

source.css

At this point we are all set and can save the clip. To make our snippets clear, we will create a new folder specifically for storing CSS. Furthermore, you may want to create more folders to store the other types of codes such as HTML, JavaScripts, PHP, Python, and so on.

One thing should be noted here: the files must be saved in a .sublime snippet extension, otherwise Sublime Text will not recognize it as a fragment.

back to menu ↑

Insert the clip

In the editor, Sublime Text shows the options as we type the trigger keyword. We can insert the snippet by selecting it from the options or by entering the trigger keyword and pressing the Tab key.

Since we have specified the scope to document with CSS syntax, this snippet will not be activated and automatically added in other types of documents as shown below.

back to menu ↑

Tab key and field markers

In addition, there are times when we need to edit certain specifications in the code snippets. Considering the example of our CSS3 box shadow above, we may want to change the color of the shadow, the shadow blur, or the horizontal offset.

Sublime Text also provides the ability to mark specific fields that we want to edit, after inserting the code snippet. These fields can be specified with $ sign followed by {} and the order of the field, as follows.

-webkit-box-shadow: $ {1: 1px} $ {2: 1px} $ {3: 1px} $ {4: 0px} $ {5: rgba (0, 0, 0, 0.5)}; – moz-box-shadow: $ {1: 1px} $ {2: 1px} $ {3: 1px} $ {4: 0px} $ {5: rgba (0, 0, 0, 0.5)}; box-shadow: $ {1: 1px} $ {2: 1px} $ {3: 1px} $ {4: 0px} $ {5: rgba (0, 0, 0, 0.5)};

In the example above, the first marked field would be $ {1: 1px}, and move to the next few fields in the order if we hit the Tab key. The following screenshot shows how the first values ​​of the box-shadow property, including the supplier’s prefixes, are all highlighted together.

Sublime Text has multiple cursors feature, which allows us to select or highlight multiple lines at once and make editing much faster. Then press the to tab highlight and edit the field number $ {2: 1px} and the following order.

back to menu ↑

Install snippet package

You don’t have to do everything alone. There are several packages we can install for almost any type of snippet of code.

Assuming you have Package Manager installed, you can press Shift + Command + P, then go to Package Manager and search for the snippet package.

In the following example, I find that the package for the SASS code snippet is available.

Even the fragment for Code License is also available.

Find and install the code snippets you need and you’re done. You don’t have to memorize the entire trigger keyword for the snippets as Sublime Text shows you the options as you type the codes.

That’s it for now, we hope this little tip can be useful for improving your code writing workflow. Have fun coding!

back to menu ↑

Further sources

For more information on creating and customizing the code snippet, you can go to the next page.

  • Sublime text documentation for excerpts
back to menu ↑

How to work in Sublime Text with Code Snippets: benefits

  • The How to work in Sublime Text with Code Snippets tutorial is free .
  • This guide already helps so many users follow up with interest in a timely manner.
  • The price of the How to work in Sublime Text with Code Snippets guide is free.

back to menu ↑

Faq

Tutorial summary of How to work in Sublime Text with Code Snippets

In this guide, we told you about the How to work in Sublime Text with Code Snippets; please read all steps so that you understand How to work in Sublime Text with Code Snippets in case if you need any assistance from us, then contact us.

How this tutorial helping you?

So in this guide, we discuss the How to work in Sublime Text with Code Snippets, which undoubtedly helps you.

What is actual time in which this method complete?

The time to complete the How to work in Sublime Text with Code Snippets tutorial is 10+ minutes.

What are the supported Device?

PC Laptop or Desktop


back to menu ↑

Final note

I hope you like the guide How to work in Sublime Text with Code Snippets. In case if you have any query regards this article you may ask us. Also, please share your love by sharing this article with your friends.

For our visitors: If you have any queries regards the How to work in Sublime Text with Code Snippets, then please ask us through the comment section below or directly contact us.
Education: This guide or tutorial is just for educational purposes.
Misinformation: If you want to correct any misinformation about the guide “How to work in Sublime Text with Code Snippets”, then kindly contact us.
Want to add an alternate method: If anyone wants to add more methods to the guide How to work in Sublime Text with Code Snippets, then kindly contact us.
Our Contact: Kindly use our contact page regards any help. You may also use our social and accounts by following us on Whatsapp, Facebook, and Twitter for your questions. We always love to help you. We answer your questions within 24-48 hours (Weekend off).
Channel: If you want the latest software updates and discussion about any software in your pocket, then here is our Telegram channel.

Compsmag
Logo