Set up ESLint and Prettier - JavaScript教程

- [Presenter] Code linters and code formatters help us write better code. And for this reason, they've become standard features in most JavaScript projects. In this code space we're working with I've already set up and configured a code linter, ESLint, and a code formatter, Prettier. And as you've followed along, you've likely seen them both working in the background even if you weren't fully aware of what was happening. Now I want to show you how to wire this all up on your own so that the next time you start a new project or find one that doesn't use these tools, you know how to take full advantage of them. But first, let me briefly show you what they do. You'll remember earlier in the course, I tried to call in this property here inside my code Created_at. And when I did, I got the squiggly red underline. Hovering over the squiggly red underline, I get this message, "Identifier 'Created_at' is not a camel case" and not in camel case. And then it says, "eslint camelcase." This is a code linter. The code linter holds up my code against a set of predefined standards to see if I'm meeting those standards. And if I don't, it'll give me either a warning or an alert saying, "Hey, you need to change the code in this particular way to meet my standard." Why is that important? Imagine you're working on a team. You have many different developers who are working on the same code at the same time. In that circumstance, it's vital that everyone is following the same standards, so that the code isn't written in a bunch of different ways. And that's what EsLint can do. You can apply a set of standards to the code, and then everyone has to conform to that set of standards. Now the standard can be specified per project. You can adopt an existing standard, or you can make your own standard, or you can adopt an existing standard, and then customize it for your own needs. And you'll notice, as you bring in different JavaScript projects, they'll have different ESLint configurations depending on the project. The cool thing about ESLint is once it flags an error it can sometimes also fix the error for you. Now, in this particular circumstance it can't, because it needs to fix a bunch of different things, but in many cases, simply clicking quick fix will actually fix the issue for you. So that's the code linter. It checks your code against a set of standards. What about the code formatter? Well, when I write my code, I often wanted to conform to a specific format, like indentation when lines should break, things like that. A code formatter can be set up to do all of this automatically against the standard. The most common formatter to use is this one, Prettier, the opinionated code formatter. And when you set up prettier, it'll automatically start applying formatting to your code when you save it. So for instance, here I have a list of properties and when I save this file, they automatically get broken down into a vertical list so they're easier to read. That's the code formatter doing its job. So how does this work inside our code space and in VS code? It all starts with extensions. For every major code formatter and every major code linter there is a VS code extension and VS code extensions work inside code spaces because Codespaces is VS code. So here you see as you get started we already have ESLint installed, Prettier installed, and also Stylelint, a code lint for CSS. Now we're not using Stylelint in this course but you can extend the course to use Stylelint if you want to. However, none of these extensions work until you specify which standards you wanted to use. That's done using NPM. So if you scroll all the way to the bottom of the project you'll find package.json. And here you'll see we first bring in eslint, then eslint config standard. That's the standard configuration. Then eslint config prettier, which is an extension of the standard configuration that allows Prettier and standard to work together. And then some other stuff just to make everything work. This is all then configured in this file called Eslint RC. Eslint RC instructs ESLint on how to operate. And here we're setting up an environment. We are working with browser code. We're following the ESLint 2021 standard and we are using first, the standard rules, and then extending them with the Prettier rules so that standard and Prettier can work together. If you don't do this, there's a risk that Prettier might override the standards and you'll have constant conflicts. You can actually read more about that by going to the Prettier page for integrating with linters. It explains to you how to set up both ESLint config and Styelint config for Prettier. And you can download the extensions off GitHub if you want to. So you have the packages installed, you have ESLint RC for the configuration. And there's one more step you need to do. Go to the cogwheel down here, go to settings go to workspace, type in formatter. And here you'll see under default formatter I've set it to Prettier code formatter. This is not a default setting. You have to do this manually and you'll have to do it in all your projects. Now again, it's already done in the code space but if you're working on a different project you need to do this manually. This just tells Prettier you are the formatter. So format the code. You'll also notice below here, you can have format on paste, format on save, and a bunch of other settings. And these can be set on a workspace basis. This is what causes the code to format every time we save it. And this is what makes everything work. So by following these steps and putting these pieces together in the way I just showed you you get ESLint and prettier to work together to not only check your code against the standard but also format the code to that standard.