How to Install Atom and Prettier

ACCESS the FULL COURSE here: https://academy.zenva.com/product/full-stack-web-development-mini-degree/?zva_src=youtube-fullstackmd

TRANSCRIPT

In this video we are going to go over installing Atom. Which is a very popular text editor. And we are also going to install Prettier, which is a plugin for Atom that allows us to automatically format our code whenever we save. To install Atom, go ahead open up your web browser and go to atom.io. And since I'm using a Mac, I get the Download for Mac button. If you're using Windows, you'll probably see the Download for Windows button. Go ahead and click that button and it will download a zip file. Since I already have Atom installed, I will not be doing that. Once the zip file is downloaded, go ahead and extract the application to whatever directory you want.

Since I'm on a Mac, I put all of my applications inside the Applications directory. Which is right here. And you can go ahead and double click on Atom to open it up. I already actually have it open, let me quit it. So I can show you exactly how it looks when it first starts up. It'll bounce up and down for a little bit. And you'll be taken straight to the Welcome Guide. I like having the Welcome Guide open because sometimes I forget what happens. What you're going to want to do first is I'm gonna show you how to install a nice little package that I like using. It's called Prettier. So click on the Install a Package button from the Welcome Guide. And click on Open Installer.

Alternatively, you can go to the Atom preferences. You can click up here, on Preferences, and click on the Install button at the way bottom, the little plus sign. We're gonna install a package called Prettier. That's P-R-E-T-T-I-E-R. Prettier, hit enter to execute the search. And it's gonna look. Let me get this out of the way. And what you'll want is to download Prettier hyphen Atom. Now I already have it installed so I don't have the Install button, but you'll want to click on the blue Install button. And make sure it's Prettier hyphen Atom, and not Prettier ESLint or Prettier Standard Formatter. This one's the official plugin. And let's click on Settings. I'm gonna go over the settings that I have, and you are free to disagree with these. These are purely opinionated settings. I just don't you to be weirded out when you see my code looking like a certain way and you wonder why that is. So what we're gonna do is scroll down to Options, and there's a lot of different settings. You can ignore all these, I left them as default. Scroll all the way down to Prettier Options.

Okay, and the settings I have are simple. I have single quotes enabled. Bracket spacing enabled, semicolons disabled. Use tabs disabled, JSX disabled as well. It's okay if you don't know what all of these mean, I' ... https://www.youtube.com/watch?v=r8IxsPAqXnw