why do we need to separately install eslint as npm package and vscode extension?

Short answer: you don't.

Long answer:

Installing ESLint/Prettier as extension, allows you to format/check your code inside the VSCode.

However, installing them also as dependencies brings extra benefits:

• VSCode will use exact same package as installed. So you will not spot the situation when VSCode says OK, but your CI server says: NOT OK
• You will get control over the versions, and can update whenever you want
• You will be able to use different versions for different projects. This is especially important, when you can't migrate old project, but want to use the latest possibilities for the new one
• You will be able to access Prettier/ESlint through the script block of the package.json, and be able to write custom commands with parameters exactly as you need
• You will be able to pair them with Husky or NPM hooks to automatically verify/format the code

From my experience, if you can install something locally - install it as package dependency (except CLI like create-react-app or angular-cli that helps you start the app). This will make your life a bit predictable.

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.

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.