VS Code Tooling

[00:00:00]
>> This is all just tooling. Are these tools gonna be around in ten years? I have no idea. Are they super, super conventional right now and for the last few years and for hopefully [LAUGH] several years at least to come? Yes, question.
>> So edlint--fix fixes syntax errors and things, and then Prettier fixes spacing, tabs, etc.

[00:00:27]
>> Bingo, so Prettier is, again, the name is sort of a good reminder that it's about making the style of your code. For example, indentation, semicolons or not, spaces around those brackets, what have you? Double quotes, single quotes, all that kinda stuff, making your style both consistent internally.

[00:00:55]
And because we saved the exact version consistent within everybody in a project and that doesn't matter when it's just me hacking away on my own little toy selfie cam. But when I'm working with other people, whether on an open source project and they're just other friendly strangers on the interwebs.

[00:01:13]
Or whether it's my coworkers and we're all working in a code base together, having that enforcement of everybody has the same opinion on semicolons is very useful. So that people aren't constantly overwriting each other's changes in a very trivial way when we don't have, let's say, a Git commit that says you changed a thousand lines of code because you added semicolons to them or what have you, so that is what Prettier is for.

[00:01:40]
But ESLint s going to know a lot more about things, for example, having an unused const variable stylistically might look beautiful. But in terms of the actual functionality and the keeping our code base as kind of a lean and fit as possible, that is not a formatting problem.

[00:02:08]
That's a sort of a higher level problem of how we want our code base to be polished, if you will. So this is the idea is that these days, and it is possible to use ESLint for formatting, editing, and it is also possible to combine them in all bunches of weird ways.

[00:02:30]
And there's a whole bunch of different ways that over the years this has evolved. But for now, the kind of best practice is to use Prettier for formatting, and ESLint for syntax, and any other types of errors that are gonna make our code base a little bit more clean and a little bit less likely to give us a headache at [LAUGH] runtime.

[00:02:55]
Okay, so back to our VS Code magic, what can VS Code do? A lot of stuff. So yeah, again there's a whole on Frontend Masters course about VS Code. But suffice it to say, and it perhaps is no surprise given that Github and VS Code are both Microsoft situations, the git version control and Github integrations are already out of the box part of VS Code.

[00:03:23]
There is a Source Control tab in VS Code. So if I go to my tabs over here, I'm used to using this file tab, or I can search for things throughout my repo. And then there's this one here that looks like the kind of Git logo a little bit, and that is where, well, I guess I haven't initialized one in this, but let's look at one where I have, no, not this one, okay.

[00:03:46]
[LAUGH] All right, and if you've got some changes, spoilers, spoilers, spoilers, okay, so maybe I don't know, I have a new, I have a new or a fewer commands. Comma, no, [LAUGH] okay, so once I have changes that my Git repository doesn't know about yet, I can also instead of doing the Git commands at the command line, I can also type in my commit message and commit them here.

[00:04:24]
So if you're a little bit more comfortable using this kind of interface to manage your git ads and your Git commits and things like that, go for it. Personally, I guess I got used to it before VS Code swept the world [LAUGH] and so I don't use this tab so much, so I don't know all of its bells and whistles, but totally legit.

[00:04:49]
It is just basically an interface to be doing those commands for you. And it's also possible to integrate your VS Code with your Github account. So there's a link In the slides and VS Code will helpfully suggest. I believe that you do all of this for you. So have at it, I personally don't, but go for it if that is your vibe.

[00:05:17]
So you don't have to do anything special if you have VS Code to get Git and Github integrated. But there's also in our handy-dandy panel here, I'm a little too zoomed in for you to see. But there's also Extensions panel here where we can look for, my goodness.

[00:05:43]
Okay, we can look for a particular extension like ESLint, and there's a million keyboard shortcuts for VS Code, but I haven't taken the time to learn them all. I only have a few. [LAUGH] Go take that course about VS Code to probably learn a lot more dips and tricks.

[00:05:57]
Anyway, so we can search for extensions in the Extensions tab and we can find extensions for things like ESLint, and for Prettier, and we can install them. And these are like, we'll have to set that up. And then we can also configure them to say, for example, hey, ESLint, use whatever ESLint config I have in this project.

[00:06:20]
So I can go to this settings here, Extension settings, yes. And then I can tweak things, I can tell it where to find config files, I can tell it what type of config we're using, cuz there's currently a migration in process of ESLint config syntax, just to spice up our lives.

[00:06:41]
Anyway, the settings for all of these extensions are, again, just like as many settings as there might be command line flags, and options, and things like that. So we're not gonna cover all of that, but suffice it to say, you can also set your VS Code up so that when you press Ctrl+S or Cmd+S, Prettier automatically reformats your code, let's say.

[00:07:06]
And so that when you type in an error, ESLint squiggles a little red line under it to tell you that there is a problem. And so that is what we have been seeing when I do things like nonsense. When I hover over that squiggle, I'll see that ESLint and ESLint's rule called no undefined variables,which is a very helpful thing to have in your project, is saying nonsense is not defined.

[00:07:38]
And this is how I can even before I have to go to the command and run npm run lint and all this stuff, I can make sure as I type that things are in order. Okay, so that is all the magic that's been happening here. For example, Prettier just said, hey, you got all those useless extra lines at the top of your thing.

[00:08:04]
So when you save, because I have my VS Code setup to format on save, it deletes all those extra spaces for me. So this is all tooling again. [LAUGH] So far, this is basically has nothing to do with JavaScript except that these are very, very conventional tools in our community.

[00:08:29]
[LAUGH]