ESLint Implementation in your Projects

This tutorial describes how to implement and use ESLint in your projects.
Provided by Leumas Naypoka / www.apphp.com

Content

• What is ESLint?
• Why do you need ESLint?
• How to add ESLint to your project
• Install ESlint plugins

---

What is ESLint?

ESLing helps to find and fix problems in your JavaScript code.

Why do you need ESLint?

There are 3 important reasons, why do you need ESling in your project:

1. Finds problems in your code
   ESLint statically analyzes your code to quickly find problems. ESLint is built into most text editors and you can run ESLint as part of your continuous integration pipeline.
2. Automatically fixes problems in your JS code
   Many problems ESLint finds can be automatically fixed. ESLint fixes are syntax-aware so you won't experience errors introduced by traditional find-and-replace algorithms.
3. You may customize it according to your needs
   Preprocess code, use custom parsers, and write your own rules that work alongside ESLint's built-in rules. You can customize ESLint to work exactly the way you need it for your project.

How to add ESLint to your project

Adding ESLing to your project is quite simple procedure. Generally you have to do following steps:

1. Install required plugins
2. Set ESLint configuration
3. Test ESLint works in your IDE

Install ESlint plugins

Run following commands to install required plugins for ESLint

If you what to use ESLint for Vue files, install following plugin as well:

You may also install plugin wiht aribnb configuration (if you want to use it)

If there is an error while installation, something like: "Error: Failed to load plugin ...", run following commands to fix it:

To be continued...

Comments

---