Мальчик, я передал вам этот API-интерфейс плагина VSCode, которым я дорожил.

внешний интерфейс JavaScript Visual Studio Code
Мальчик, я передал вам этот API-интерфейс плагина VSCode, которым я дорожил.

VSCode - это редактор, который мы используем каждый день. Мы будем использовать множество плагинов VSCode, некоторые из которых более мощные, но очень простые в реализации. Сегодня я познакомлю вас с таким API.

прохождение концепции

Давайте сначала разберемся с несколькими понятиями:

Каждое такое окно редактирования называется редактором иvscode.window.visibleTextEditorsВы можете получить все видимые экземпляры редактора.

Что в редакторе?

Конечно, то, что редактируется в редакторе, — это документ, черезeditor.documentВы можете получить образец документа.

документ может, в свою очередь, пройтиdocument.getText()Получить содержимое документа.

Далее идет простой, но мощный API:editor.setDecorations(decoration, range)

Его роль заключается в том, чтобы добавить некоторые CSS из определенной позиции в определенную позицию в редакторе, то есть определенный диапазон Эти CSS называются украшениями.

API для создания декораторовwindow.createTextEditorDecorationType:

vscode.window.createTextEditorDecorationType({
  textDecoration: 'line-through', 
})

Параметр css, можно добавлять разные стили. Вы также можете добавить псевдоэлементы (до или после):

vscode.window.createTextEditorDecorationType({
  before: {
    contentText:'',
    textDecoration: `none;`
  },
})

Где эти украшения? Задается вторым диапазоном параметров, который определяется двумя позициями в документе.

const startPos = activeEditor.document.positionAt(ndex1);
const endPos = activeEditor.document.positionAt(index2);
const range = new vscode.Range(startPos, endPos);

Таким образом, вы можете добавлять украшения в редактор.

Давайте соединим вещи, упомянутые выше:

Получите документ из редактора, затемdocument.getText()Получите текстовое содержимое, найдите две позиции position1 и position2 и создайте его в диапазоне, затем пройтиeditor.setDecorationsДобавьте к этому диапазону оформление, оформление — это различные css или псевдоэлементы.

Можно сказать, это все? Что такого мощного в этом API.

Тогда давайте посмотрим, что может сделать этот API.

Применение декораторов

предварительный просмотр цвета css

Вы никогда не использовали плагин для подсветки цвета css vscode-color-highlight.Реализация этого заключается в том, чтобы сопоставить диапазон, в котором находится цвет, а затем добавить украшение перед псевдоэлементом, чтобы добавить цвет фона.

Изображение выше — это функция предварительного просмотра цвета, которую я делал раньше, и она также поддерживает градиентные цвета.

Встроенная информация о коммите для gitlens

gitlens, пожалуй, самый популярный плагин VSCode.Как он отображает информацию о коммите в редакторе?

Да еще и через декоратор.

Редактировать спецэффекты

Так же плагин vscode-power-mode который ставит фейерверк в редактор, такой классный эффект тоже на основе декоратора. Принцип заключается в том, чтобы добавить псевдоэлемент before при изменении содержимого документа, поставить gif-изображение и через некоторое время исчезнуть.

Эти функции основаны на той, которую мы узнали ранее.editor.setDecorationsAPI простой и мощный.

Суммировать

Каждое окно редактирования в VSCode является экземпляром редактора, доступ к которому можно получить черезvscode.window.visibleTextEditorsПолучить все видимые редакторы.

Есть документ в редакторе, а дальше можно пройтиdocument.getTextПолучите текст.

После этого путем регулярного сопоставления текста определяется область оформления, а затем создается объект оформления, то есть кусок CSS. Затем вы можете использовать этот простой и мощный API:editor.setDecorationsУкрасил редактор.

На самом деле, в функциях VSCode, которые мы обычно используем, есть много декораторов, таких как предварительный просмотр цвета css, встроенная информация о вине git и эффекты редактирования, такие как фейерверк.

Молодой человек, я буду обучать вас этому API-интерфейсу плагина VSCode, которым я дорожу.Единственное, что может вас ограничивать, должно быть ваше воображение.

Категории