eslint error on import form quasar (import/no-extraneous-dependencies) with airbnb style



  • I switched my eslint config to airbnb, because I prefer the style over standard.

    This causes an error in imports from quasar.

    To reproduce:

    quasar init test
    cd test
    npm install
    npm install -s eslint-config-airbnb-base
    

    Then in your .eslintrc.js file, change:
    extends: 'standard' to extends: 'airbnb-base'

    I get this error:

    /home/elco/repos/quasar-template/src/components/Error404.vue
      35:1   error  'quasar' should be listed in the project's dependencies. Run 'npm i -S quasar' to add it  import/no-extraneous-dependencies
      35:29  error  Unable to resolve path to module 'quasar'                                                 import/no-unresolved
      35:29  error  Missing file extension for "quasar"                                                       import/extensions
    

    This is with the standard template, I only changed the linter. I can obviously install quasar, but that resolves to this (https://www.npmjs.com/package/quasar), which is not the right thing.

    How can I make eslint understand the imports from quasar?


    PS: I use this to automatically fix linting errors (also makes switching from standard to airbnb easier):

    In package.json, add this line to scripts:
    "lint-fix": "eslint --fix --ext .js,.vue src"

    Now you can fix your linting errors by running: npm run lint-fix



  • It seems to be caused by eslint being unaware of the alias in config/index.js



  • Found a fix :)

    In eslintrc.js:

    plugins: [
        'html',
        'import',
      ],
      settings: {
        'import/core-modules': [ 'quasar' ],
      },
    

    install npm module eslint-plugin-import


Log in to reply
 

Looks like your connection to Quasar Framework was lost, please wait while we try to reconnect.