VS Code в autocomplete не отображает методы и функции из lib.dom для this...?

Question

[bakunovdo]

Это можно как-то пофиксить? Или может это напросто не работет в vscode. Например в ide WebStorm все прекрасно отображается, но в нем работать мне не комфортно.

export class Page {
  constructor(selector, options) {

    //Автодополнений нет
    this.$element = document.querySelector(selector)
    this.$element. // <--
    
    //А в этом случае у меня есть автодополнения из lib.dom, тк указал явно
    const cnt = document.querySelector('.container')
    cnt. // <--
  }
}

Comments

[Lillipup]

WebStorm все прекрасно отображается, но в нем работать мне не комфортно.

IDEA от jetbrains как героин, главное войти во вкус, потом не слезешь

Answer 1

[Дмитрий Беляев]

Главное что нужно понять, что из коробки в VSCode подсказки в JS основаны на TypeScript, их можно расширить плагинами, но основа все равно останется именно такой.
Так как в JS статических типов нет, VSCode пытается вывести тип с помощью TypeScript, но TypeScript делает это далеко не идеально.

В случаеconst cnt = document.querySelector('.container')тип можно вывести однозначно - это тип Element, а все потому, что TS знает, что значение в const точно не изменится и просто берет возвращаемый тип для document.querySelector и выводит подсказки для него.

В случае же с this.$element значение может поменяться, в том числе где-то из вне, и JS вполне позволяет изменить его на что угодно, поэтому выводится тип any, для которого подсказок нет.

Я не буду Вас агитировать перейти на TypeScript, как и расписывать, насколько он экономит время при разработке чего-либо сложнее 10-20 строчек кода. Я просто подскажу, что TS в VSCode можно врубить и для обычных JS файлов, даже не имея tsconfig.json, достаточно просто добавить комментарий // @ts-checkв начало файла, и Вы получите сразу и больше подсказок, и некоторый контроль типов. Так же добавлю, что в js файлах можно аннотировать типы через jsdoc:

// @ts-check
export class Page {
    constructor(selector, options) {
        /** @type Element */    
        this.$element = document.querySelector(selector)
        this.$element // тут работают подсказки после точки для типа Element
    }
}

Comments

[bakunovdo]

Дмитрий, спасибо большое за такой развернутый ответ) Дак еще и есть этому решение, я пока только изучаю javascript, в дальнейшим обязательно изучу TS. Спасибо вам!

Answer 2

[Денис Инешин]

WebStorm - это IDE
VS Code - это текстовый редактор (путь и красивый)

Нельзя хотеть от текстового редактора всех тех вещей которые умеет IDE (Integrated Development Environment)

Comments

[bakunovdo]

Понял, спасибо!