DEV Community

Arhan Khan
Arhan Khan

Posted on

ESLint for Beginners: Keep Your JavaScript Clean

ESLint is a tool that reads your JavaScript and points out problems — unused variables, missing semicolons, variables used before they are defined, and dozens of other mistakes — before your code ever runs. Think of it as a careful reviewer who checks every file, every time, for free. Most professional JavaScript projects use it, and learning it early will make your code noticeably better.

Setting it up in a new project is quick:

npm install --save-dev eslint
npx eslint --init
Enter fullscreen mode Exit fullscreen mode

Answer a few questions (what style you want, whether you use React, and so on), and ESLint creates a config file. Then run npx eslint . to check your project. The output looks like this:

src/app.js
  12:7  error  'total' is assigned a value but never used  no-unused-vars
  18:1  error  Missing semicolon                          semi
Enter fullscreen mode Exit fullscreen mode

Each message tells you the file, the line, and the rule that was broken. Many problems can be fixed automatically with npx eslint . --fix, which corrects formatting and simple issues for you.

Start with a sensible preset rather than writing rules from scratch. The recommended set (eslint:recommended) catches real bugs without being noisy, and most frameworks ship their own config — React, Vue and others each have one. Add the Prettier integration if you use Prettier, so the two tools never fight over formatting: ESLint handles correctness, Prettier handles style.

ESLint is for every JavaScript developer, but it helps beginners most. It catches the typo that would have cost you an hour of debugging, and its messages teach you the language as you go — you learn why == is risky and === is safer because ESLint tells you, in your own code, at the moment it matters.

The limits: ESLint only checks what its rules cover — it cannot tell you your logic is wrong, only that your code has patterns that are usually mistakes. A badly configured ESLint setup can also be noisy, so start with a recommended preset and add rules slowly, one at a time, as you understand them.

Start today: add ESLint to your current project, run it, and fix the first ten errors by hand instead of using --fix. You will learn more from ten manual fixes than from a hundred automatic ones — and your code will be cleaner from then on.

Top comments (0)