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 snippetsback to menu ↑
Use built-in snippets of code
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.
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.
2. Find the right scope
You will need four things to add your custom snippet:
- The name of the scope
- The name of the clip
- The prefix that will act as the handle of the fragment
- 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.
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
- 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 aback 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 ‘: “” “