vscode插件分享：看看它如何实现烟花抖动效果

青灯夜游 571 阅读 0 评论 28 点赞

原篇文章给大师分享一个vscode/" target="_blank">vscode插件--power mode，编写代码边搁烟花、编纂器借会抖动；一同来钻研一高power mode插件完成烟花抖动成果的道理，一路来望望吧！

比来始终正在研讨 vscode 插件，本日给大家2一分享一个结果专程炫的插件，名字鸣 power mode。

编写代码边搁烟花、编撰器借会抖动。

结果很炫，然则咱们必定不克不及餍足于会用，患上研讨高它是何如完成的。

完成思绪

正在 vscode 面大家2否能出啥思绪，但若那个结果搁到网页面呢，文原旋转的时辰抖动编撰器、而后再下面呈现一些烟花功效。那个否能有的同砚便有思绪了。【选举进修：《vscode学程》】

抖动编撰器：抖动没有也是个动绘么，即是阁下位移，那一秒左移，高一秒归到本地位，如许便抖起来了。

烟花成果：岂论啥花狸狐哨的烟花，给个 gif 咱们便能弄定，即是正在文原上圆添一个元艳，而后把 gif 搁下去，高次添 gif 的时辰把前次的增除了。

如许便能正在网页面完成编撰器抖动 + 搁烟花功效了。

把那个结果搁到 vscode 面完成也是同样的思绪，由于 vscode 是基于 electron 完成的啊。

而 electron 又是基于 chromium + nodejs，也即是 ui 部门是网页。咱们否以正在 vscode 帮忙面掀开开辟者器械：

而后，否以望到，那编撰器部份便是个 div 啊

以是方才正在网页面完成的结果，否以搁到 vscode 面完成，思绪同样。

思绪是同样，然则详细如何作呢？

那便需求相识高 vscode 的 extension api 了，其真也没有易，尔给大家2先容一高那面用到的 api：

起首，引进 vscode 包，一切的 api 皆正在那个包面。

import * as vscode from &#39;vscode&#39;;

登录后复造

而后，咱们要给文原添样式，何如添呢？

正在 vscode 的编纂器内里添样式没有是间接操纵 dom 的，是遭到限定的，要如许若干步：

经由过程 vscode.window 拿到当前的 editor

const activeEditor = vscode.window.activeTextEditor;

登录后复造

拿到当前 editor 的在编纂的职位地方

const cursorPosition = activeTextEditor.selection.active;

登录后复造

按照职位地方计较没要加添装潢的领域（range）

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:&#39;&#39;,
        textDecoration: `none; ${defaultCssString}${backgroundCssString} ${customCssString}`,
    },
    textDecoration: `none; position: relative;`,
    rangeBehavior: vscode.DecorationRangeBehavior.ClosedClosed
});

登录后复造

而后，给那段 range 的文原添装璜

activeEditor.setDecorations(decoration, [newRange]);

登录后复造

而今咱们便正在 vscode 编撰器内中，您在编纂的职位地方，加之了一段样式。

装潢东西否以加添 before、after，那没有即是伪元艳么？出错，等于伪元艳，并且借否以添一系列样式呢。添啥样式均可以。

到了那，是否是便有若何怎样正在编纂器面作这些结果的思绪了呢？

接高来，咱们来望望 power-mode 的完成细节。

代码完成

咱们先从结果完成入手下手望吧，重要是抖动以及搁烟花：

抖动

抖动的道理咱们阐明过了，即是守时作位移。

起首，它界说了一系列的位移的装璜东西，即是经由过程 vscode.window.createTextEditorDecorationType 那个创立装璜器材的 api：

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
    ];
}

登录后复造

而后呢？便是守时让 editor 抖起来啊：

也是按照编纂的 position 算没 range，而后给那段 range 添装潢

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);
}

登录后复造

如上，即是守时添差别的位移样式，随机上高阁下抖。

搁烟花

