- Linting your code is very important
in your testing process,
as it helps you detect syntax errors.
This reduces the time you spend in debugging your code,
as it ensures that your code is free of syntax errors
before you run it.
To follow along with this exercise,
make sure that you are on the 01_04b branch of the project.
The easiest way to add linting to your Vue.js project
is by using the Vue CLI add function
to install and configure the ESLint packet.
Make sure you're at the root of your project
and run the command
vue add
@vue/cli
dash plugin
dash eslint.
Now hit enter to run the command.
This will begin the installation and setup process.
This might take awhile,
so you would want to return when the process is done.
At some point in the installation process,
you'll get a prompt to pick a configuration for ESLint.
Let's go with the standard configuration.
Next, you'll get a prompt
to pick additional features for ESLint.
The two options are lint on save and lint on commit.
The lint on save option runs the linter
each time you save your code in the editor.
The lint on commit option lints your code
before it's committed to your local repository.
Select the lint on save option by hitting the enter key
as it's already the default selection.
Then wait once again,
for the process to finally complete.
Once the setup is complete,
load up the project in your text editor.
The setup process did not only install ESLint,
but configured the package for the Vue.js project.
Notice the eslint.rc.js file.
This is the configuration file for the ESLint package.
Another item added by the setup process can be found
in the package.json file.
A lint script has an added to the list of scripts.
This allows us to run the linter on the entire project
from the terminal.
Let's try this out.
Let's head over to the terminal.
At the root of the project,
run the lint script by typing NPM run lint.
At this point of the project,
the linter reports that no errors were found
as the project does not contain any syntax errors
at the moment.
Let's try to get some error reporting
by intentionally adding some syntax errors
to our code.
Inside the text editor, open up Home.vue.
Just underneath the first opening div,
add an incomplete div tag.
Now let's return to the terminal
and run the linting command once again.
This time the linter reports the syntax errors in our code.
It also gives information on where the error takes place,
helping us locate and fix them.