«Обновите» редактор VS Code, напишем плагин вместе!

GitHub Открытый исходный код
«Обновите» редактор VS Code, напишем плагин вместе!

Автор: HelloGitHub-Xiaoxia (впервые опубликовано вОфициальный аккаунт HelloGitHub)

Для разработчика, который полагается на код как на «живой», независимо от того, хорошо написаны ошибки или нет, редактор действительно важен! Тогда вам будет знакомо название Visual Studio Code. Как старый и мощный редактор, его преимущества заключаются в следующем:

  • Во-первых, его дизайнером является известный инженер Эрик Гамма. Двадцать лет назад он был одним из авторов книги Design Patterns: Fundamentals of Reusable Object-Oriented Software, книги, статус которой в сообществе разработчиков считается путеводной звездой для разработки объектно-ориентированного программного обеспечения.

  • Во-вторых, для тех, кто пишет JavaScript, хотя на рынке есть много редакторов разного размера, таких как sublime, atom, webstorm и т. д., разница между VS Code и ними в том, что он с открытым исходным кодом, чем sublime, быстрее, чем атом , и быстрее, чем зажигалка webstorm.

1. Введение

Полное название VS Code Visual Studio Code — это редактор с открытым исходным кодом от Microsoft, получивший 115 000 (110 000) звезд на GitHub. Он написан на основе TypeScript, с общим объемом кода более 300 000, масштабного известного проекта с открытым исходным кодом.

адрес проекта:GitHub.com/Microsoft/V…

Давайте сначала кратко рассмотрим позиционирование его продукта ~ Вы можете видеть, что позиционирование автора проекта принадлежитЛегкий редактор, поэтому он должен быть легким, отзывчивым, подходящим для нескольких языков и так далее. Возможности редактирования VS Code исходят из программы Microsoft, которая называетсяmonacoВеб-редактор с открытым исходным кодом для , и Electron для кроссплатформенных нужд: кроссплатформенное настольное приложение, созданное с использованием JavaScript, HTML и CSS.

Именно из-за четкого позиционирования и направления будут более четкие границы. Может быть, вам интересно, как он поддерживает несколько языков и является легким? Затем мы должны взглянуть на его многопроцессорную архитектуру.

  • VS Code имеет запись основного процесса, которая отвечает за некоторые глобальные задачи, такие как управление окнами, взаимодействие между процессами и автоматические обновления;
  • Процесс рендеринга, как следует из названия, отвечает за рендеринг веб-страницы;
  • Хост-процесс подключаемого модуля, код каждого подключаемого модуля выполняется в независимом и изолированном хост-процессе среды Node, и подключаемый модуль не может получить доступ к пользовательскому интерфейсу;
  • Процесс отладки, используемый для отладки;
  • Language Services, важное специальное расширение, обеспечивающее возможности редактирования для многих языков программирования, а также автозаполнение, проверку ошибок (диагностику), переход к определению и многие другие языковые функции, поддерживаемые VS Code.

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

Давайте сначала посмотрим на возможности VS Code, которые мы можем расширить.

Вам когда-нибудь не терпелось самостоятельно создать плагин VS Code? Давайте возьмем вас за создание плагина VS Code начального уровня.

2. Подготовка окружающей среды

Сначала вы делаетеNode.jsа такжеGit.

Во-вторых, «глобально (-g)» устанавливает Yeoman (современный инструмент для создания шаблонов веб-приложений) и VS Code Extension Generator, два официально назначенных шаблона инструментов (инструменты для создания проектов подключаемых модулей VS Code).

npm install -g yo generator-code

Установка считается успешной, когда вы видите следующее сообщение:

3. Инициализируйте структуру проекта

После того, как среда зависимостей будет готова, мы будем использовать инструмент Yeoman, который поможет нам быстро создать структуру проекта! Может быть много людей, которые не знакомы с этим скаффолдингом.Проще говоря, Yeoman — это общая система скаффолдинга, которая позволяет создавать приложения любого типа. Вы можете использовать его, чтобы быстро начать новые проекты. Так что не только JavaScript, Java, Python, C# и т. д. могут использовать его для генерации проектов, если есть соответствующий генератор. Далее переходим к следующему шагу, вводим в командной строкеyo code.

