How To Install ESLint
Prerequisites
Step 1 — Install ESLint
Next, install ESLint as a development dependency:
You'll see output similar to:
Step 2 — Configure ESLint
To use our ESLint configuration, add the following .eslintrc.js
file at the root of your project. This configuration supports both browser and Node.js environments. Choose the one that fits your project or customize as needed.
See all ESLint configurations available
Browser Configuration
Create a .eslintrc.js
file with the following content for browser-based projects:
Node.js Configuration
If you're working on a Node.js project, use the following configuration:
Step 3 — Add Linting Scripts
To simplify the linting process, add scripts to your package.json
. Open package.json
and add the following under the "scripts"
section:
Step 4 — Run ESLint
Run the lint script to analyze your code for issues:
You'll see output similar to:
To automatically fix fixable issues, run:
You'll see output similar to:
Step 5 — Integrate ESLint with Your Code Editor
To enhance your workflow, integrate ESLint with your code editor to display linting errors in real-time.
Visual Studio Code
Install the ESLint Extension:
Open VS Code.
Go to the Extensions view by clicking the square icon in the sidebar or pressing
CTRL+SHIFT+X
.Search for "ESLint" and install the extension by Dirk Baeumer.
Configure VS Code to Use ESLint:
Open your VS Code settings (
CTRL+,
).Add the following settings to your
settings.json
:{ "editor.codeActionsOnSave": { "source.fixAll.eslint": true }, "eslint.validate": ["javascript", "javascriptreact"] }