How can I do this?


#1

Hello, I am new to using atom and coming from a lifetime of notepad++ usage so I am dealing with a slight learning curve here. I am trying to build out some of my usual snippets that I normally use daily in notepad++. Unfortunately I an having some issues with getting it to work properly and continue to receive error after error upon saving the snippets file. I have read thru issue after issue and have been able to resolve many issues myself (and learn a whole lot too) but this one is a real head stumper. I and trying to add a few bootstrap snippets and it seems that the use of container and row are causing me problems. I wrote these 2 items like this

‘.text.html’:
‘BS Container’:
‘prefix’: ‘con’
‘body’: “

$1

‘description’: ‘Bootstrap Container.’
‘descriptionMoreURL’: ‘getbootstrap.com/docs/4.1/layout/overview/
‘Bs Row’:
‘prefix’: ‘row’
‘body’: “
$1

‘description’: ‘BS Row.’
‘descriptionMoreURL’: ‘getbootstrap.com/docs/4.1/layout/overview/
‘.text.html.php’:
‘Get Template Parts’:
‘prefix’: ‘gtp’
‘body’: “<?php get_template_part('template-parts/$1') ?>”
‘description’: ‘Adds Get Template Part - WordPress Theme.’
‘descriptionMoreURL’: ‘developer.wordpress/reference/functions/get_template_part/’

And I am getting this error.

Failed to load snippets from ‘C:\Users\beastmonsterhogcritter.atom\snippets.cson’
C:\Users\beastmonsterhogcritter.atom\snippets.cson: unexpected identifier

I dont believe that the snippets json can handle running these classes “Container” and Row or just the fact that I need to use the (" ") inside the body as they might be reserved language for other things within the environment maybe?
Can any one lend a hand and let me know if I need some form of encapsulation or other funky do dad to make this work?

I know I can use Emmet for a lot of the bootstrap stuff but my left hand is tired of reaching for tab with my pinky and this way I can simply use enter to expand. Any ideas?

Also, In notepad++ I can simply highlight text and hit my desired snippet and it will wrap it up or encapsulate it without deleting my highlighted text. so if I highlight lets say ( Hello ) and click my H1 snip it becomes (

Hello

) Is there a way to do this with snippets and emmet? I have tried but it always deletes the text and replaces it with the snippet. Any thoughts?

#2

wow, reading back thru this, I guess I didn’t see the code markup in the wysiwyg editor and it turned out looking all messed up and stuff. Sorry about that. It wont let me edit it. lol. Ugh!


#4

You can’t edit it because you’re a new user. You’ll get that ability after a certain number of posts. You should repost your snippets properly formatted, though, because it’s impossible for us to tell you anything without seeing the literal text of the file (and indentation is hugely important in CSON).


#5

right. here we go one moire time, lol. So my file looks like this.

'.text.html':
  'BS Container':
    'prefix': 'con'
    'body': "<div class="container">$1</div>"
    'description': 'Bootstrap Container.'
    'descriptionMoreURL': 'https://getbootstrap.com/docs/4.1/layout/overview/'
  'Bs Row':
    'prefix': 'row'
    'body': "<div class="row">$1</div>"
    'description': 'BS Row.'
    'descriptionMoreURL': 'https://getbootstrap.com/docs/4.1/layout/overview/'


'.text.html.php':
  'Get Template Parts':
    'prefix': 'gtp'
    'body': "<?php get_template_part('template-parts/$1') ?>"
    'description': 'Adds Get Template Part - WordPress Theme.'
    'descriptionMoreURL': 'https://developer.wordpress.org/reference/functions/get_template_part/'

#6

It looks like I am getting the errors on the div classes “container” and “row”


#7

Because you have unescaped double quotes on the tags to be inserted and are using double quotes for the CSON on those lines as well. You can tell the interpreter to ignore special characters by escaping them like \".


#8

well with that reply ( thank you so very much DamnedScholar ) I have rewritten the line as such and it works.

'body': """<div class="container">$1</div>"""

I had read that the triples were only needed for lengthy bits but I guess it works for short snips with the double quotes included as well.


#9

Also, one more thing, In notepad++ I can simply highlight text and hit my desired snippet and it will wrap it up or encapsulate it without deleting my highlighted text. so if I left click and drag or " highlight" lets say the word ( Hello ) and click my H1 tag snip it automatically becomes…
<h1>hello</h1>
Is there a way to do this with snippets or with Emmet? I have tried but it always deletes the text and replaces it with the snippet. Any thoughts?


#10

I don’t think either package gives you that ability, but if you can create a command yourself in init.coffee.

# Wrap matched text with other text.
atom.commands.add 'atom-text-editor', 'user:wrap-tags', -> # Defines a command to work within the TextEditor.
  return unless editor = atom.workspace.getActiveTextEditor() # Get the active editor object and also return immediately if something goes wrong and there's no active text editor.

  prefix = "<>"
  suffix = "</>"

  for selection in editor.getSelections()
    selection.insertText(prefix + selection.getText() + suffix, {select: true})
    range = selection.getBufferRange()
    selection.destroy()
    editor.addCursorAtBufferPosition(range['start']).moveRight(1)
    editor.addCursorAtBufferPosition(range['end']).moveLeft(1)

That command will take every selection you have (note that all cursors include a zero-length selection) and add the tag brackets, then generate two cursors at the start and end tags. When you have multiple cursors, you can type and the text will appear in all of them simultaneously, so if you want to make a bunch of different text items into the same tag, you can do them all at once.