@bakunovdo

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

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

export class Page {
  constructor(selector, options) {

    //Автодополнений нет
    this.$element = document.querySelector(selector)
    this.$element. // <--
    
    //А в этом случае у меня есть автодополнения из lib.dom, тк указал явно
    const cnt = document.querySelector('.container')
    cnt. // <--
  }
}
  • Вопрос задан
  • 155 просмотров
Решения вопроса 1
bingo347
@bingo347 Куратор тега JavaScript
Бородатый программер
Главное что нужно понять, что из коробки в 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
    }
}
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
IonDen
@IonDen
JavaScript developer. IonDen.com
WebStorm - это IDE
VS Code - это текстовый редактор (путь и красивый)

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

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
Татнефть Казань
от 80 000 до 125 000 ₽
от 50 000 до 110 000 ₽
NatsON Москва
от 130 000 до 200 000 ₽
01 нояб. 2020, в 00:04
50000 руб./за проект
31 окт. 2020, в 23:12
10000 руб./за проект