狠狠干狠狠久久,久久夜色精品国产,人妻无码αv中文字幕久久琪琪布

本篇文章給大家分享一個(gè)vscode插件–power mode，編寫(xiě)代碼邊放煙花、編輯器還會(huì)抖動(dòng)；一起來(lái)研究一下power mode插件實(shí)現(xiàn)煙花抖動(dòng)效果的原理，一起來(lái)看看吧！

vscode插件分享：看看它如何實(shí)現(xiàn)煙花抖動(dòng)效果

最近一直在研究 vscode 插件，今天給大家一分享一個(gè)效果特別炫的插件，名字叫 power mode。

vscode插件分享：看看它如何實(shí)現(xiàn)煙花抖動(dòng)效果

編寫(xiě)代碼邊放煙花、編輯器還會(huì)抖動(dòng)。

效果很炫，但是我們肯定不能滿足于會(huì)用，得研究下它是怎么實(shí)現(xiàn)的。

實(shí)現(xiàn)思路

在 vscode 里大家可能沒(méi)啥思路，但如果這個(gè)效果放到網(wǎng)頁(yè)里呢，文本改變的時(shí)候抖動(dòng)編輯器、然后再上面出現(xiàn)一些煙花效果。這個(gè)可能有的同學(xué)就有思路了。【推薦學(xué)習(xí)：《vscode》】

抖動(dòng)編輯器：抖動(dòng)不也是個(gè)動(dòng)畫(huà)么，就是左右位移，這一秒右移，下一秒回到原位置，這樣就抖起來(lái)了。

煙花效果：不管啥花里胡哨的煙花，給個(gè) gif 我們就能搞定，就是在文本上方加一個(gè)元素，然后把 gif 放上去，下次加 gif 的時(shí)候把上次的刪除。

這樣就能在網(wǎng)頁(yè)里實(shí)現(xiàn)編輯器抖動(dòng) + 放煙花效果了。

把這個(gè)效果放到 vscode 里實(shí)現(xiàn)也是一樣的思路，因?yàn)?vscode 是基于 electron 實(shí)現(xiàn)的啊。

而 electron 又是基于 chromium + nodejs，也就是 ui 部分是網(wǎng)頁(yè)。我們可以在 vscode 幫助里打開(kāi)開(kāi)發(fā)者工具：

vscode插件分享：看看它如何實(shí)現(xiàn)煙花抖動(dòng)效果

然后，可以看到，這編輯器部分就是個(gè) div 啊

vscode插件分享：看看它如何實(shí)現(xiàn)煙花抖動(dòng)效果

所以剛才在網(wǎng)頁(yè)里實(shí)現(xiàn)的效果，可以放到 vscode 里實(shí)現(xiàn)，思路一樣。

思路是一樣，但是具體怎么做呢？

這就需要了解下 vscode 的 extension api 了，其實(shí)也不難，我給大家介紹一下這里用到的 api：

首先，引入 vscode 包，所有的 api 都在這個(gè)包里。

import?*?as?vscode?from?'vscode';

然后，我們要給文本加樣式，怎么加呢？

在 vscode 的編輯器里面加樣式不是直接操作 dom 的，是受到限制的，要這樣幾步：

通過(guò) vscode.window 拿到當(dāng)前的 editor

const?activeEditor?=?vscode.window.activeTextEditor;

拿到當(dāng)前 editor 的正在編輯的位置

const?cursorposition?=?activeTextEditor.selection.active;

根據(jù)位置計(jì)算出要添加裝飾的范圍（range）

const?newRange?=?new?vscode.Range( ????cursorPosition.with(cursorPosition.line,?cursorPosition.character), ????cursorPosition.with(cursorPosition.line,?Math.max(0,?cursorPosition.character?+?delta)) );

創(chuàng)建裝飾對(duì)象

vscode.window.createTextEditorDecorationType({ ????before:?{ ????????contentText:'', ????????textDecoration:?`none;?${defaultCssString}${backgroundCssString}?${customCssString}`, ????}, ????textDecoration:?`none;?position:?relative;`, ????rangeBehavior:?vscode.DecorationRangeBehavior.ClosedClosed });

然后，給這段 range 的文本加裝飾

activeEditor.setDecorations(decoration,?[newRange]);

現(xiàn)在我們就在 vscode 編輯器里面，你正在編輯的位置，加上了一段樣式。

裝飾對(duì)象可以添加 before、after，這不就是偽元素么？沒(méi)錯(cuò)，就是偽元素，而且還可以加一系列樣式呢。加啥樣式都可以。

到了這，是不是就有如何在編輯器里做那些效果的思路了呢？

接下來(lái)，我們來(lái)看看 power-mode 的實(shí)現(xiàn)細(xì)節(jié)。

代碼實(shí)現(xiàn)

我們先從效果實(shí)現(xiàn)開(kāi)始看吧，主要是抖動(dòng)和放煙花：

抖動(dòng)

抖動(dòng)的原理我們分析過(guò)了，就是定時(shí)做位移。

首先，它定義了一系列的位移的裝飾對(duì)象，就是通過(guò) vscode.window.createTextEditorDecorationType 這個(gè)創(chuàng)建裝飾對(duì)象的 api：

