If ESLint is running in the terminal but not inside VSCode, it is probably because the extension is unable to detect both the local and the global node_modules folders.

To verify, press Ctrl+Shift+U in VSCode to open the Output panel after opening a JavaScript file with a known eslint issue. If it shows Failed to load the ESLint library for the document {documentName}.js -or- if the Problems tab shows an error or a warning that refers to eslint, then VSCode is having a problem trying to detect the path.

If yes, then set it manually by configuring the eslint.nodePath in the VSCode settings (settings.json). Give it the full path (for example, like "eslint.nodePath": "C:\\Program Files\\nodejs") -- using environment variables is currently not supported.
This option has been documented at the ESLint extension page.

Answer from ParaBolt on Stack Overflow
🌐
Visual Studio Marketplace
marketplace.visualstudio.com › items
ESLint - Visual Studio Marketplace
Extension for Visual Studio Code - Integrates ESLint JavaScript into VS Code.
🌐
Dave Ceddia
daveceddia.com › vscode-use-eslintrc
ESLint + VSCode: How to Format Your Code Using .eslintrc
Open up VSCode’s settings. On a Mac, press Cmd+, or get there through the menus: Code > Preferences > Settings. It’ll open the fancy settings editor, but we need the raw JSON settings file instead. Click that tiny icon in the top-right that looks like a piece of paper with a little arrow. Add these 4 new lines inside the top-level settings object: { // ... "eslint.format.enable": true, "editor.codeActionsOnSave": { "source.fixAll.eslint": true } }
Discussions

ESLint not working in VS Code?
But I now think VSC was aborting there and not bothering to run any more rules. Once I removed /* eslint-disable canonical/filename-match-exported */ from the files that had those comments, VSC started honoring my ESLint rules (even in tsx files). ... Run vscode command ESLint: Show Output ... More on stackoverflow.com
🌐 stackoverflow.com
Do I need eslint ? Or to learn VSCode debugger?
If you find that console logging is sufficient to solve the problems you are encountering, then continue to use it. When you reach a point where you program is complex enough that you find yourself saying "it would really help if I could stop my program and just inspect the state of each variable and take things step by step" then you'll know you're ready for a debugger. Similarly, as a solo developer you really don't need Eslint. Where linters really shine is enforcing coding standards across an entire project being worked on by multiple developers. They allow you to save tons of time manually enforcing things then can be detected automatically, giving you much more time to focus on the code and the program logic itself. That said one thing linters like Eslint can be really good for even as a solo dev is as a teaching tool. I remember when I was learning JS I forced myself to use AirBnB's ESlint config which is quite strict, and it was a pain in the ass, but once I got more familiar it really helped me learn some best practices and idiomatic coding that become more and more noticeable as my programs grew, and I'm a better developer today for it. Even if you don't agree with every rule, or find some TOO strict, you can manually disable individual rules at the project level even when using an external configuration. More on reddit.com
🌐 r/learnjavascript
8
8
November 12, 2023
Help me understand why installing a plugin is not enough (ESLint)...
I proceed to install ESLinter OK, so you've chosen to use ESLint to lint your codebase. Have you followed the Getting Started page from ESLint's documentation? This gets you started with ESLint itself. You can use ESLint in many code editors. To use ESLint in VS Code you need to installed the extension for ESLint. Between the Getting Started and the instructions in the extension itself are you running into any further blockers or issues? More on reddit.com
🌐 r/vscode
5
3
October 21, 2021
visual studio code - In VSCode, how do I effectively run eslint --fix and prettier --write on "Format Document"? - Stack Overflow
For context, I've locally installed prettier, eslint, and their respective VS Code extensions. I used the word "effectively" in my title because I don't literally need to run eslint --fix; More on stackoverflow.com
🌐 stackoverflow.com
🌐
Medium
medium.com › @jeryldev › a-beginners-story-how-to-setup-eslint-in-a-visual-studio-code-project-28b379a33cdb
How to set up ESLint in a Visual Studio Code project — my 5 minute story | by Jeryl Donato Estopace | Medium
December 31, 2018 - How to set up ESLint in a Visual Studio Code project — my 5 minute story This is my story on how I was able to incorporate ESLint in my VS Code project. I am eager to learn ESLint because I want my …
🌐
Reddit
reddit.com › r/learnjavascript › do i need eslint ? or to learn vscode debugger?
r/learnjavascript on Reddit: Do I need eslint ? Or to learn VSCode debugger?
November 12, 2023 -

I am a hobbyist and have never written a program longer than about 400 lines. I have had no luck installing Eslint, and note that there is a bit of negative comment about it on the web. Also I have just started to get into VSCode debugger and am finding it hard going. Question: Do I need Eslint and VSCode Debugger to analyse a 400 line program, or should I just stick to console.log? I seem to be spending more time trying to figure out these 2 items than actual coding. Would appreciate some guidance. Thanks.

Top answer
1 of 3
14
If you find that console logging is sufficient to solve the problems you are encountering, then continue to use it. When you reach a point where you program is complex enough that you find yourself saying "it would really help if I could stop my program and just inspect the state of each variable and take things step by step" then you'll know you're ready for a debugger. Similarly, as a solo developer you really don't need Eslint. Where linters really shine is enforcing coding standards across an entire project being worked on by multiple developers. They allow you to save tons of time manually enforcing things then can be detected automatically, giving you much more time to focus on the code and the program logic itself. That said one thing linters like Eslint can be really good for even as a solo dev is as a teaching tool. I remember when I was learning JS I forced myself to use AirBnB's ESlint config which is quite strict, and it was a pain in the ass, but once I got more familiar it really helped me learn some best practices and idiomatic coding that become more and more noticeable as my programs grew, and I'm a better developer today for it. Even if you don't agree with every rule, or find some TOO strict, you can manually disable individual rules at the project level even when using an external configuration.
2 of 3
3
Write the word breakpoint; anywhere in your code where you think it might be broken. Refresh your web browser with the console open. Now you are debugging. For lint, install the VSCode eslint plugin. Now you have linting.
🌐
DigitalOcean
digitalocean.com › community › tutorials › linting-and-formatting-with-eslint-in-vs-code
How To Lint and Format Code with ESLint in Visual Studio Code | DigitalOcean
October 17, 2024 - ESLint is a linter that you can integrate into your Visual Studio Code setup in order to ensure code integrity. In this tutorial, you will set up ESLint on V…
Find elsewhere
🌐
DEV Community
dev.to › muratcanyuksel › quick-eslint-guide-vscode-eslint-on-save-3ik0
Quick ESLint guide + VsCode ESLint on save - DEV Community
July 11, 2021 - On VsCode, go to preferences-settings-extensions-eslint ( you can search for ESLint once in the settings and do not forget to click on Workspace because that's where we're gonna change the settings) and there, on the right top of the page, you'll ...
🌐
Robin Wieruch
robinwieruch.de › vscode-eslint
How to use ESLint in VSCode
February 14, 2022 - How to install ESLint for VS Code (Visual Studio Code). Install ESLint, configure it per project, and use a local .prettierrc file ...
Top answer
1 of 2
10

VSCode doesn't support chaining multiple formatters. More at this related question.

But chaining formatters isn't the answer to your problem. If you're using Prettier and ESLint properly then they do not overlap in their ruleset. You can use eslint-plugin-prettier to format the document with only ESLint and it will run Prettier as an ESLint rule. Adding eslint-config-prettier disables any ESLint rules that would conflict with Prettier.

Afterwards, running eslint --fix would apply both your ESLint and Prettier rules in a single format.

If you would like to use ESLint with other filetypes then you need to find ESLint plugins that work for those filetypes. They require installation and configuration unique to each plugin. An example is eslint-plugin-jsonc to add support for JSONC.

In package.json:

{
  "devDependencies": {
    "@typescript-eslint/eslint-plugin": "^6.10.0",
    "@typescript-eslint/parser": "^6.10.0",
    "eslint": "^8.53.0",
    "eslint-config-prettier": "^9.0.0",
    "eslint-plugin-prettier": "^5.0.1",
    "prettier": "^3.0.3",
    "typescript": "^5.2.2"
  }
}

In .eslintrc.json:

{
  "extends": [
    "plugin:prettier/recommended" // must be last element in "extends"
  ],
  "parser": "@typescript-eslint/parser",
  "plugins": [
    "@typescript-eslint"
  ],
  "settings": {
    "import/parsers": {
      "@typescript-eslint/parser": [
        ".ts"
      ]
    },
  }
}

Set your Prettier rules in .prettierrc.json, for example:

{
  "printWidth": 100
}

Now eslint --fix will format the document in a single pass.

For VSCode, install both the dbaeumer.vscode-eslint and the esbenp.prettier-vscode extensions. These each require you to have the corresponding npm package installed, whether locally in your app or globally on your device. You may also need to configure VSCode so that it can find the packages, depending on how they were installed.

Then when you run Format Document With and select ESLint it will apply both your ESLint and Prettier rules with the equivalent of eslint --fix. For example, leaving a trailing space will trigger this INFO alert:

Delete `·` eslint (prettier/prettier)

Formatting the document with ESLint resolves the issue.

2 of 2
1

This bugged me ALOT as well. There are a lot of resources online about different ways. The problem is most of them are outdated, don't work, require some config adjustments, and have their own set of trade-offs.

Here was the solution I ended up going with:

I just added this to my users keybindings.json:

{
    "key": "cmd+alt+f",
    "command": "workbench.action.terminal.sendSequence",
    "args": {
        "text": "npx prettier --write '${file}' > /dev/null 2>&1 && npx eslint_d --fix '${file}' > /dev/null 2>&1 & \u000D" // The CLI command to run "\u000D" is just the return key.
    },
    "when": "editorTextFocus"
},

That command uses eslint_d but thats just a performance enhancement. You could just as easily use eslint instead.

If you want to get it to run on save. You can try vscode-run-on-save

The benefit of this was it just works across any flavor of vscode like cursor, windsurf, etc. I don't have to muck with configs or any other setup.

Hope this helps someone else :).

