- [Instructor] Since ESLint requires a configuration,
let's create one.
The ESLint.org website
contains a comprehensive user guide on configuration.
I'll give you the highlights
and I recommend taking a closer look on your own.
There are two ways of configuring ESLint.
The first is with configuration files
that ESLint complained about.
There are three format supported.
JavaScript files, JSON and YAML.
The files are named .eslintrc. then the extension.
Regardless of the file format,
the configuration is just an object with properties.
The other way to configure ESLint
is with JavaScript comments in files,
which is used for exceptions to rules.
Sometimes rules for the group
aren't good for an individual.
There's actually more than one way
to configure ESLint.
And that's with ESLint specific properties
in package.json.
This can get really messy
especially if there's a lot of rules and customization.
Also, the nature of JSON files
means that there are no comments in package.json,
which help give context or clarification's for decisions.
Ultimately, in my opinion, package.json
should be focused on package management,
not on application configuration.
Therefore please use
the standard configuration files instead.
There are three different properties to be aware of
in the configuration file.
The first are parserOptions
which specify the JavaScript language options.
For example, the ecmaVersion, the default is 5,
but it currently supports through 12.
There are also aliases.
So 2015 is aliased to 6,
2016 to 7, all the way through 2020 for 11
and 2021 for 12.
The other is source type,
which is the type of file to be scanned.
It can be a script which is the default or a module
if you're using ECMAScript modules.
The next is the ENV or environment configuration.
ENV just specifies predefined global variables
for particular environments.
The value is boolean.
So set true to enable one.
For example, for the back end of a node JS express app,
you'd set browser to false, node to true,
es2020 to true and jquery to false.
Rather than me listing them all,
please see the documentation for more options.
Finally, we've got the rules
which define what ESLint is looking for.
See the ESLint docs for list of all the available rules,
which are grouped by category.
Each rule has a setting as its value,
such as off or zero to disable.
There's also a warn or 1 which will report a problem,
but not set the exit code.
For real problems use error or 2
which will set the exit code.
Here's four examples of rules.
No-empty which disallows empty blocks is set to an error.
No-multiple-empty-lines is set to warn,
which seems reasonable.
No VAR is an ECMAScript six rule
that discourages the use of VAR
and encourages the use of const and lint.
Finally, a companion rule prefer-const
prefers the use of a constant
if the variable is never reassigned.
This is a complete example of an ESLint configuration file
in JavaScript format.
The ESLintrc.js file can be found in exercise files
in the solutions 02_05 folder.
I left off the dot in the file name
so it would be visible in all operating systems.
Note that this is a JavaScript file,
so it's exporting an object.
I intentionally left out the parserOptions
as there are already set
by the ENV node and es2020.
Let's add the configuration to our project
and switch over to S code.
First, we'll need to create the configuration file.
Right click in the Explorer and select new file.
For the path, just type .eslintrc.js and press enter.
Let's open the source file.
Navigate to file and open file,
then we're going to go to
wherever you put your exercise files,
which in my case is the desktop,
go to solutions 02_5
and then select eslintrc and click open.
We're going to copy and paste the contents,
navigates a selection
and then go to select all
then right click and copy.
We can now close the source file
by clicking the X in tab.
In the mteslintrc.js file in our project,
right click and go to paste.
Save the file.
That's all the changes we need to make for now
so we can close the eslintrc.js file.
Let's open the main application file,
which has a number of errors.
In the Explorer on the left,
select app.js to open.
Well, that's kind of messy.
There's a mix of vars, lints and consts,
which isn't very ES6 friendly.
The large number of blank lines
is also a maintainability problem.
Finally, there's an if statement that is an empty block.
It's syntactically legal,
but there's no point to have it.
What does ESLint think of this file?
We're going to execute ESLint against this one file
by clicking on the terminal to focus,
then when it's ready type mpx eslint app.j,
and press enter.
There are 12 problems, 11 errors and one warning
which reflects our configuration.
We already know that there are more problems.
So how do we tell ESLint to look for them?
Writing a full ESLint configuration from scratch
is tedious and time consuming.
The alternative,
start with a pre-existing standard and customize.