1

Здравствуйте.

Использую библиотеку svg.js и её плагины. При наборе кода VSCode не выдаёт подсказки, а на официальной странице svg.js очень маленькая документация, в которой описаны не все методы и функции.

Можно ли каким-то образом сделать так, чтобы VSCode давал подсказки по коду?

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="css/geo.css">
    <title>Document</title>
</head>
<body>
    <div id="drawing"></div>

    <script type="text/javascript" src="js/jQuery/jquery-3.3.1.min.js"></script>

    <script type="text/javascript" src="js/svgScripts/svg/svg.min.js"></script>
    <script type="text/javascript" src="js/svgScripts/svgDraggable/svg.draggable.min.js"></script>
    <script type="text/javascript" src="js/svgScripts/svgDraw/svg.draw.min.js"></script>
    <script type="text/javascript" src="js/svgScripts/svgResize/svg.resize.min.js"></script>
    <script type="text/javascript" src="js/svgScripts/svgSelect/svg.select.min.js"></script>

    <script type="text/javascript" src="js/geo.js"></script>
</body>
</html>

JavaScript (geo.js)

SVG.on(document, 'DOMContentLoaded', function() {
    if (SVG.supported) {
        var draw = SVG('drawing');

        draw. //после точки должны появиться подсказки

    } else {
        alert('SVG not supported');
    }
});
4
  • эмм, так вот же types уточните пожалуйста 1. как вы устанавливаете библиотеку (версия, содержание package.json) 2. пишите на js или ts 3. пример кода
    – qwabra
    Commented 9 мар. 2018 в 18:08
  • @qwabra Пишу на js. package.json взял на GitHub в их репозитории. package.json находится в той же папке, что и svg.js. Самый простой пример кода: var draw = SVG('drawing'); draw. после точки, VS Code должна предлагать варианты.
    – Klimbo
    Commented 9 мар. 2018 в 20:17
  • 1
    зря метки поменяли, то что вам нужно - файлы *.d.ts это часть typescript @types но обо всём подробнее завтра.
    – qwabra
    Commented 9 мар. 2018 в 20:34
  • @qwabra Понял, буду Вас ждать.
    – Klimbo
    Commented 9 мар. 2018 в 20:43

1 ответ 1

1

ответ разделён на две части:

  1. Можно ли включить подсказки кода в VSCode для сторонних библиотек?
  2. Можно ли включить подсказки кода в VSCode для svg.js
  3. Разбор svg.js

1. Можно ли включить подсказки кода в VSCode для сторонних библиотек?

да, можно.
если вам повезло - устанавливаете из npm пакет и всё.
если не повезло - ищите *.d.ts

npm

definitelytyped

то, что вам нужно гуглится так @types имя_библиотеки
ещё можно посмотреть тут http://microsoft.github.io/TypeSearch/

например для nodejs - https://www.npmjs.com/package/@types/node
установка происходит командой npm install --save @types/node (!обратите внимание на версию типов и программы, могут отличаться)
после выполнения этой команды, скачиваются файлы содержащие только описание библиотеки, только типы, которые хранятся в файле с расширением *.d.ts

с недавнего времени, некоторые библиотеки при установке из npm уже содержат types и в этом случае не требуется выполнение npm install --save @types

2. Можно ли включить подсказки кода в VSCode для svg.js

Использую библиотеку svg.js

имеет .d.ts не всё описано

и её плагины

неизвестно имеют ли .d.ts сомнительно

3. Разбор svg.js

далее пример, взят отсюда:

var input = document.querySelector('input[type=text]')
var draw = SVG('drawing').viewbox(0, 0, 300, 140)
var text = draw.text(function(add) {
	add.tspan( input.value )
})

text
	.path('M10 80 C 40 10, 65 10, 95 80 S 150 150, 180 80')
	.animate(1000, '<>')
	.plot('M10 80 C 40 150, 65 150, 95 80 S 150 10, 180 80')
	.loop(true, true)

input.addEventListener('keyup', updateText(text))

function updateText(textPath) {
	return function() {
		textPath.tspan(this.value)
	}				
}
@import url('https://fonts.googleapis.com/css?family=Inconsolata');
#drawing {
	width: 100%;
	height: 300px;
}
tspan {
	fill: #e5e5e5;
	stroke: #f06;
	stroke-width: 0.85;
  font-family: 'Inconsolata';
}
input[type=text] {
	width: 100%;
  font-family: 'Inconsolata';
  font-size: 14px;
  outline: none;
  color: #666;
}
<script src="https://cdn.rawgit.com/svgdotjs/svg.js/ceaf24d5/dist/svg.min.js">
/*! svg.js v2.4.0 MIT*/
</script>
<input type="text" value="Dragon----- - - - ->" placeholder="Type text here...">
<div id="drawing"></div>


разбор примера

создаём папку test
переходим в неё
создаём файл package.json следующего содержания:

