Shortcut "! + Tab"


#1

How can I add an extra line of code so when I type “! + tab” there’s more to it than the default?


#2

It sounds like what you want is to add a snippet.


#5

Would I be able to use that same shortcut and add the

link rel="stylesheet" type="text/css" href="style.css" />

to it?


#6

I don’t see why not. Are you having difficulty doing so?


#8

I haven’t tried yet. I thought it would conflict with the one emmet already has.


#9

The conflict isn’t going to cause an error or anything. One of the two will get higher priority, and I would expect that to be the one you have in snippets.cson.


#10

I can’t seem to get it to work with my own snippet


#11

Please post a screenshot of your snippets.cson file.


#12


#13

Okay, in order to make a multiline body, you need special syntax. It’ll look like this:

'HTML':
  prefix: 'html'
  body: '''
<!DOCTYPE html>
<html>
  <head>
  </head>
</html>
'''

(The keys can be either quoted or unquoted, as long as they’re one word. I find it easier to read when they’re unquoted unless they have to be quoted to work.)


#14

Here is what I done and it still didn’t work. I must be doing something wrong.


#15

The top-level key needs to be the scope where the snippet is going to apply. So you need to add a scope value and indent the following three lines. You have two options:

'*':
  'HTML':
    prefix: 'html'
    body: '''
<!DOCTYPE html>
<html>
  <head>
  </head>
</html>
'''

or

'text.html.basic':
  'HTML':
    prefix: 'html'
    body: '''
<!DOCTYPE html>
<html>
  <head>
  </head>
</html>
'''

The first example will apply to all files, while the second will only work in HTML documents.


#16

I was looking for the scope for the “language-html” and there’s not one. What should I do to add one?


#17

The scope is text.html.basic. You can see it in the settings panel for the language-html package.


#18

I don’t have it. Here is what I’m seeing:


#19

Click on Packages, scroll down to language-html, and click on it.


#20

I found it but I’m not getting it. Is it easier to add a snippet to brackets?


#21

What are you having difficulty with? Are you having trouble with the snippets I gave you?


#22

I tried what is shown in the picture that I posted 14 days again but added the “‘text.html.basic’:” above the HTML and then tried it but it didn’t work. Sorry I can’t add the picture I’m referring to to make it easier for you. I had to take my MacBook Pro to Apple to get worked on because the display was messing up.


#23

Would you still be able to help me?