Разберем смысл этих вариантов, по сути, так же, как и буквальное значение, сверху вниз:

  • Новый плагин (машинопись)
  • Новый плагин (JavaScript)
  • новые цвета темы
  • поддержка нового языка
  • новый фрагмент кода
  • новая привязка ключ-значение
  • новый пакет плагинов
  • Новые языковые пакеты (локализация)

Вы можете видеть, что этот инструмент поддерживает создание нескольких типов проектов.Сегодня мы начнем с расширения, поэтому разница между первым и вторым заключается в том, что если вы можете использовать TypeScript, выберите первый, который также официально рекомендуется. Первый: если вы не хотите писать всевозможные хлопотные определения типов и проверки типов, выберите второй вариант JavaScript. На этот раз мы выбираем JavaScript, чтобы сделать простое введение, затем вам нужно будет заполнить ряд информации об инициализации следующим образом:

Примечания следующие:

  • Какой тип расширения вы хотите создать?
  • Как называется ваше расширение?
  • Какой идентификатор вашего расширения?
  • Каково описание вашего расширения?
  • Инициализировать репозиторий git?
  • Какой менеджер пакетов использовать? (потому что мы установили npm, поэтому выбирайте npm, если у вас есть yarn, вы также можете выбрать yarn)
  • Какой менеджер пакетов использовать (для загрузки различных пакетов npm)

В-четвертых, сделайте простой плагин VS Code

Приготовления почти закончены! Затем мы собираемся запустить "зеленый кожаный поезд".

Перейдите в каталог файлов, который вы только что создалиcd test-extension, Каталог файлов:

Может быть, вы думаете, что каталог файлов, вы можете увидеть его с первого взгляда.Разве это не просто информация о конфигурации или описания проекта, но информация о конфигурации здесь «очень важна» x3, настолько важна, что у вас может быть на одну конфигурацию меньше или конфигурация неверна, и функция просто не может выйти. Итак, давайте поговорим немного об информации здесь.

Сначала вы можетеpackage.jsonВ файле вы можете увидеть значения, которые вы установили на предыдущем шаге.Основные значения конфигурации следующие.Здесь есть небольшой момент,на который стоит обратить внимание.Если ваш VS Code устарел и не может быть обновлен до последний, вы можете поставить следующееenginesНабор версий ниже, например, я изменил его на^1.52.0Убедитесь, что он совместим с текущим редактором VS Code:

{
  "name": "test-extension", // 插件的名字
  "displayName": "test-extension", // 在插件市场展示的名字
  "description": "vscode extension sample", // 插件描述
  "version": "0.0.1", // 插件版本
  "engines": { // 最低支持 vscode 的版本
    "vscode": "^1.52.0"
  },
  "categories": [ // 插件的类别，用于在插件市场做区分
    "Other"
  ],
  "activationEvents": [ // 插件激活的事件列表，可以有多个触发机制，所以是数组形式
    "onCommand:test-extension.helloWorld"
  ],
  "main": "./extension.js", // 插件主入口
  "contributes": { // 贡献点，用于拓展插件功能的配置项，这里不会细讲，先用 command 举例
    "commands": [
      {
        "command": "test-extension.helloWorld",
        "title": "Hello World"
      }
    ]
  },
  "scripts": {
    "lint": "eslint .",
    "pretest": "npm run lint",
    "test": "node ./test/runTest.js"
  },
  "devDependencies": {
    "@types/vscode": "^1.55.0",
    "@types/glob": "^7.1.3",
    "@types/mocha": "^8.0.4",
    "@types/node": "^12.11.7",
    "eslint": "^7.19.0",
    "glob": "^7.1.6",
    "mocha": "^8.2.1",
    "typescript": "^4.1.3",
    "vscode-test": "^1.5.0"
  }
}

После ознакомления с конфигурацией давайте взглянем на входной файл плагина.extsnsion.js, в нем две основные функции, одна из нихactivateУказывает на обработку при активации подключаемого модуля, как правило, некоторые операции инициализации, такие как команды регистрации;deactivate, что указывает на обработку, выполняемую при деактивации плагина. На самом деле, вы также должны чувствовать тело, когда слышите имя. Это две функции ловушки в жизненном цикле плагина.

// 引了 vscode 这个模块，这样你就可以用它里面的很多很多功能啦
const vscode = require('vscode');

/**
 * @param {vscode.ExtensionContext} context
 */
