Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Lessons:28Length:1.7 hours
Speedy workflows with atom.io
  • Overview
  • Transcript

2.2 Settings and Themes

One of the best features of Atom is how customizable it is. If we hit command comma, we pull up the settings page. And within out settings, the first tab that we see are the core settings. From here we can change a lot of things such as soft wrapping, as well as font size and font type. If we go down here, we can see that the current font being used is Monaco. But if we type Open Sans, we see that some of the font changes. And if we go back into our editor, we can see that the font is a lot more thin. Now, I'm a big fan of Open Sans in the web, but it's kinda weird seeing it in the context of an editor. So we can go back and we can change this to Monaco. Next we go into Keybindings. We've gone through a couple of Keybindings already. And you can think of this section as your library where all of your keybindings are allocated. You wanna search for one, maybe we can say show- previous. We see a list of commands that show us how to cycle through our previous selections. The first one is Alt-Command Left. So by pressing Alt-Command Left we can cycle through each previous item in the buffer. And if we search for the next, rather than saying show previous, we'll say show next, and we have a similar command in Alt-Command Right. So every time you were wondering if something's possible, this is a really good area to go browse through. The next is packages, but we're gonna skip over that cuz we're gonna go through that in great detail later on in the course. What we will focus on are themes. When we first get to the themes tab, we can see that there are two types of themes, there is a UI theme, as well as a syntax theme. The UI theme is more of the container of the editor, and the syntax is the actual code part. If we switch from Atom Dark to Adam Light, we can see that the editor itself got to a lighter color. And when we cycle back, our code editor still has that dark theme to it. To change that, we'll go from Atom Dark to Atom Light. So now our UI theme and our syntax theme match. And in our editor we have the light theming. And you may not be a fan of either the light or the dark, so we can come down here and we can search for packages. Right here we can see in the featured themes there's Monokai. Monokai is one of the iconic themes within code editors. Currently I have it installed, so if we go to syntax themes and we select Monokai, and if we go back into our editor we can see that Monokai has been applied. And this is actually the default theme for Sublime Texts. One of my personal favorites though is Seti, and that's S-E-T-I. And after the search comes up there's Seti UI, Seti Syntax as well as Monokai Seti. And currently I have all three of those installed. So if I come up here I can change this, the UI theme to Seti. And the first thing you might've noticed about Seti, is not only did the editor itself get dark, we actually got new icons for our file types. In the upper left, you can see a JavaScript file for another JS, and below we see those code brackets for the HTML file. And I find those to be rather helpful, because when you're looking through a really big file, being able to see a little icon that catches your eye, is a lot better than having to parse through the little extensions. And for syntax theme, rather than Monokai, we're gonna choose Monokai Setti. So now when we go back into the editor, we have a Monokai ish theme that works with Setti. And one of the really cool things about the custom icons in Setti, is not only is it for the file types that you'd expect, such as HTML and JavaScript, it also works for things such as Bower or Grunt. In this new file, if we save it as a bower.json, we'll see a custom icon for Bower. And there's the little Bower bird icon that shows up in our tree view. And the same way would work for Grunt. Within the grunt file we see the grunt boar. And this will even work for Gulp as well. Now that we have some of the basics down, such as changing themes, and cycling through files in our buffer, we'll go through learning how to navigate through files in an entire application. Sifting through the tree view can take up a lot of time, so in the next lesson we'll learn how to quickly locate and find files.

Back to the top