{
    "author": "qwa",
    "description": "",
    "tags": [],
    "name": "svg.js",
    "private": true,
    "main": "",
    "version": "0.1.0",
    "dependencies": {
        "svg.js": "2.4.0" //<- библиотека такой же версии как в примере
    },
    "devDependencies": {
        "reload": "2.2.2" //<- веб сервер для разработки
    },
    "scripts": {
        "start": "reload"
    }
}

выполнием npm install
создаётся директория node_modules примерно такого содержания:

node_modules
├── ...
├── svg.js
│   ├── bench
│   ├── dist
│   │   ├── svg.js     <-- скомпилированный файл библиотеки
│   │   └── svg.min.js
│   ├── spec
│   ├── src            <-- исходики библиотеки
│   ├── ...
│   └──svg.js.d.ts     <-- файл описания библиотеки
├── ...
└── ...

создаём и заполняем

index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <!--
        и что мы видим
        это не работает!
    -->
    <!-- <script src="/node_modules/svg.js/dist/svg.js"></script> -->

    <!-- и это тоже -->
    <!-- <script src="/node_modules/svg.js/dist/svg.min.js"></script> -->

    <!-- зато это работает, чудеса, да и только -->
    <script src="https://cdn.rawgit.com/svgdotjs/svg.js/ceaf24d5/dist/svg.min.js">
        /*! svg.js v2.4.0 MIT*/
    </script>
</head>

<body>

    <input type="text" value="Dragon----- - - - ->" placeholder="Type text here...">
    <div id="drawing"></div>
    <script src="/index.js"></script>

</body>

</html>

index.css

@import url('https://fonts.googleapis.com/css?family=Inconsolata');
#drawing {
    width: 100%;
    height: 300px;
}
tspan {
    fill: #e5e5e5;
    stroke: #f06;
    stroke-width: 0.85;
    font-family: 'Inconsolata';
}
input[type=text] {
    width: 100%;
    font-family: 'Inconsolata';
    font-size: 14px;
    outline: none;
    color: #666;
}

index.js

//#region плохих советов
/// <reference path="./node_modules/svg.js/svg.js.d.ts" />

if(!SVG){//hack for intellisense
    var SVG = svgjs
}
//#endregion плохих советов

var input = document.querySelector('input[type=text]')
var draw = SVG('drawing').viewbox(0, 0, 300, 140)
var text = draw.text(function(add) {
    add.tspan( input.value )
})

text
    .path('M10 80 C 40 10, 65 10, 95 80 S 150 150, 180 80')
    .animate(1000, '<>')
    .plot('M10 80 C 40 150, 65 150, 95 80 S 150 10, 180 80')
    .loop(true, true)

input.addEventListener('keyup', updateText(text))

function updateText(textPath) {
    return function() {
        textPath.tspan(this.value)
    }
}

выполняем npm start
смотрим http://127.0.0.1:8080/


найденные с ходу ошибки: введите сюда описание изображения

как мы видим, в функцию viewbox передано 4 элемента, в то время как в types принимается всего один

https://github.com/svgdotjs/svg.js/blob/ceaf24d5/svg.js.d.ts#L143

далее, в чэйнинге

text
    .path()
    .animate()
    .plot()
    .loop()

функция animate возвращает объект Animation из которого вызывается функция plot
в то время как в types она отсутствует https://github.com/svgdotjs/svg.js/blob/ceaf24d5/svg.js.d.ts#L930


резюмируя

у вас есть два пути:

  1. использовать как есть/ писать на гитхаб/ допиливать типы
  2. создать новый вопрос 'какие библиотеки для svg поддерживаются typescript' с меткой svg typescript
5
  • Спасибо большое за содержательный ответ! К счастью, мне повезло, и я нашел npm пакеты для svg.js и плагинов к нему
    – Klimbo
    Commented 10 мар. 2018 в 14:29
  • текст после картинки повествует о найденных мной ошибках в файле типов ` "svg.js": "2.4.0"`. а так, рад за вас. для jq тоже есть типы, вроде
    – qwabra
    Commented 10 мар. 2018 в 14:52
  • Нет, к сожалению не работает даже с nmp пакетами. VS Code ничего не подсказывает. Очень жаль, очень много плагинов для этой библиотеки, которые мне были нужны. Пойду создавать новый вопрос
    – Klimbo
    Commented 10 мар. 2018 в 15:13
  • @Klimbo, если вы работаете с картами, возможно вам нужны библиотеки для карт а не svg ..
    – qwabra
    Commented 10 мар. 2018 в 15:21
  • Я не работаю с картами. Библиотека нужна для след. задачи: Пользователь зажимает ЛКМ, отводит мышь, за мышью рисуется окружность, чтобы окружность перестала следовать за курсором, пользователь отпускает ЛКМ. Затем пользователь может навести мышь на дугу окружности и зажать ЛКМ, если он будет двигать мышь, то центр окружности должен оставаться на месте, а радиус должен изменяться (расстояние от центра до курсора). И такую процедуру пользователь может повторять неограниченное кол-во раз.
    – Klimbo
    Commented 10 мар. 2018 в 15:27

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.