{"id":28067,"date":"2016-09-26T21:01:47","date_gmt":"2016-09-26T13:01:47","guid":{"rendered":"https:\/\/www.hongkiat.com\/blog\/?p=28067"},"modified":"2017-10-31T20:28:48","modified_gmt":"2017-10-31T12:28:48","slug":"add-custom-code-snippets-atom","status":"publish","type":"post","link":"https:\/\/www.hongkiat.com\/blog\/add-custom-code-snippets-atom\/","title":{"rendered":"How to Add Custom Code Snippets to Atom"},"content":{"rendered":"

It\u2019s not a coincidence that Atom<\/a><\/strong>, the source code editor created by Github is popular in the web development community. It\u2019s not only easily extensible<\/strong> with thousands of Atom Packages<\/a>, and has a wide language support<\/strong>, but almost its every part is customizable<\/strong> by the user.<\/p>\n

By leveraging Atom\u2019s Snippets<\/a> feature<\/strong>, you can make your coding workflow more productive, as by reusing recurring code snippets<\/strong> you can reduce the repetitive part of your work. In this post, I\u2019ll show you how you can use Atom\u2019s built-in code snippets<\/strong>, and create your own custom snippets<\/strong>.<\/p>\n

\n\t\t\t\t\tRead Also:<\/strong>\u00a0\n\t\t\t\t\tA Look Into Atom: Github\u2019s New Code Editor<\/a>\n\t\t\t\t<\/p>\n

Use built-in code snippets<\/h2>\n

By default, Atom comes with built-in code snippets<\/strong>, each of which is bound to a scope<\/strong> belonging to a certain file type. For instance, if you are working on a file with .js<\/code> extension, only snippets belonging to the JavaScript scope will be available for that file.<\/p>\n

To see all available snippets<\/strong> for your current file type, hit Alt<\/span>+Shift<\/span>+S<\/span>. If you choose a snippet from the drop-down list and click on it, Atom will insert the full snippet into your editor without any further hassle.<\/p>\n

\"All<\/figure>\n

If you are already aware of the options, you don\u2019t necessarily have to load the whole list. When you start to type, Atom pops an autocomplete results box<\/strong> up, that contains the available code snippets belonging to the certain scope and the string you\u2019ve typed so far.<\/p>\n

For example, if you type the h<\/code> character into a .html<\/code> file, a dropdown list with all built-in HTML snippets beginning with h<\/code> will appear.<\/p>\n

By clicking on any option, Atom will paste the full HTML tag<\/strong> (e.g. <h1><\/h1><\/code>), and position the cursor within the starting and closing tag<\/strong>.<\/p>\n

If you don\u2019t want to bother with the dropdown list, you can achieve the same result by typing h1<\/code>, and hitting Tab<\/span> or Enter<\/span> \u2014 both of these keys insert the full code snippet<\/strong> belonging to the prefix of the snippet.<\/p>\n

\"Built-In<\/figure>\n

\n\t\t\t\t\tRead Also:<\/strong>\u00a0\n\t\t\t\t\t30 Useful Regex Code Snippets for Web Developers<\/a>\n\t\t\t\t<\/p>\n

Adding your custom code snippets<\/h2>\n

1. Find the configuration file<\/h3>\n

To add your own custom code snippets to Atom, first you need to find the configuration file called snippets.cson<\/code><\/strong> that is a CoffeeScript Object Notation<\/a><\/strong> file.<\/p>\n

Click on the File > Snippets...<\/code> menu in the top bar, and Atom will open the snippets.cson<\/code> file to which you can add your own custom snippets.<\/p>\n

\"Snippets<\/figure>\n

2. Find the Right Scope<\/h3>\n

You will need four things<\/strong> in order to add your custom snippet:<\/p>\n

    \n
  1. The name of the scope<\/strong><\/li>\n
  2. The name of the snippet<\/strong><\/li>\n
  3. The prefix<\/strong> that will function as the handle of the snippet<\/li>\n
  4. The body of the snippet<\/strong><\/li>\n<\/ol>\n

    The name, the prefix, and the body of the snippet (2-4) solely depends on you, however you must find the name of the scope<\/strong> (1) before adding your custom snippets.<\/p>\n

    To find the scope you need, click on the File > Settings<\/code> menu in the top menu bar, then find the Packages<\/code> tab among the Settings. Here, run a search for the scope you need, for example if you want to add code snippets to the HTML language, type HTML<\/code> into the search bar.<\/p>\n

    Click on the language support package<\/strong> of the chosen language, and open its own Settings. Among the Grammar settings<\/strong>, you can quickly find the name of the scope, as you can see on the screenshot below.<\/p>\n

    \"Language<\/figure>\n

    Here are some scopes you may want to use in your Atom projects:<\/p>\n