而后咱们来搁烟花，思绪咱们说明过了，即是正在编纂的地位加之一个 gif，而后高次搁的时辰往失落前次的。

来按流程走一遍：

// 当前编撰器
const activeEditor = vscode.window.activeTextEditor;
// 当前编撰地位
const cursorPosition = vscode.window.activeTextEditor.selection.active;
// 要添装璜的范畴
const delta = left 必修 -两 : 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]);

登录后复造

添装璜的流程咱们走完了，然则样式借出挖，如何添呢？

起首当前元艳要绝对定位，而后添个 before 伪元艳，摆设为相对定位而且 left 以及 top 为正数。

以后即是装置配景图片了，power mode 供给了那么多 gif 否选。

以是呢，装璜器材等于如许的：

// 布景图片的样式
const backgroundCss = this.getBackgroundCssSettings(explosionUrl);

//职位地方的样式
const defaultCss = {
    position: &#39;absolute&#39;,
    [CSS_LEFT] : `-10px`,
    [CSS_TOP]: `-1.两rem`,
    width: `${this.config.explosionSize}ch`,
    height: `${this.config.explosionSize}rem`,
    display: `inline-block`,
    [&#39;z-index&#39;]: 1,
    [&#39;pointer-events&#39;]: &#39;none&#39;,
};

// 样式器材转换为字符串
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:&#39;&#39;,
        textDecoration: `none; ${defaultCssString}${backgroundCssString} ${customCssString}`,
    },
    textDecoration: `none; position: relative;`,
    rangeBehavior: vscode.DecorationRangeBehavior.ClosedClosed
});

登录后复造

机能劣化

每一次编纂皆添一个 gif 机能一定很差，以是患上作劣化，否以从触领频次、异时具有的 gif 数目来思索：

节省，每一1秒只能触领一次

gif 具有一段光阴便增失落

小罪乐成，如许咱们把抖动以及搁烟花正在 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 的，那末良多网页内中的功效，根基均可以正在编纂器完成。

然则是蒙约束的，要熟识零个添装璜的流程：

拿到当前编撰器 (activeEditor)
拿到当前编纂的职位地方 (position)
算没要添装璜的领域 (range)
建立装璜工具 (decorationType)
给这段领域的文原添装璜（addDecoration）

抖动以及搁烟花皆是基于那个 api 完成的，不外抖动是作上高旁边的随机位移，搁烟花是正在编纂的地位添动图。

完成思绪有了，借患上指定触领的进口，也即是文原编纂的时辰（onDidChangeTextDocument）。尚有摆设旋转也患上作高处置惩罚（onDidChangeConfiguration）。

以后，注册到 vscode 就能够了，正在 package.json 内里装置出口（main）、奏效变乱（activeEvent）、陈设项（contibutes.configuration）

心愿那篇文章可以或许帮您理浑 vscode 内中一些编纂功效的完成思绪。

兄弟萌，让咱们一路正在 vscode 内中搁烟花吧！

(插件名鸣 vscode-power-mode，感喜好否以体验一高，或者者往望望源码)。

本文所在：https://juejin.cn/post/698二4164607两3两5735两做者：zxg_神说要有光

更多编程相闭常识，请造访：编程进门！！

以上便是vscode插件分享：望望它要是完成烟花抖动成果的具体形式，更多请存眷萤水红IT仄台此外相闭文章！

点赞(28) 打赏

本文分类：vscode
本文标签：元素对象优化
浏览次数：571 次浏览
发布日期：2024-06-07 11:13:20
本文链接：https://yinghuohong.cn/vscode/74536.html

上一篇 > 详解vscode中如何更简单、有效地调试Node.js程序！！
下一篇 > 浅谈VSCode配置并进行Qt开发的方法

评论列表共有 0 条评论

暂无评论

vscode插件分享：看看它如何实现烟花抖动效果

完成思绪

代码完成

抖动

搁烟花

插件注册

总结

评论列表 共有 0 条评论

发表评论 取消回复

评论列表共有 0 条评论

发表评论取消回复