function activate(context) {

  console.log('Congratulations, your extension "test-extension" is now active!');

  let disposable = vscode.commands.registerCommand('test-extension.helloWorld', function () {
    vscode.window.showInformationMessage('Hello World from test-extension!');
  });

  context.subscriptions.push(disposable);
}

function deactivate() {}

module.exports = {
  activate,
  deactivate
}

Давайте проанализируем приведенный выше код, вы можете увидеть внутриregisterCommanВы чувствовали себя знакомым с заказом? Правильно, это вышеpackage.jsonтот, что упоминается вcommand, давайте посмотрим на это вместе:

...,
 // package.json
 "contributes": { // 贡献点，用于拓展插件功能的配置项，这里不会细讲，先用 command 举例
    "commands": [
      {
        "command": "test-extension.helloWorld",
        "title": "Hello World"
      }
    ]
  },
...

...
// extension.js
function activate(context) {
  console.log('Congratulations, your extension "test-extension" is now active!');

  let disposable = vscode.commands.registerCommand('test-extension.helloWorld', function () {
    vscode.window.showInformationMessage('Hello World from test-extension!');
  });

  context.subscriptions.push(disposable);
}
...

Это кажется интуитивно понятным? существуетpackage.jsonустановить внутриcommandценность, то естьextension.jsвregisterCommandценность . Что означают эти строки команд? Давайте запустим его вместе и посмотрим:

Он откроет для вас новый редактор VS Code, и плагин будет загружаться только в этот редактор. Теперь мы используем ярлык вызова (MacOS) command+p , введите>Hello World(нечувствительный к регистру):

Нажимаем Enter, в неприметном уголке в правом нижнем углу вы найдете вот такой подсказку:

Я считаю, что вы, умные люди, должно быть, поняли это, объединив код, верно! Я не знаю, есть ли у вас этот вопрос, тот, что вышеconsole.logгде искать? Не волнуйтесь, вернемся в редактор кода плагина, посмотрите внимательно на следующую сторону, она появится после того, как мы введем вышеуказанную команду, потому что вpackage.jsonВнутри мы настраиваем время активации плагинаonCommand:test-extension.helloWorld:

Тогда мы теперь придерживаемся идеи «преднамеренного обучения» и меняем приведенный выше код, например, помещаемtest-extensionизменить наtest:

...,
// package.json
"activationEvents": [
    "onCommand:test.helloWorld"
],
...,
"contributes": {
  "commands": [
    {
      "command": "test.helloWorld",
      "title": "Hello World"
    }
  ]
},
...

// extension.js
...
function activate(context) {

  console.log('我在这里！！');

  let disposable = vscode.commands.registerCommand('test.helloWorld', function () {
    vscode.window.showInformationMessage('我改变了 command 的名字!');
  });

  context.subscriptions.push(disposable);
}
...

Следуйте методу триггера, упомянутому выше, снова и обнаружите, что это все еще возможно! Таким образом, имя здесь — это просто пространство имен, вы можете изменить его на любое имя, которое вы хотите применить к более сложным системам плагинов. Поскольку это пространство имен, вам может не понадобиться этот префикс.

5. Реализуйте собственный плагин

Так много было введено ранее, вы заметили, что эта система на самом деле не сложная, есть большие ребята, прокладывающие путь вперед, на самом деле нам нужно просто «заполнить пробелы» по правилам, тогда мы сейчас будем внедрять небольшая функция - плюс кнопка A и событие ее нажатия.

изменить нашpackage.jsonТаким образом, поскольку в настоящее время я хочу, чтобы подключаемый модуль загружался, событие нажатия кнопки было подписано, поэтому здесь мы можем поместитьactivationEventsизменить на*, чтобы наш плагин мог активировать и регистрировать события с самого начала:

...,
"activationEvents": [
        "*",
],
"contributes": {
  "commands": [
    {
      "command": "test.helloWorld",
      "title": "Hello World"
    },
    // 注册一下按钮点击的事件，再配一个小图标
    {
      "command": "test.button",
      "title": "按钮",
      "icon": {
        "light": "./media/light/preview.svg",
        "dark": "./media/dark/preview.svg"
      }
    }
  ],
  // 在这里加一下下面这个配置
  "menus": {
    "editor/title": [
      {
        "command": "test.button",
        "group": "navigation"
      }
    ]
  }
},
...

