← Back to list

How to set eslint config?

Before answering how to set up es lint config in the project. One should know what it is and why it is needed.

Mansithakur · 2022-08-20 05:43 · 1 claps · 2.4 min read
#eslint-config #react #javascript #vscode #eslint
Open on Medium ↗
Wiki topics: 🌐 · Web Development

How to set eslint config?

React and eslint in VS code

React and eslint in VS code

Before answering how to set up es lint config in the project. One should know what it is and why it is needed.

What is es lint?

Let's first talk about linting. Linting is the process of checking the code for any errors. A Linter is an automated tool that runs on a static piece of code to find any kind of discrepancy arising due to formatting or due to bad coding practices. Running a Linting tool over the source code helps to improve the quality and readability of the code. It is used for maintaining the coding standard.

ESLint statically analyzes your code to quickly find problems. It is built into most text editors and you can run ESLint as part of your continuous integration pipeline. It is a JavaScript linting tool which is used for automatically detecting incorrect patterns found in ECMAScript/JavaScript code. It is used with the purpose of improving code quality, making code more consistent, and avoiding bugs. It is written in Node.js. So It can be installed easily through NPM.

There are some things to know about eslint:

  • Eslint uses Espree for javascript parsing — Espree is used to parse the JS code and returns the AST (Abstract syntax tree) and also tokenizes the code.
  • ESLint uses an AST to evaluate patterns in code.
  • ESLint is completely pluggable, every single rule is a plugin and you can add more at runtime.

How to install eslint config:

npm init @eslint/config

It will install @eslint/config in the package.json. In the latest version, it will ask how you want to use it.

  1. To check syntax only.

  2. To check syntax and find problems.

  3. To check syntax, find problems, and enforce code style. I am selecting the third option: To check syntax, find problems, and enforce code style.

Similarly, It will ask similar questions regarding the setup of eslint.

It will create a file called .eslintrc.json like this. And will update package.json with these dependencies:

One can run the eslint by npm run eslint, it will show the errors in the terminal.

Thanks for reading it. You can follow me on LinkedIn.


메타데이터
post_id
87ea7d3c9950
slug
how-to-set-eslint-config-87ea7d3c9950
url
https://medium.com/@adhyaya/how-to-set-eslint-config-87ea7d3c9950
canonical_url
https://medium.com/@adhyaya/how-to-set-eslint-config-87ea7d3c9950
author_url
https://medium.com/@adhyaya
status
ok
fetched_at
2026-06-29 22:44:20