👀 TL;DR

  1. ESLint is a modern linting tool for JS development to make your code consistent and bug-free.
  2. Use npm install eslint --global to install ESLint globally.
  3. Go to your project in the terminal and run eslint --init to initiate and setup linting for your project.
  4. Install and automate your workflow in VSCode using ESLint extension.

💾 Step 1: Installation

To install ESLint, you need Node — version greater or equal to 4.0 — and npm — version greater or equal to 2. Open the terminal and enter npm install eslint --global. This command will install ESLint globally in your computer.

ESLint — Installation

👨‍💻 Step 2: Setting Up ESLint

To use ESLint in your project, go to your project in the terminal and use eslint --init to initiate. Next, ESLint will ask you some questions to configure a basic setup for your project.

ESLint — Setting Up ESLint

Answering these questions will create a configuration file — .eslintrc.json — for ESLint in your project folder.

ESLint — ESLint Configuration

👌 Step 3: Automate Your Workflow

If you are using VSCode for coding, then you can automate your JS workflow with ESLint. Open VSCode, search for ESLint and install the extension.

ESLint — VSCode Extension Installation

After installation, click on the Reload button to activate the extension. Now open the settings of VSCode and search for ESLint. Locate the setting eslint.autoFixOnSave, edit its value to true, and save the settings.

ESLint — VSCode autoFixOnSave Setting

Yayy 🙌 That’s it! Now every time you save your JS file, your code will be formatted automatically by ESLint.