🌐
GitHub
github.com › microsoft › vscode-eslint › issues › 1856
vscode-eslint extension not working on latest version of VSCode, v1.90.0 · Issue #1856 · microsoft/vscode-eslint
June 7, 2024 - Environment Operating System: macOS VSCode Version: 1.90.0 vscode-eslint Version: 2.4.4 ESLint Version: 8.45.0 eslint-plugin-prettier Version: 5.0.0 Description This extension does not appear to be formatting code when setting "source.fi...
Published   Jun 07, 2024
🌐
ESLint
eslint.org
Find and fix problems in your JavaScript code - ESLint - Pluggable JavaScript Linter
A pluggable and configurable linter tool for identifying and reporting on patterns in JavaScript. Maintain your code quality with ease.
🌐
Visual Studio Code
code.visualstudio.com › docs › configure › extensions › extension-marketplace
Extension Marketplace
November 3, 2021 - { "recommendations": ["dbaeumer.vscode-eslint", "esbenp.prettier-vscode"] } which recommends a linter extension and a code formatter extension. An extension is identified using its publisher identifier and extension identifier publisher.extension. You can see the name on the extension's detail page.
🌐
GitHub
github.com › microsoft › vscode-eslint
GitHub - microsoft/vscode-eslint: VSCode extension to integrate eslint into VSCode · GitHub
VSCode extension to integrate eslint into VSCode. Contribute to microsoft/vscode-eslint development by creating an account on GitHub.
Author   microsoft
🌐
freeCodeCamp
forum.freecodecamp.org › javascript
How to Install ESLint in VS Code
January 2, 2025 - I’m learning. I know very little. My questions might sound stupid. I’m taking a javascript tutorial. I’ve created an HTML file using VS Code which has js code in it. There is a problem with the js. I think it’s a s…
🌐
Visual Studio Marketplace
marketplace.visualstudio.com › items
Prettier ESLint - Visual Studio Marketplace
Extension for Visual Studio Code - A Visual Studio Extension to format JavaScript and Typescript code using prettier-eslint package
🌐
Aleksandr Hovhannisyan
aleksandrhovhannisyan.com › blog › eslint-format-on-save
How to Format on Save with ESlint | Aleksandr Hovhannisyan
August 22, 2024 - Set up ESLint to format on save in two popular code editors: VS Code and neovim.
🌐
Microsoft Learn
learn.microsoft.com › en-us › visualstudio › javascript › linting-javascript
Linting JavaScript in Visual Studio - Visual Studio (Windows) | Microsoft Learn
Use ESLint to lint JavaScript and TypeScript in Visual Studio, install dependencies, configure linting rules, and access troubleshooting support.