Snippets allow you to write a keyword and then expand it into a predefined piece of code. Here are some of my favorite Atom snippets, in sixty seconds!
Scope List From the Video
- HTML: .text.html.basic
- CSS: .source.css
- Sass: .source.sass
- JavaScript: .source.js
- JSON: .source.json
- PHP: .text.html.php
- Java: .source.java
- Ruby: .text.html.erb
- Python: .source.python
- Plain text (including markdown): .text.plain
Learn More Atom
There’s plenty more about Atom on Envato Tuts+, dig in!
- How to Create a Custom Theme for Atom
- Atom in 60 Seconds: 3 Must-Have Plugins
- Atom in 60 Seconds: 3 Beautiful Themes
- 25 Syntax Highlighters: Tried and Tested
- Web Design Basics: Choosing a Text Editor Free Course
60 seconds?!
This is part of a series of quick video tutorials on Envato Tuts+ web design. We’re aiming to introduce a range of subjects, all in 60 seconds–just enough to whet your appetite. Let us know in the comments what you thought of this video and what else you’d like to see explained in 60 seconds!
Subtitles/CC
Here you’ll find the content of the “captions.sbv” file, which we can use to add subtitles to the screencast. Turn subtitles on by clicking the Subtitles/CC button on the player–click the settings gear icon to select the language:
Clik here to view.
0:00:00.000,0:00:04.170
Snippets allow you to write a keyword
and then expand it into a predefined
0:00:04.170,0:00:10.170
piece of code. For example, here's a
snippet that works in HTML files. And
0:00:10.170,0:00:15.690
here's one that only works in JavaScript
files. Snippets can contain as much text
0:00:15.690,0:00:18.600
as you want and creating one is really
simple.
0:00:18.600,0:00:24.539
First go to Atom > Snippets. Then you need
to define your scope or the file types
0:00:24.539,0:00:28.619
in which the snippet will be available.
You can find a scope list in the video
0:00:28.619,0:00:29.580
notes.
0:00:29.580,0:00:34.739
let's define our scope as HTML. Next you
give it a name and then a trigger
0:00:34.739,0:00:37.649
keyword followed by the snippet itself.
0:00:37.649,0:00:43.260
You can add placeholders as the dollar
sign, followed by a number. If the body
0:00:43.260,0:00:46.920
text has more than one line use triple
quotes for separation.
0:00:47.460,0:00:53.100
Once done save and type the keyword in
an HTML file. The snippet will expand and
0:00:53.100,0:00:56.520
you can tab through the placeholders you
created.
0:00:56.520,0:00:59.370
That's it for snippets, I'm Adi Purdila,
thanks for watching.
Clik here to view.
Image may be NSFW.Clik here to view.
Clik here to view.