question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

import/extensions breaks when a scoped package's scope is just `@`

See original GitHub issue

In a Vue application, using version with packages:

    "eslint": "^5.2.0",
    "eslint-config-airbnb-base": "^13.2.0",
    "eslint-plugin-import": "^2.18.2",
    "eslint-plugin-vue": "^5.2.3",

and an eslint.js of:

module.exports = {
  root: true,
  env: {
    node: true,
  },
  extends: ['plugin:vue/essential', 'airbnb-base'],
  rules: {
    'linebreak-style': 0,
    'no-console': 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
    quotes: ['error', 'single', { avoidEscape: true, allowTemplateLiterals: true }],
    'padded-blocks': 0,
    'no-param-reassign': 0,
    'import/no-unresolved': 0,
    'import/prefer-default-export': 0,
    'max-len': 0,
    'object-curly-newline': ['error', { ObjectPattern: 'never' }],
    // 'vue/html-closing-bracket-newline': ['error', {
    //   singleline: 'never',
    //   multiline: 'never',
    // }],
  },
  parserOptions: {
    parser: 'babel-eslint',
  },
};

In a .vue file, when trying to do an import of a .js file, the eslint plugin can’t decide if the .js extension is needed or not: This: import router from '@/router'; shows: Missing file extension for "@/router" If I change it to: import router from '@/router.js'; I now get: Unexpected use of file extension "js" for "@/router.js"

So which do you want?!?

FYI, the jsconfig.json is:

{
  "include": [
    "./src/**/*"
  ],
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": [
        "src/*"
      ]
    }
  }
}

Issue Analytics

  • State:closed
  • Created 4 years ago
  • Comments:21 (14 by maintainers)

github_iconTop GitHub Comments

2reactions
yordiscommented, Jan 14, 2020

@ljharb confirmed, it fixes the issue

1reaction
jtsomcommented, Feb 3, 2020

So far, this version looks like it’s fixed the issue. I’ll do some more testing but 👍

Read more comments on GitHub >

github_iconTop Results From Across the Web

import/extensions breaks when a scoped package's ... - GitHub
In a Vue application, using version with packages: "eslint": ... import/extensions breaks when a scoped package's scope is just @ #1598.
Read more >
scope - npm Docs
The scope folder ( @myorg ) is simply the name of the scope preceded by an @ symbol, and can contain any number...
Read more >
Using GitHub Packages Registry with Unity Package Manager
Even if your Github Packages registry-based scoped registry is ... Unity decides to use dot notation as the scope, but other NPM based ......
Read more >
npm - Understanding Scoped Packages - Nitay Neeman's Blog
This article explains what scopes are in regard to npm packages - focusing on how to create, publish and install them.
Read more >
TypeScript: Scoped npm packages with type definitions on ...
Changing the import to import { SetupMethod } from '@feathersjs/feathers'; fixes compilation but breaks all WebStorm features like code completion, detection/ ...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found