Eslint: How to use globally installed eslint-plugin-vue

Question

I would like to use linter elint-plugin-vue as global installation since i use Docker a lot and i might not have a node_modules folder at the root of my repositories.
Previously, i have installed the linter like this: sudo npm install -g eslint eslint-plugin-vue vue-eslint-parser

However, when running /usr/bin/eslint --ext .vue Footer.vue in absence of any node_modules folder, i get the following:

Oops! Something went wrong! :(

ESLint: 7.23.0

ESLint couldn't find the plugin "eslint-plugin-vue".

(The package "eslint-plugin-vue" was not found when loaded as a Node module from the directory "/home/user".)

It's likely that the plugin isn't installed correctly. Try reinstalling by running the following:

    npm install eslint-plugin-vue@latest --save-dev

The plugin "eslint-plugin-vue" was referenced from the config file in "PersonalConfig".

If you still can't figure out the problem, please stop by https://eslint.org/chat/help to chat with the team.

ls -la /usr/lib/node_modules/ | grep lint shows:

drwxr-xr-x   7 root root   4096 30. Mär 18:56 eslint
drwxr-xr-x   4 root root   4096 30. Mär 18:56 eslint-plugin-vue
drwxr-xr-x   8 root root   4096 19. Mär 23:09 jsonlint
drwxr-xr-x   3 root root   4096 30. Mär 21:43 vue-eslint-parser

~/.eslintrc:

{
  "extends": [
    "eslint:recommended",
    "plugin:vue/vue3-recommended"
  ]
}

The above error pops up as soon as i put "plugin:vue/vue3-recommended" inside ~/.eslintrc.
Is there a way to make this work? Would be great to have this as fallback if the repository i'm working with has no node_modules locally.

Doze

Answer 1

You can use the --resolve-plugins-relative-to flag to change the directory where plugins are resolved from.

For example, in your case:

eslint . --resolve-plugins-relative-to=/usr/lib/

or you can try getting the path dynamically

# Yarn
eslint . --resolve-plugins-relative-to=$(yarn global dir)

# npm
eslint . --resolve-plugins-relative-to=$(npm root -g)

Tallowy