πŸ‘€ 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.

A dedicated Full Stack Web Developer in the making with more than four years of experience in open source products development β†’ Regular WordPress Core Contributor β†’ Principal Developer at WP White Security β†’ Part of the team at TheDevCouple.com

Leave a Reply