How to Add/Remove Custom Code Snippets in Atom

All built-in snippets

Hello friends today we gonna learn about How to Add/Remove Custom Code Snippets in Atom. So read this article, How to Add/Remove Custom Code Snippets in Atom 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 Add/Remove Custom Code Snippets in Atom

That is no coincidence Atom, the source code editor created by Github is popular in the web development community. It is not alone easily expandable with thousands of Atom packages, and has one wide language support, but almost every part is adaptable by the user.

By using Atom’s Fragments featureyou can make your coding workflow more productive, for example by reuse of recurring code snippets you can reduce the repetitive part of your work. In this post, I’ll show you how use Atom’s built-in code snippets, and create your own custom snippets

back to menu ↑

Use built-in snippets of code

Atom comes standard with built-in code snippets, which are each bound to a scope belonging to a certain file type. For example, if you are working on a file with a .js extension, only snippets that belong to the JavaScript scope are available for that file.

See all available clips for your current file type, press Alt + Shift + S. If you choose a snippet from the drop-down list and click it, Atom will insert the entire snippet into your editor without further hassle.

If you already know the options, you don’t necessarily have to load the entire list. When you start typing, Atom releases a autocomplete results box up, which contains the available snippets of code that belong to the particular range and the string you’ve typed so far.

For example, if you type the h character in a .html file, a drop-down list appears listing all built-in HTML snippets starting with h.

By clicking an option, Atom will do that paste the entire HTML tag (e.g.

), and place the cursor within the start and end tag

If you don’t want to bother with the drop-down list, you can achieve the same result by typing h1 and pressing Tab or Enter – both keys insert the entire code snippet associated with the prefix of the fragment.

Built-in HTML code snippets

back to menu ↑

Add your custom code snippets

1. Locate the configuration file

To add your own custom code snippets to Atom, you must first download the configuration file named snippets.cson that’s one CoffeeScript object format File.

Click the File> Snippets… menu in the top bar, and Atom will open the snippets.cson file to which you can add your own custom snippets.

Snippets configuration file

2. Find the right scope

You will need four things to add your custom snippet:

  1. The name of the scope
  2. The name of the clip
  3. The prefix that will act as the handle of the fragment
  4. The body of the fragment

The name, prefix and body of the snippet (2-4) depend only on you, but you have to find the name of the range (1) before adding your custom snippets.

To find the range you need, click the File> Settings menu in the top menu bar and find the Packages tab under Settings. Do a search here for the range you need. For example, to add snippets of code to the HTML language, type HTML in the search bar.

Click on the language support package of the chosen language and open its own settings. Below the Grammar Settings, you can quickly find the scope name as you can see from the screenshot below.

Language range

Here are some scopes you may want to use in your Atom projects:

  • Plain text: .text.plain
  • HTML: .text.html.basic
  • CSS: .source.css
  • Sass: .source.sass
  • LESS: .source.css.less
  • JavaScript: .source.js
  • PHP: .text.html.php
  • Python: .source.python
  • Java: .source.java

Do not forget that this is necessary add a period (.) before the range name to use it in the snippets.cson file.

3. Create single-line code snippets

To a one-line code snippet, you need to add the range, name, prefix, and body of the snippet to the snippets.cson file using the following syntax:

‘.text.html.basic’: ‘Widget title’: ‘prefix’: ‘wti”body’: ‘

back to menu ↑

This sample snippet adds a

back to menu ↑

tag containing the widget title class to the HTML range. You can add any other single line snippet of code to your Atom editor according to this syntax. After saving the configuration file, whenever you want type the prefix and press the Tab key, Atom will paste the corresponding snippet into your code editor. The name of the clip (in the example Widget Title) is displayed in the autocomplete results box. 4. Create multi-line code snippets Code snippets with multiple lines use a slightly different syntax. You must add the same information as for single-line snippets: the range, name, prefix, and body of the snippet. What’s different here is that you have to place the body of the clip within a pair of “” “(three double quotes) ‘.text.html.basic’: ‘Image link’: ‘Prefix’: ‘iml”body’: “” “ “” “ If you want to add more than one modified clips to the same range, add the name of the range only onceand list the snippets one by one: ‘.text.html.basic’: ‘Widget title’: ‘prefix’: ‘wti”body’: ‘

” Image link ‘:’ prefix ‘:’ iml”body ‘: “” “

“” “

5. Add tab stops

You can further facilitate the use of your custom code snippets by tab stops to the body of the clip. Tab stops indicate the places where the user can navigate with the Tab key. Tab stops can help you save the time it takes to navigate in the text.

You can add tab stops using the $ 1, $ 2, $ 3,… syntaxAtom places the cursor where it finds $ 1, then you can jump to $ 2 with the Tab key, then to $ 3, and so on.

‘.text.html.basic’: ‘Image Link’: ‘prefix’: ‘iml”body’: “” “

back to menu ↑

” description ‘:’ You can add a widget title with thissnippet to your sidebar widget. ” descriptionMoreURL ‘:’ http://hongkiat.com ‘

When the user starts typing the prefix wti, the additional information (description + link) will be displayed at the bottom of the autocomplete results window. look at it other optional parameters you can use to add additional information to your custom snippets.

Optional parameters

back to menu ↑

How to Add/Remove Custom Code Snippets in Atom: benefits

  • The How to Add/Remove Custom Code Snippets in Atom tutorial is free .
  • This guide already helps so many users follow up with interest in a timely manner.
  • The price of the How to Add/Remove Custom Code Snippets in Atom guide is free.

back to menu ↑

Faq

Tutorial summary of How to Add/Remove Custom Code Snippets in Atom

In this guide, we told you about the How to Add/Remove Custom Code Snippets in Atom; please read all steps so that you understand How to Add/Remove Custom Code Snippets in Atom 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 Add/Remove Custom Code Snippets in Atom, which undoubtedly helps you.

What is actual time in which this method complete?

The time to complete the How to Add/Remove Custom Code Snippets in Atom 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 Add/Remove Custom Code Snippets in Atom. 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 Add/Remove Custom Code Snippets in Atom, 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 Add/Remove Custom Code Snippets in Atom”, then kindly contact us.
Want to add an alternate method: If anyone wants to add more methods to the guide How to Add/Remove Custom Code Snippets in Atom, 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
Shopping cart