Maison >outils de développement >VSCode >Partage de plug-in vscode : découvrez comment il obtient l'effet de gigue du feu d'artifice
Cet article partagera avec vous un plug-in vscode - mode d'alimentation. Lors de l'écriture du code, un feu d'artifice se déclenchera et l'éditeur tremblera. Étudions le principe du plug-in du mode d'alimentation pour obtenir l'effet de gigue du feu d'artifice. . Jetons un coup d'oeil !
J'ai étudié les plug-ins vscode récemment, et aujourd'hui j'aimerais partager avec vous un plug-in avec un effet particulièrement sympa, appelé mode puissance.
Déclenchez un feu d'artifice pendant l'écriture du code, et l'éditeur tremblera.
L'effet est très éblouissant, mais il ne faut pas se contenter de savoir l'utiliser. Il faut étudier comment il est mis en œuvre.
Vous n'avez peut-être pas beaucoup d'idées en vscode, mais si cet effet est placé sur une page Web, l'éditeur tremblera lorsque le texte change, puis des effets de feu d'artifice apparaîtront dessus. Certains élèves peuvent avoir des idées à ce sujet. [Apprentissage recommandé : "tutoriel vscode"]
抖动编辑器
: Secouer n'est-il pas aussi une animation ? Cela signifie un déplacement vers la droite cette seconde et revient à la position d'origine la seconde suivante, donc ça démarre. secouer.
烟花效果
: Quel que soit le feu d'artifice sophistiqué, donnez-nous simplement un gif et nous pourrons le faire. Ajoutez simplement un élément au-dessus du texte, puis mettez le gif dessus et supprimez le dernier la prochaine fois que vous ajouterez un gif. .
De cette façon, l'effet de gigue de l'éditeur + feu d'artifice peut être obtenu sur la page Web.
La même idée est utilisée pour implémenter cet effet dans vscode, car vscode est basé sur l'électron.
Et electron est basé sur chrome + nodejs, c'est-à-dire que la partie UI est une page Web. On peut ouvrir les outils de développement dans l'aide de vscode :
Ensuite, vous pouvez voir que la partie éditeur est un div
Donc l'effet qui vient d'être obtenu sur la page web peut être implémenté dans vscode, de même idée.
L'idée est la même, mais comment le faire concrètement ?
Cela nécessite de comprendre l'API d'extension de vscode. En fait, ce n'est pas difficile. Laissez-moi vous présenter l'API utilisée ici :
Tout d'abord, présentez le package vscode.
import * as vscode from 'vscode';
Ensuite, nous devons ajouter des styles au texte. Comment l'ajouter ?
L'ajout de styles dans l'éditeur vscode ne fait pas fonctionner directement le dom, il est restreint. Cela nécessite les étapes suivantes :
const activeEditor = vscode.window.activeTextEditor;
const cursorPosition = activeTextEditor.selection.active;
const newRange = new vscode.Range( cursorPosition.with(cursorPosition.line, cursorPosition.character), cursorPosition.with(cursorPosition.line, Math.max(0, cursorPosition.character + delta)) );
vscode.window.createTextEditorDecorationType({ before: { contentText:'', textDecoration: `none; ${defaultCssString}${backgroundCssString} ${customCssString}`, }, textDecoration: `none; position: relative;`, rangeBehavior: vscode.DecorationRangeBehavior.ClosedClosed });
activeEditor.setDecorations(decoration, [newRange]);
Maintenant nous sommes dans le vscode éditeur, un style est ajouté à la position que vous modifiez.
Les objets de décoration peuvent être ajoutés avec avant et après, n'est-ce pas des pseudo-éléments ? C'est vrai, c'est un pseudo-élément, et vous pouvez également ajouter une série de styles. Vous pouvez ajouter n’importe quel style.
À ce stade, avez-vous une idée sur la façon de créer ces effets dans l'éditeur ?
Ensuite, examinons les détails de mise en œuvre du mode alimentation.
Commençons par l'implémentation des effets, principalement le dithering et les feux d'artifice :
Nous avons analysé le principe du dithering, qui consiste à effectuer des déplacements à intervalles réguliers.
Tout d'abord, il définit une série d'objets de décoration de déplacement, qui est l'API de création d'objets de décoration via vscode.window.createTextEditorDecorationType
:
public activate = () => { this.dispose(); this.negativeX = vscode.window.createTextEditorDecorationType(<vscode.DecorationRenderOptions>{ textDecoration: `none; margin-left: 0px;` }); this.positiveX = vscode.window.createTextEditorDecorationType(<vscode.DecorationRenderOptions>{ textDecoration: `none; margin-left: ${this.config.shakeIntensity}px;` }); this.negativeY = vscode.window.createTextEditorDecorationType(<vscode.DecorationRenderOptions>{ textDecoration: `none; margin-top: 0px;` }); this.positiveY = vscode.window.createTextEditorDecorationType(<vscode.DecorationRenderOptions>{ textDecoration: `none; margin-top: ${this.config.shakeIntensity}px;` }); this.shakeDecorations = [ this.negativeX, this.positiveX, this.negativeY, this.positiveY ]; }
Et alors ? Cela signifie faire trembler l'éditeur à intervalles réguliers :
calcule également la plage en fonction de la position éditée, puis ajoute des décorations à cette plage
private shake = () => { if (!this.config.enableShake) { return; } // 当前 editor const activeEditor = vscode.window.activeTextEditor; // 要抖动的 range,也就是当前行 const xRanges = []; for (let i = 0; i < activeEditor.document.lineCount; i++) { xRanges.push(new vscode.Range(new vscode.Position(i, 0), new vscode.Position(i, 1))); } // 加装饰 if (Math.random() > 0.5) { activeEditor.setDecorations(this.negativeX, []); activeEditor.setDecorations(this.positiveX, xRanges); } else { activeEditor.setDecorations(this.positiveX, []); activeEditor.setDecorations(this.negativeX, xRanges); } if (Math.random() > 0.5) { activeEditor.setDecorations(this.negativeY, []); activeEditor.setDecorations(this.positiveY, this.fullRange); } else { activeEditor.setDecorations(this.positiveY, []); activeEditor.setDecorations(this.negativeY, this.fullRange); } clearTimeout(this.shakeTimeout); this.shakeTimeout = setTimeout(() => { this.unshake(); }, 1000); }
Comme ci-dessus, cela signifie ajouter différents modèles de déplacement à intervalles réguliers, et secouer au hasard, en bas, à gauche et à droite.
Alors déclenchons un feu d'artifice. Nous avons analysé l'idée, qui est d'ajouter un gif en position d'édition, puis de supprimer le dernier la fois suivante.
Passons en revue le processus :
// 当前编辑器 const activeEditor = vscode.window.activeTextEditor; // 当前编辑位置 const cursorPosition = vscode.window.activeTextEditor.selection.active; // 要加装饰的范围 const delta = left ? -2 : 1; const newRange = new vscode.Range( cursorPosition.with(cursorPosition.line, cursorPosition.character), cursorPosition.with(cursorPosition.line, Math.max(0, cursorPosition.character + delta)) ); //创建装饰对象 const decoration = vscode.window.createTextEditorDecorationType(<vscode.DecorationRenderOptions>{ before: { // before 样式 }, textDecoration: `当前元素样式`, rangeBehavior: vscode.DecorationRangeBehavior.ClosedClosed }); // 给该范围加装饰 activeEditor.setDecorations(decoration, [newRange]);
Nous avons terminé le processus d'ajout de décoration, mais le style n'a pas été renseigné. Comment l'ajouter ?
Tout d'abord, l'élément actuel doit être positionné de manière relative, puis ajoutez un pseudo-élément avant, définissez-le sur un positionnement absolu et définissez gauche et haut sur des nombres négatifs.
L'étape suivante consiste à définir l'image d'arrière-plan. Le mode Power propose de nombreux gifs parmi lesquels choisir.
Donc, l'objet de décoration est comme ceci :
// 背景图片的样式 const backgroundCss = this.getBackgroundCssSettings(explosionUrl); //位置的样式 const defaultCss = { position: 'absolute', [CSS_LEFT] : `-10px`, [CSS_TOP]: `-1.2rem`, width: `${this.config.explosionSize}ch`, height: `${this.config.explosionSize}rem`, display: `inline-block`, ['z-index']: 1, ['pointer-events']: 'none', }; // 样式对象转换为字符串 const backgroundCssString = this.objectToCssString(backgroundCss); const defaultCssString = this.objectToCssString(defaultCss); const customCssString = this.objectToCssString(this.config.customCss || {}); // 创建装饰对象 const decoration = vscode.window.createTextEditorDecorationType(<vscode.DecorationRenderOptions>{ before: { contentText:'', textDecoration: `none; ${defaultCssString}${backgroundCssString} ${customCssString}`, }, textDecoration: `none; position: relative;`, rangeBehavior: vscode.DecorationRangeBehavior.ClosedClosed });
Optimisation des performances
La performance de l'ajout d'un gif à chaque fois que vous modifiez est définitivement très mauvaise, vous devez donc l'optimiser, vous pouvez commencer par le fréquence de déclenchement et nombre de gifs qui existent en même temps Venez considérer :
大功告成,这样我们把抖动和放烟花在 vscode 里面实现了一遍。
但是,还得加个触发的入口。
什么时候触发呢?涉及到两个 api:
vscode.workspace.onDidChangeTextDocument(onDidChangeTextDocument);
vscode.workspace.onDidChangeConfiguration(onDidChangeConfiguration);
从怎么触发的,到触发后干什么,我们都清楚了,接下来呢,还要会怎么注册这个插件到 vscode 中。
注册插件就是在 package.json 里面配置一下,指定触发时机:
"activationEvents": [ "*" ]
指定插件入口:
"main": "./out/src/extension",
指定插件的配置:
"contributes": { "configuration": { "title": "Power Mode", "properties": { "powermode.enabled": { "default": false, // 默认值 "type": "boolean",// 值类型 "description": "Enable to activate POWER MODE!!!" } } } }
vscode 基于 electron,而 electron 基于 chromium,所以还是用网页来做 ui 的,那么很多网页里面的效果,基本都可以在编辑器实现。
但是是受约束的,要熟悉整个加装饰的流程:
抖动和放烟花都是基于这个 api 实现的,不过抖动是做上下左右的随机位移,放烟花是在编辑的位置加动图。
实现思路有了,还得指定触发的入口,也就是文本编辑的时候(onDidChangeTextDocument)。还有配置改变也得做下处理(onDidChangeConfiguration)。
之后,注册到 vscode 就可以了,在 package.json 里面配置入口(main)、生效事件(activeEvent)、配置项(contibutes.configuration)
希望这篇文章能够帮你理清 vscode 里面一些编辑效果的实现思路。
兄弟萌,让我们一起在 vscode 里面放烟花吧!
(插件名叫 vscode-power-mode,感兴趣可以体验一下,或者去看看源码)。
原文地址:https://juejin.cn/post/6982416460723257352
作者:zxg_神说要有光
更多编程相关知识,请访问:编程入门!!
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!