How Can I see what Triggers a Snippet


#1

IN atom I can use Alt+Shift+s to see possible snippets and use them. But how can I see exactly what I would type in the file to achieve that completion?

So for example I was wanting to insert a HTML comment after a div so Alt+Shift+s and type comment and it inserts but if I am in a file and want to do – Tab or similar how can I see what the in file trigger is or modify the trigger?

As for example – Tab produces <–></–>.


#2

You can always open the snippets file but I understand that you want a convenient method with a keystroke. I’d guess that someone would need to add this feature to https://github.com/atom/snippets. Do you have some spare time to contribute?

Edit: I confirmed that the function you asked about doesn’t exist. I looked at the key binding files for that package at https://github.com/atom/snippets/blob/master/keymaps.


#3

I’m not sure I understand the question exactly. If I type Shift+Alt+S it opens a menu of available snippets:

The first line is the shortcut and the second line is the name of the shortcut. If you type the shortcut and press TAB, that will expand the snippet.

Is there something else you wanted?


#4

Well I didn’t want to have to search for the snippet each time, saving myself many keystrokes.

if for example cmt+TAB created the comment in html then it would be quicker than searching each time.


#5

I don’t need the key maps do I? But I cannot locate the actual snippets.cson file in the repository that has all of the templates to edit.


#6

Let’s say you want to edit some snippets for HTML. Here’s how you go about it.

  • Open Settings pane (CTRL+,).
  • Click on Packages Menu. All installed packages will be listed.
  • In the search field, type html. The language-html package will be listed.
  • Click on the View Code button. Atom will open the language-html package.
  • On the Files Tree, click on Snippets.
  • Now, click on language-html.json file. You can edit this file and modify or add new snippets.

Is this what you wanted? However, modifying core packages is not advisable as updates will overwrite your changes. You can instead, create your own snippets from the ‘Open your Snippets’ menu

Here is an example of two snippets for inserting images from Lorempixel.com and placekitten.com.

'.text.html.basic':
  'Lorem Pixel image':
    'prefix': 'lpix'
    'body': '<img src="http://lorempixel.com/${1:width...}/${2:height...}/${3:Category:abstract,city,people,transport,animals,food,nature,business,nightlife,sports,cats,fashion,technics}" alt="${4:Alt_Text...}" />'

  'Place Kitten image':
    'prefix': 'pkc'
    'body': '<img src="http://placekitten.com/${1:Width}/${2:Height}" alt="${3:Alt_Text}" />'

So, when you’re editing an html markup just type lpix to insert the image tag with image from lorempixel.com. Everytime, you press Tab the cursor will jump to the next edit position (represented by $1, $2 and $3). For your info, each package will have its snippets (if any) under its folder structure.

Hope this helps.


#7

So yes then its very easy to do.

 '.text.html.basic':
  'comment':
    'prefix': 'cmt'
    'body': '<!-- $1 -->'

#8

While your sample is OK, you really do not need your own snippet for an html comment, because just hitting – and tab will give you the above result. I recommend that you look into the language-html snippets to see what’s available so that you do not re-invent.


#9

I think you misunderstood @leedohm. You can discover the keyboard shortcut for the comment from the alt-shift-s menu! Each entry has two rows. The first row is the keyboard shortcut, the second row is a description.

Because the Comment shortcut is listed as follows:

--
Comment

… you know that you can type two dashes (--) followed by tab. Clearer now?

FWIW, I used alt-shift-s and them searched for “com” to find the snippet. The second hit is

col
Column

so I know that I can type col followed by tab to activate this one.


#10

Great editor great community


#11

Well that is my actual question! Where can I find the language-html snippets LIST! to see what’s available. I can’t find it on these new versions of Atom.


#12

In its repository, there is a folder called snippets. They are in there.


#13

when you said “repository and folder called snippets” are you referring to this?


#14

this is unusable…


#15

No, this


#16

Ohh nice, thanks!.. I didn’t know that was public, helps a lot. But at the moment there isn’t a way through an Atom app to see this content?


#17

Yup, everything is public. Everything.

For pure snippets, not beyond the Show available snippets command.

However, if you want to always see what’s going to be completed, and your options, you should consider using the autocomplete-plus package (which is builtin). This is the one that makes a popup menu under the cursor, with all the possible completions for the given prefix you are typing. It will also perform a fuzzy match, so you don’t need to type the exact prefix each time (just something close enough to make the one you want be on top).

Additionally, the autocomplete-snippets package is a provider for autocomplete-plus that takes all the snippets, and displays them in the autocomplete menu.

Finally, if you do this, I recommend customising the settings of autocomplete-plus. I used to go with the default, but eventually got sick of “complete on enter”. Changing it to “complete on tab” was much better, and I could use it just as easily when I got the hang of it.