๐Ÿ‘€ย 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ย ๐Ÿ’ฏ

Leave a Reply