Skip to content

built-in javascript validator breaks on dynamic imports. #28450

Closed
@serkanyersen

Description

@serkanyersen
  • VSCode Version: 1.13.0
  • OS Version: macOS 10.12.5

Steps to Reproduce:

  1. open a new file (set syntax to javascript)
  2. paste this code in the file
import Vue from 'vue';
import Router from 'vue-router';

Vue.use(Router);

export function createRouter () {
  const router = new Router({
    mode: 'history',
    scrollBehavior: () => {
      return { y: 0 };
    },
    routes: [
      {
        name: 'home',
        path: '/',
        component: () => import('@/views/Home'),
      },
      {
        name: 'about',
        path: '/about',
        component: () => import('@/views/About'),
      },
      {
        name: 'faq',
        path: '/faq',
        component: () => import('@/views/Faq'),
      },
    ],
  });
  
  return router;
}
  1. check problems view to see the reported errors.
  2. You can see that after it failed on import( lines, validator could not recover. it keeps on failing on every statement after that.
  3. replace the contents with this code
// Fails correctly
const x = {
  foo: import('./myModule'),
  bar: 'bar string',
  x: import('./myModule2'),
  foobar: 1234,
  method() {
    return bar;
  },
  array: [{}],
  method2: () => {}
}

// fails correctly
const y = {
  x: {
    foo: import('./myModule'),
    bar: 'bar string',
    x: import('./myModule2'),
    foobar: 1234,
    method() {
      return bar;
    },
    method2: () => {}
  },
  bar: [],
  z: {
    name: 'string'
  }
}

// Fails wrong.
// Rest of the object gets effected
z = {
  x: [
    {
      foo: import('./myModule'),
      bar: 'bar string',
      x: import('./myModule2'),
      foobar: 1234,
      method() {
        return bar;
      },
      method2: () => {}
    },
  ],
  bar: {
    foo: 'this object got broken'
  }
};
  1. See that erroring on import statement sometimes works correctly
    first two examples works ok, but last example breaks the validator. seems to be related to []

Also related feature request:

Dynamic imports are still on proposal stage but they are usable with babel and I can allow them on eslint. but there is no way to allow them on default validator. I know I can simply disable javascript.validate but it's useful and I don't want to disable it for one simple feature I use.

I'm not sure if there is a way to disable validator for lines or files only, something like // eslint-disable-line?

but it would be nice to have a way to tell validator to stop validating on some files or lines.

Metadata

Metadata

Assignees

Labels

javascriptJavaScript support issuestypescriptTypescript support issuesupstreamIssue identified as 'upstream' component related (exists outside of VS Code)

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions