Well for example with our extension. For that, again hit command shift P or a control shift P to open
this command panel, type ESLint and choose create ESLint configuration.
Now you get a couple of options down there in the terminal and you can choose how you want to use
ESLint,
if you want to check the syntax or if you want to check the syntax and also find problems or if you
want to do that and also enforce a specific code style, so you can basically choose how strict you want
to be there.
Now I'll go for the last option there and now you have to choose if you're using modules and how you're
using them and we're using the default Javascript modules import export syntax,
we can ignore the other option for now.
We're also asked if we're using any specific framework and we are not,
so we can choose none of these here,
if we're using Typescript the answer is no
so we can just enter an n here and hit enter. Where our code runs, it runs in the browser so we select this
option, hit space and hit enter and then we can also choose if we want to use a popular style guide as
a preset,
so basically a code style guide defined and developed by other people. If you want to answer a couple of questions
about our style to create our own guide or if our file should be inspected so that a style guide is
generated.
Now I'll try this last option here and I want to have a look at assets/scripts/app.js, scripts app.js.
Hit enter,
we can then choose which kind of config file should be generated,
I want to get a JSON config file and after all of that, you should get such a eslintrc.json
file. Again of course, you can read all about how you can configure it and use that in the
official documentation which you find on npmjs and in the resources linked to from that page.
If we look into this file, we see this is the configuration that was assumed,
it basically has a couple of rules set up now and here,
the rules part is indeed the most interesting thing. You see there are a lot of rules here,
basically a lot of things you can check for. Now
for example, in there, if we search for quotes, we see that for quotes it accepts single quotes.
Now this means that if I go into my app.js file and I would use double quotes here which is not a
technical error, it would not like that.
Now how can we see that it doesn't like that?
Well, simply reload your project, so close Visual Studio Code and reopen it and ESLint should kick in
and here it's telling me that strings must use single quote. Of course, again it's not a technically error
it like this but we're basically not following our own style guide,
so therefore I'll change this to be consistent again.
It's also complaining about global this which is not defined, no undefined variables must be used.
Now here we of course know that global this is actually a reserveed word which is available. We can
click on quick fix for this and actually disable this specific rule for this line,
this comment here is then added automatically and it tells ESLint please ignore this line here or ignore
this specific rule for this line here to be precise.
Now we can also dive into our other files and here for example we see that we got an unexpected blank
line after a variable declaration.
If we click on quick fix here, we see a lot of potential fixes,
for example if I click on the first one, you see that line thereafter simply was removed.
Now of course if you're not happy with that rule to exist in the first place, you can search the specific
error it's pointing at,
in this case the new line after var rule and go into your eslintrc file and search for a new line
after var here and change this rule, for example to change this to always.
If you do that, this specific rule is gone because now we actually force a new line after every variable
definition, hence now in app.js I actually have an error here because I now don't have a new line here.
So let me fix this here to always have a new line
after we define a constant or a variable. Here it's now complaining about some trailing spaces
and therefore we can of course also get rid of that,
so here we can also click on quick fix and fix this problem. Now in analytics.js,
we got more issues, for example console log is not allowed because during production, it doesn't add much.
Now here I actually do want to allow it,
so I'll go back to eslintrc, search for no console and instead of having error here, I'll set this
to off
which means this rule is disabled,
we're now allowed to do that.
Here I get an error that I got a missing semicolon,
pretty good to have
so let's add one and here, it's complaining about some magic number thing. Now it might not be clear what
this means and therefore you can always click on quick fix, show documentation for no magic numbers and
we can then open that link and on a new page, it leads you to the official documentation that essentially
tells you that numbers like this are not allowed,
it would be better to store them into a constant timer time and then use that here instead like this.
Here, we now also got an error that a new line is required,
we can simply add a quick fix here and here it's also complaining about a new line it wants.
Well actually here, I don't want this, so I'll go to my function call argument new line rule here,
copy that,
go to eslintrc, search in that file for that and change error to control space, let's see our options,
to off to disable that rule and with that we fixed this file. Now we can do this for all these files and as you
see, there are a lot of issues.
Now what you might want to do is again type ESLint in the command prompt and fix all auto fixable
problems but even with that, you'll see we got a bunch of errors because there are different rules which
simply don't like a certain style.
Now let me make clear here that this does not mean that our code is bad,
these are just some defaults which are set up here which are simply not finetuned to your specific
requirements.
We would have to go through all or most of these rules and instead of setting them all to be error
here, find sensitive defaults to see what we want allow and what we don't want allow.
Now it's not something I want to do here because it's simply a task you have to do for your own,
you have to find your specific code style and therefore what I will do is I will remove all these rules,
except for quotes
so that we force single quote strings and simply get rid of all these rules.
So mark all these rules here, delete them, also after this quotes rule so that I have way less rules now
and if we do that of course, we fix all these problems because we now have no ESLint rules there.
Again you might want to tweak this to your requirements but you typically don't want to add all potential
rules and set all of them to error but add a couple of rules here which are important to you, like
enforcing single code strings, like enforcing a semicolon and you can always add a new rule here with
a comma, then double quotes and then the rule name, you get auto completion here as well and you can check
out the official ESLint docs, for example here if I search for semi and set this rule, I can set this
to error and now we would get an error if we don't use a semicolon. So that's how you can manage your
rules here,
again official quotes and auto completion here are your friend
and with that you can retailor your own code style and enforce it across your entire project.
So that was linting with ESLint and the vscode extension,
now let's move on to bundling where we don't work on our code quality but instead really on the code
we output so that we don't output multiple files where we need multiple requests but instead we bundle
our code together.