потом вернемся к нашемуextension.jsВнутри добавлено простое напоминание о сообщении:

function activate(context) {
  console.log('我在这里！！');
  let disposable = vscode.commands.registerCommand('test.helloWorld', function () {
    vscode.window.showInformationMessage('我改变了 command 的名字!');
  });
  // 新增一个按钮的点击命令操作内容
  let button = vscode.commands.registerCommand('test.button', function () {
    vscode.window.showInformationMessage('按钮点击');
  });
  // 记得这个新的命令也要放进去订阅一下
  context.subscriptions.push(disposable, button);
}

Взгляните на эффект:

Легко ли настроить стиль VS Code? Итак, давайте проанализируем то, что мы сделали выше. Во-первых, мы модифицировалиpackage.jsonв конфигурации добавлениеmenusЧто это за меню? Ответ в меню. Выберите определение пункта меню, которое содержит команду, которая должна быть вызвана, и условия, которые должны отображаться (when), так что можно еще добавить отображение для отображения логики этого пункта меню, такое как мы указали в открытомjavascriptЭта кнопка отображается только в том случае, если файл:

{
  "contributes": {
    "menus": {
      "editor/title": [
        {
          "when": "resourceLangId == javascript",
          "command": "test.button",
          "group": "navigation"
        }
      ]
    }
  }
}

а такжеgroupЕго значение используется для определения сортировки и группировки пунктов меню. Картинка с официального сайта, обозначающая разныеgroupОтношения порядка, которые существуют между, конечно, этим меню, не те, которые мы написали выше, аeditor/context, поэтому между разными менюgroupНа самом деле есть тонкие различия, но в целом одинаковые, иnavigationПриоритет отображения самый высокий:

Мы также можем добавить это, чтобы увидеть:

"menus": {
  "editor/title": [
    {
      "command": "test.button",
      "group": "navigation",
      "when": "resourceLangId == javascript"
    }
  ],
    "editor/context": [
      {
        "command": "test.button",
        "group": "navigation",
        "when": "resourceLangId == javascript"
      }
    ]
}

Эффект тот же:

Если вам интересны другие меню, то здесь я просто "перевожу" содержимое официального сайта (только общие меню не все):

Название пункта меню конфигурации расположение меню
commandPalette Палитра глобальных команд
explorer/context Контекстное меню проводника
editor/context Контекстное меню редактора, вызываемое правой кнопкой мыши
editor/title Строка заголовка редактора, отображение текста без настройки изображений
editor/title/context Контекстное меню заголовка редактора, вызываемое правой кнопкой мыши
debug/callstack/context Контекстное меню для просмотра стека отладки
debug/toolbar Панель инструментов отладки
scm/title Меню заголовка SCM
view/title Посмотрите на заглавное меню
touchBar Сенсорная панель macOS
timeline/title Строка меню заголовка представления временной шкалы
extension/context Контекстное меню представления расширения

6. Сделайте вывод

Как видно из простого примера выше, VS Code не только поддерживает команды, которые мы хотим настроить, но и позволяет настраивать редактор в «ограниченном диапазоне». Почему он ограничен? Потому что, согласно официальному сайту, текущая система плагинов имеет следующие ограничения:

Плагины не имеют возможности доступа к DOM пользовательского интерфейса VS Code. Таким образом, вы не можете применить пользовательский CSS к VS Code или добавить элементы HTML к расширениям пользовательского интерфейса VS Code. Такими ограничениями являются:

  • Убедитесь, что операция пользователя находится в контролируемом диапазоне, и обеспечьте согласованность операции.
  • Предотвратите влияние на некоторые существующие плагины изменения базовой веб-технологии.
  • Убедитесь, что разработчики могут продолжать итерацию на основе исходных плагинов, как обычно, вместо того, чтобы нарушать исходные правила и заново учиться.

На самом деле, наш сегодняшний контент — это лишь малая часть расширения рабочей области.Чтобы изучить эту огромную систему, мы должны продолжать усердно учиться! В следующий раз давайте перейдем к разделу «Функции декларативного языка» и захотим узнать, как выполняются автоматические предложения и дополнения в редакторе?

Сфокусируйся наHelloGitHubОфициальный аккаунт получает первое обновление.

Есть больше представлений о проектах с открытым исходным кодом и ценных проектов, которые ждут вас.

Категории