What’s next you say? Well let’s pull up our text editor and terminal and start the demonstration process !
Create a folder if you haven’t already and
cd into that directory. Pull up the and console run
npm init -y , what this will do is create a
package.json file. The
-y flag is there so it doesn’t prompt us with all the usual questions from the command.
After running the command we should now see a
package.json file within our file structure. Great job so far. We now want to run
npm i --save-dev eslint which will allow eslint to be installed and saved as a dev dependency.
The next thing we will want to do is initialize eslint into our project. To do so we will run
./node_modules/.bin/eslint --init in the terminal. This is going into the node_modules directory that was created from our install of eslint and then we init to initialize eslint. You will then be prompted with a wizard on how you want to config eslint. Below are the questions from the wizard and my answers.
Of course choose the answers that fits your needs. After running this command we will now be able to see what ESLint can do for us.
ESLint in action
Here we have some sample code to play around with to demonstrate what ESLint is like. Now there’s nothing wrong with the above code. Everything will work as intended, however ESLint will help us maintain a consistent style across our code. Below we can see many indications of possibly syntax errors according to all the squiggle underlines.
Looking at the last line, line 13 where we call our
pepperinii() function, we are presented with an error saying that a newline is required at the end of a file.
A simple fix for this would just give our code base a newline at the end of the file. If we take a look at line 4. We will be presented with two errors — these are default rules from ESLint and can be changed within the
eslintrc.json file that was generated from our earlier commands.
Now the errors that we are presented with are; semi-colon expected at the end of line 4 and also that our
moreFood variable has been defined but never used. Simply redeclaring
moreFood = 'some value' will not solve the error of it not being used. To find out more on what ‘being used’ mean check out the doc below.
no-unused-vars - Rules
The "extends": "eslint:recommended" property in a configuration file enables this rule. Variables that are declared and…
Below is what everything being refactored to a proper way would look like; We can always change the rules to what we want them to be inside the
eslintrc.json file. We can access the ‘rules’ from eslint site and add and remove what we need.
As we see here I added
no-console and set it to “off” to disable the error that we receive when using console.log within our codebase.
eol-last is also set to off to remove the error that requires us to have a new line at the end of our file.
There are a ton of rules to play around with and fit to your needs. Such as using double quotes instead of single quotes, indentation expectations and much much more. Feel free to view the below links for more insight on ESLint.