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

6.2 Command Line Workflow

We went over how to install packages inside of Atom, but there's another way we can go about doing that as well, and that's from the command line. We'll also go over a quick little workflow that we can use as well. One way we go about creating an application is we create the folder, and then we start putting all the files we need inside of that folder. You may go about doing this process from the File Explorer. Or we can do this very quickly from the command line. To create the folder we can just say mkdir and we can provide the name of our application. We'll call this one CommandSpeedy. Now we've made the folder but we're not inside of it. So to do that we need to say cd and then CommandSpeedy. Or you can hit Tab, and that'll autocomplete. Now that we're inside of here, we can take a look to see the contents of the folder. And we can do that by saying ls. And we don't get anything back because it's empty. So let's create some files. We know where we wanna index that HTML file, so we'll say touch index.html. Now when we hit ls again, we see index.html. And we want a JavaScript folder, so we'll say mkdir js. And now when we say ls, we see that we have an index.html file, but we also have this JavaScript folder. We also want to create a CSS folder, so we'll say nkdir css, before we execute this command, we know that we're going to want to xs into this folder afterwords, so we can create files inside of it. To do this we can actually say &&, and then cd css. Now we can see from the terminal that we're inside of the css folder. From here we can say touch style.css and then we can cd outs then we can go into the JavaScript folder by saying cd js. And just like before, we can use the && and make a file where we can say cd js and then we can also say touch app.js and then we actually say && cd..and get out. And just to prove that worked, we'll cd into the JavaScript folder. And then we'll do an ls. And we can see that we have app.js right there. So this is a quick little way to create files and folders. And it's a lot faster than going through the GUI editor. And also by using the double ampersand, we don't have to keep returning and executing these commands on separate lines. Now that we have the basis of our application created we want to open this up in Atom. We could go and type Open., and this opens it up inside of the finder. And from here we could go and right click on index.html and we can open that with Atom. That's kind of slow. I have to get out of the terminal and then right-click on something and then choose the right one, and I can set it as the default, but it's still a lot of steps for something that should be really easy. Fortunately there is a command line option for us and all we have to do is type atom. Now when we hit Enter, our project gets opened up inside of Atom. And as we can see these are all the files and folders that we created. One thing that you might find to be very useful from here, is that if you are editing a file and you want to actually get into the instance of the terminal. We know that we can type atom from the terminal to get into Atom, but we don't know how to get from Atom to the terminal. And natively there's nothing provided by Atom. However there is a package we can use that gives us a key binding to jump to the terminal. To install this package, we could go into the package tab inside of the settings. However we're gonna use the Atom package manager within the command line to install this package. If we go to atom.io/packages and do a search for terminal, we'll see a package called atom-terminal. And what this allows us to do is we can open terminals current file directory by hitting Ctrl+Shift+T or we can even open up the terminal's project root directory with Alt+Shift+T. Allows us to easily pop into the terminal right from Atom. To install it from the command line, all we have to do is type apm install atom-terminal. Inside of the terminal we're gonna make sure that our Atom package manager is up to par. So we're gonna hit apm -v. If we don't get an error then we're good to go. Now we can type apm install and we can say atom-terminal. And then once it's done downloading we get the check mark. Now back in atom if we hit Ctrl+Shift+T. We opened up an instance from that directory. Now back in Atom, let's open up app js. If we hit Ctrl+Shift+T, we should get into the JavaScript directory when we get into the terminal. So now I will hit Ctrl+Shift+T and we are inside the JavaScript folder. And if we hit Alt+Shift+T, we should be inside the root. And when the terminal opens up, we're at the root. So by using the terminal we can really speed up our work flow, from the terminal we can easily change directories, we can easily make directories with mkdir, and we also can make files with touch. And by providing the double ampersand, we can chain all of our operations to have them execute on one line. So the next time you go about doing something with the GUI editor, think about how much more quickly you can do it from the command line.

Back to the top