Блог

Главная - Вопросы по программированию - VS Code создает расширение, которое открывает новое окно для визуализации

VS Code создает расширение, которое открывает новое окно для визуализации

#visual-studio-code #vscode-extensions

Вопрос:

для моей текущей работы я пытаюсь разработать инструмент поддержки в VS-коде. Для этого я хочу написать расширение, которое может отображать линии и пересечения, определенные в файле с пользовательским синтаксисом, в виде холста. В моих текущих идеях я хотел бы, чтобы у LaTeX live была кнопка «Пуск», которая затем открывает новое окно и интерпретирует мой файл.

Я не знаю, с чего начать поиск, я получаю только существующие предложения по расширению, и в документации VS Code я тоже не нашел обходного пути. Любые идеи, шаблоны или ключевые слова, которые я могу найти, будут очень признательны.

Комментарии:

1. Взгляните на веб -просмотры. Они являются рекомендуемым способом реализации пользовательских представлений в коде VS. Может потребоваться реализовать команду , которая запускает создание файла изображения или HTML, отображаемого в пользовательском представлении. Команда, например, получит доступ к содержимому текущего активного текстового документа, который содержит некоторое определение вашего синтаксиса.

2. Спасибо. Веб-просмотры, похоже, являются ответом. Я постараюсь это сделать

Ответ №1:

Обновление:
Я добился большого прогресса с расширением. Если у кого-то есть аналогичная цель, я действительно могу порекомендовать прочитать документ.
Документ Webview: https://code.visualstudio.com/api/extension-guides/webview

Также очень помогло расширение Microsoft Markdown на Github: https://github.com/mjbvz/vscode-markdown-mermaid

Теперь перейдем к моей процедуре:

1. кнопка, открывающая предварительный просмотр
Это может быть очень легко добавлено в пакет.json:

 "commands": [
        {
            "command": "extension.showPreview", // or whatever you want to call it
            "title": "Your Title",
            "category": "Your Category",
            "icon": {
                "light": "/assets/dark-preview.svg", // your path to light and darkmode icon
                "dark": "/assets/light-preview.svg"
            }
        },

Чтобы придать этой кнопке функцию, теперь нам нужно зарегистрировать новую команду в функции активации

 export function activate(context: vscode.ExtensionContext) {
    // ...
    context.subscriptions.push(
        vscode.commands.registerCommand('extension.showPreview', () => { // the name has to be the same as in the package.json
                VisualizeConnectorPanel.createOrShow(context.extensionUri); // I created a class with the template code from the Webview docu of VSCode
    })
    );
    // ...
}

2. Откройте webview со всеми ресурсами должным образом
Убедитесь, что разрешены все локальные ресурсы, необходимые для расширения.
Я создаю папку «js» со всеми необходимыми файлами JavaScript. И со следующим кодом (из шаблона docu) вы можете разрешить эти ресурсы:

 function getWebviewOptions(extensionUri: vscode.Uri): vscode.WebviewOptions 
{
  return {
    // Enable javascript in the webview
    enableScripts: true,
    // And restrict the webview to only loading content from our extension's `js` directory.
    localResourceRoots: [vscode.Uri.joinPath(extensionUri, 'js')] 
    // Notice that I had to concatinate the path with the js folder to allow the js files in the folder
  };
}

Кроме того, сценарии должны быть включены в HTML.
С помощью этой метаинформации вы разрешаете загружать изображения, css и js (документ VSCode).:

 <meta http-equiv="Content-Security-Policy" content="default-src 'none'; style-src ${webview.cspSource}; img-src ${webview.cspSource} https:; script-src 'nonce-${nonce}';">

Теперь файлы JavaScript должны быть встроены в nouce, и это допустимое веб-представление:

 <body>
    <!-- .... Generate the Script Uri just like in the VSCode examplel code -->

    <script nonce="${nonce}" src="${scriptUri}"></script>

    <!-- .... -->
</body>
Метки: ,