public?activate?=?()?=&gt;?{ ????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 ????]; }</vscode.decorationrenderoptions></vscode.decorationrenderoptions></vscode.decorationrenderoptions></vscode.decorationrenderoptions>

然后呢？就是定時(shí)讓 editor 抖起來(lái)啊：

也是根據(jù)編輯的 position 算出 range，然后給這段 range 加裝飾

private?shake?=?()?=&gt;?{ ????if?(!this.config.enableShake)?{ ????????return; ????}  ???//?當(dāng)前?editor ????const?activeEditor?=?vscode.window.activeTextEditor;  ??//?要抖動(dòng)的?range，也就是當(dāng)前行 ????const?xRanges?=?[]; ????for?(let?i?=?0;?i??0.5)?{ ????????activeEditor.setDecorations(this.negativeX,?[]); ????????activeEditor.setDecorations(this.positiveX,?xRanges); ????}?else?{ ????????activeEditor.setDecorations(this.positiveX,?[]); ????????activeEditor.setDecorations(this.negativeX,?xRanges); ????}  ????if?(Math.random()?&gt;?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(()?=&gt;?{ ????????this.unshake(); ????},?1000); }

如上，就是定時(shí)加不同的位移樣式，隨機(jī)上下左右抖。

放煙花

然后我們來(lái)放煙花，思路我們分析過(guò)了，就是在編輯的位置加上一個(gè) gif，然后下次放的時(shí)候去掉上次的。

來(lái)按流程走一遍：

//?當(dāng)前編輯器 const?activeEditor?=?vscode.window.activeTextEditor; //?當(dāng)前編輯位置 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)) ); //創(chuàng)建裝飾對(duì)象 const?decoration?=?vscode.window.createTextEditorDecorationType(<vscode.decorationrenderoptions>{ ????before:?{ ????????//?before?樣式 ????}, ????textDecoration:?`當(dāng)前元素樣式`, ????rangeBehavior:?vscode.DecorationRangeBehavior.ClosedClosed }); //?給該范圍加裝飾 activeEditor.setDecorations(decoration,?[newRange]);</vscode.decorationrenderoptions>

加裝飾的流程我們走完了，但是樣式還沒(méi)填，怎么加呢？

首先當(dāng)前元素要相對(duì)定位，然后加個(gè) before 偽元素，設(shè)置為絕對(duì)定位并且 left 和 top 為負(fù)數(shù)。

之后就是設(shè)置背景圖片了，power mode 提供了這么多 gif 可選。

vscode插件分享：看看它如何實(shí)現(xiàn)煙花抖動(dòng)效果

所以呢，裝飾對(duì)象就是這樣的：

//?背景圖片的樣式 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', };  //?樣式對(duì)象轉(zhuǎn)換為字符串 const?backgroundCssString?=?this.objectToCssString(backgroundCss); const?defaultCssString?=?this.objectToCssString(defaultCss); const?customCssString?=?this.objectToCssString(this.config.customCss?||?{});  //?創(chuàng)建裝飾對(duì)象 const?decoration?=?vscode.window.createTextEditorDecorationType(<vscode.decorationrenderoptions>{ ????before:?{ ????????contentText:'', ????????textDecoration:?`none;?${defaultCssString}${backgroundCssString}?${customCssString}`, ????}, ????textDecoration:?`none;?position:?relative;`, ????rangeBehavior:?vscode.DecorationRangeBehavior.ClosedClosed });</vscode.decorationrenderoptions>

性能優(yōu)化

每次編輯都加一個(gè) gif 性能肯定很差，所以得做優(yōu)化，可以從觸發(fā)頻率、同時(shí)存在的 gif 數(shù)量來(lái)考慮：

節(jié)流，每1秒只能觸發(fā)一次

vscode插件分享：看看它如何實(shí)現(xiàn)煙花抖動(dòng)效果

gif 存在一段時(shí)間就刪掉

vscode插件分享：看看它如何實(shí)現(xiàn)煙花抖動(dòng)效果

大功告成，這樣我們把抖動(dòng)和放煙花在 vscode 里面實(shí)現(xiàn)了一遍。

但是，還得加個(gè)觸發(fā)的入口。

什么時(shí)候觸發(fā)呢？涉及到兩個(gè) api：

編輯文本的時(shí)候，出現(xiàn)效果

vscode.workspace.onDidChangeTextDocument(onDidChangeTextDocument);

修改了插件配置的時(shí)候，重新設(shè)置插件對(duì)象

vscode.workspace.onDidChangeConfiguration(onDidChangeConfiguration);

從怎么觸發(fā)的，到觸發(fā)后干什么，我們都清楚了，接下來(lái)呢，還要會(huì)怎么注冊(cè)這個(gè)插件到 vscode 中。

插件注冊(cè)

注冊(cè)插件就是在 package.json 里面配置一下，指定觸發(fā)時(shí)機(jī)：

"activationEvents":?[ ????"*" ]

指定插件入口：

??"main":?"./out/src/extension",

指定插件的配置：

"contributes":?{ ????"configuration":?{ ??????"title":?"Power?Mode", ??????"properties":?{ ????????"powermode.enabled":?{ ??????????"default":?false,?//?默認(rèn)值 ??????????"type":?"boolean",//?值類型 ??????????"description":?"Enable?to?activate?POWER?MODE!!!" ????????} ??????} ????} }