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
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.
Add your custom code snippets
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.
You will need four things to add your custom snippet: 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 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. 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’: ‘
‘ This sample snippet adds a
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. 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 ‘: “” “ 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’: “” “ 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.
How to Add/Remove Custom Code Snippets in Atom: benefits
Faq
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.
