Keep Your Code Clean By Using EsLint
It was time to install a linting tool to use it for my Boot camp code; I was ready for errors from the linter. It was my first time to use eslint, but I was a bit scared to install it because of the, and I had to use it because it was part of the requirements. I found it interesting since I had chunks of code which were not ordered and Eslint could locate where the code had a problem is.
From my perspective, any code being done with Javascript should have Eslint because of the following reasons:
- It sets conventions to contributions
- Its sets standards styles for coding
- helps in finding bugs
- It detects undeclared variables
- Saves time in debugging
Those are a few of the reasons that make Eslint one of the best tools. EsLint saves a programmer some energy to debug, and mostly a project without a linter does not welcome contributions since there are no standards or conventions set for the project, which makes it a risk. EsLint can be configured to use several coding styles and also you can configure it to set your own coding conventions. Now let us jump into configurations.
INSTALLING ESLINT
To use eslint in your code, first, this you need is to install eslint npm package and save it on your project only as Dev dependencies because it is used only on development mode and not production mode.
Run this to install:
npm install eslint — -save-dev
Installing the Style Guide
Next thing after installing the eslint is to specify and install the eslint style guide that we won’t use, which is Airbnb. I will take you through the installation using screenshots. First, run the following on your terminal:
./node_modules/bin/eslint — init // enables to configure eslint
after that it will give you the following option:
How would you like to use ESLint?
Choose ‘To check syntax, find problems, and enforce code style’
next, it will ask, What type of modules does your project use?
Choose JavaScript modules (import/export) if you are working with ES6
next, it will ask, Which framework does your project use?
Choose the framework you working with
next, Where does your code run?
Choose where your code will run on
next, How would you like to define a style for your project?
Choose the guide style option; we will go with Use a popular style guide
Next, Which style guide do you want to follow?
Here we will go with [Airbnb](https://github.com/airbnb/javascript)
Would you like to install them now with npm? (Y/n)
confirm with Y to install the guide
this guide will install eslint with the guide style Airbnb
below is the configuration (.eslintrc) which will be created automatically after installing the style guide Airbnb
once the eslint is installed with the right styling guide, we can try and make some simple linting errors to see how the linter works.
Test
To test if the linter is working, create a sample.js file and add this line of code
`var name = “bon”`
Then go to your terminal and run this
> `./node_modules/.bin/eslint sample.js`
it will display the following error which will act as a guide on refactoring your code:
In conclusion, so far I have used eslint to write a cleaner code and it is an awesome tool to work with. It has been a lifesaver tool during my Bootcamp since it helps me debug my code easily without wasting a lot of time. To get started and learn how to use eslint visit [EsLint](https://eslint.org/docs/user-guide/getting-started) . Thanks for reading this article, please leave a clap or a comment.
