兄弟萌，让我们在Vscode里放烟花吧

 本文转载自微信公众号「神光的编程秘籍 」，作者神说要有光zxg。转载本文请联系神光的编程秘籍公众号。

10年积累的网站设计制作、网站制作经验，可以快速应对客户对网站的新想法和需求。提供各种问题对应的解决方案。让选择我们的客户得到更好、更有力的网络服务。我虽然不认识你，你也不认识我。但先网站制作后付款的网站建设流程，更有凤城免费网站建设让你可以放心的选择与我们合作。

最近一直在研究 vscode 插件，今天给大家一分享一个效果特别炫的插件，名字叫 power mode。

编写代码边放烟花、编辑器还会抖动。

效果很炫，但是我们肯定不能满足于会用，得研究下它是怎么实现的。

实现思路

在 vscode 里大家可能没啥思路，但如果这个效果放到网页里呢，文本改变的时候抖动编辑器、然后再上面出现一些烟花效果。这个可能有的同学就有思路了。

抖动编辑器：抖动不也是个动画么，就是左右位移，这一秒右移，下一秒回到原位置，这样就抖起来了。

烟花效果：不管啥花里胡哨的烟花，给个 gif 我们就能搞定，就是在文本上方加一个元素，然后把 gif 放上去，下次加 gif 的时候把上次的删除。

这样就能在网页里实现编辑器抖动 + 放烟花效果了。

把这个效果放到 vscode 里实现也是一样的思路，因为 vscode 是基于 electron 实现的啊。

而 electron 又是基于 chromium + nodejs，也就是 ui 部分是网页。我们可以在 vscode 帮助里打开开发者工具：

然后，兄弟萌，看，这编辑器部分部分就是个 div 啊

所以刚才在网页里实现的效果，可以放到 vscode 里实现，思路一样。

思路是一样，但是具体怎么做呢?

这就需要了解下 vscode 的 extension api 了，其实也不难，我给大家介绍一下这里用到的 api：

首先，引入 vscode 包，所有的 api 都在这个包里。

 
 
 
 
    
  
  
  
  
  1. import * as vscode from 'vscode'; 
    2.

然后，我们要给文本加样式，怎么加呢?

在 vscode 的编辑器里面加样式不是直接操作 dom 的，是受到限制的，要这样几步：

(兄弟萌，下面的步骤要一步步来，不能跳着看)

通过 vscode.window 拿到当前的 editor

 
 
 
 
    
  
  
  
  
  1. const activeEditor = vscode.window.activeTextEditor; 
    2.

拿到当前 editor 的正在编辑的位置

 
 
 
 
    
  
  
  
  
  1. const cursorPosition = activeTextEditor.selection.active; 
    2.

根据位置计算出要添加装饰的范围(range)

 
 
 
 
    
  
  
  
  
  1. const newRange = new vscode.Range( 
    2.   
  
  
  
  2.     cursorPosition.with(cursorPosition.line, cursorPosition.character), 
    3.   
  
  
  
  3.     cursorPosition.with(cursorPosition.line, Math.max(0, cursorPosition.character + delta)) 
    4.   
  
  
  
  4. ); 
    5.

创建装饰对象

 
 
 
 
    
  
  
  
  
  1. vscode.window.createTextEditorDecorationType({ 
    2.   
  
  
  
  2.     before: { 
    3.   
  
  
  
  3.         contentText:'', 
    4.   
  
  
  
  4.         textDecoration: `none; ${defaultCssString}${backgroundCssString} ${customCssString}`, 
    5.   
  
  
  
  5.     }, 
    6.   
  
  
  
  6.     textDecoration: `none; position: relative;`, 
    7.   
  
  
  
  7.     rangeBehavior: vscode.DecorationRangeBehavior.ClosedClosed 
    8.   
  
  
  
  8. }); 
    9.

然后，给这段 range 的文本加装饰

 
 
 
 
    
  
  
  
  
  1. activeEditor.setDecorations(decoration, [newRange]); 
    2.

大功告成，现在我们就在 vscode 编辑器里面，你正在编辑的位置，加上了一段样式。

装饰对象可以添加 before、after，这不就是伪元素么?没错，就是伪元素，而且还可以加一系列样式呢。加啥样式都可以。

到了这，是不是就有如何在编辑器里做那些效果的思路了呢?

接下来，我们来看看 power-mode 的实现细节。

代码实现

我们先从效果实现开始看吧，主要是抖动和放烟花：

抖动

抖动的原理我们分析过了，就是定时做位移。

首先，它定义了一系列的位移的装饰对象，就是通过 vscode.window.createTextEditorDecorationType 这个创建装饰对象的 api：

 
 
 
 
    
  
  
  
  
  1. public activate = () => { 
    2.   
  
  
  
  2.     this.dispose(); 
    3.   
  
  
  
  3.     this.negativeX = vscode.window.createTextEditorDecorationType({ 
    4.   
  
  
  
  4.         textDecoration: `none; margin-left: 0px;` 
    5.   
  
  
  
  5.     }); 
    6.   
  
  
  
  6.  
    7.   
  
  
  
  7.     this.positiveX = vscode.window.createTextEditorDecorationType({ 
    8.   
  
  
  
  8.         textDecoration: `none; margin-left: ${this.config.shakeIntensity}px;` 
    9.   
  
  
  
  9.     }); 
    10.   
  
  
  
  10.  
    11.   
  
  
  
  11.     this.negativeY = vscode.window.createTextEditorDecorationType({ 
    12.   
  
  
  
  12.         textDecoration: `none; margin-top: 0px;` 
    13.   
  
  
  
  13.     }); 
    14.   
  
  
  
  14.  
    15.   
  
  
  
  15.     this.positiveY = vscode.window.createTextEditorDecorationType({ 
    16.   
  
  
  
  16.         textDecoration: `none; margin-top: ${this.config.shakeIntensity}px;` 
    17.   
  
  
  
  17.     }); 
    18.   
  
  
  
  18.  
    19.   
  
  
  
  19.     this.shakeDecorations = [ 
    20.   
  
  
  
  20.         this.negativeX, 
    21.   
  
  
  
  21.         this.positiveX, 
    22.   
  
  
  
  22.         this.negativeY, 
    23.   
  
  
  
  23.         this.positiveY 
    24.   
  
  
  
  24.     ]; 
    25.   
  
  
  
  25. } 
    26.

然后呢?就是定时让 editor 抖起来啊：

也是根据编辑的 position 算出 range，然后给这段 range 加装饰

 
 
 
 
    
  
  
  
  
  1. private shake = () => { 
    2.   
  
  
  
  2.     if (!this.config.enableShake) { 
    3.   
  
  
  
  3.         return; 
    4.   
  
  
  
  4.     } 
    5.   
  
  
  
  5.  
    6.   
  
  
  
  6.    // 当前 editor 
    7.   
  
  
  
  7.     const activeEditor = vscode.window.activeTextEditor; 
    8.   
  
  
  
  8.  
    9.   
  
  
  
  9.   // 要抖动的 range，也就是当前行 
    10.   
  
  
  
  10.     const xRanges = []; 
    11.   
  
  
  
  11.     for (let i = 0; i < activeEditor.document.lineCount; i++) { 
    12.   
  
  
  
  12.         xRanges.push(new vscode.Range(new vscode.Position(i, 0), new vscode.Position(i, 1))); 
    13.   
  
  
  
  13.     } 
    14.   
  
  
  
  14.  
    15.   
  
  
  
  15.   // 加装饰 
    16.   
  
  
  
  16.     if (Math.random() > 0.5) { 
    17.   
  
  
  
  17.         activeEditor.setDecorations(this.negativeX, []); 
    18.   
  
  
  
  18.         activeEditor.setDecorations(this.positiveX, xRanges); 
    19.   
  
  
  
  19.     } else { 
    20.   
  
  
  
  20.         activeEditor.setDecorations(this.positiveX, []); 
    21.   
  
  
  
  21.         activeEditor.setDecorations(this.negativeX, xRanges); 
    22.   
  
  
  
  22.     } 
    23.   
  
  
  
  23.  
    24.   
  
  
  
  24.     if (Math.random() > 0.5) { 
    25.   
  
  
  
  25.         activeEditor.setDecorations(this.negativeY, []); 
    26.   
  
  
  
  26.         activeEditor.setDecorations(this.positiveY, this.fullRange); 
    27.   
  
  
  
  27.     } else { 
    28.   
  
  
  
  28.         activeEditor.setDecorations(this.positiveY, []); 
    29.   
  
  
  
  29.         activeEditor.setDecorations(this.negativeY, this.fullRange); 
    30.   
  
  
  
  30.     } 
    31.   
  
  
  
  31.  
    32.   
  
  
  
  32.     clearTimeout(this.shakeTimeout); 
    33.   
  
  
  
  33.     this.shakeTimeout = setTimeout(() => { 
    34.   
  
  
  
  34.         this.unshake(); 
    35.   
  
  
  
  35.     }, 1000); 
    36.   
  
  
  
  36. } 
    37.

如上，就是定时加不同的位移样式，随机上下左右抖。

放烟花

然后我们来放烟花，思路我们分析过了，就是在编辑的位置加上一个 gif，然后下次放的时候去掉上次的。

来按流程走一遍：

 
 
 
 
    
  
  
  
  
  1. // 当前编辑器 
    2.   
  
  
  
  2. const activeEditor = vscode.window.activeTextEditor; 
    3.   
  
  
  
  3. // 当前编辑位置 
    4.   
  
  
  
  4. const cursorPosition = vscode.window.activeTextEditor.selection.active; 
    5.   
  
  
  
  5. // 要加装饰的范围 
    6.   
  
  
  
  6. const delta = left ? -2 : 1; 
    7.   
  
  
  
  7. const newRange = new vscode.Range( 
    8.   
  
  
  
  8.     cursorPosition.with(cursorPosition.line, cursorPosition.character), 
    9.   
  
  
  
  9.     cursorPosition.with(cursorPosition.line, Math.max(0, cursorPosition.character + delta)) 
    10.   
  
  
  
  10. ); 
    11.   
  
  
  
  11. //创建装饰对象 
    12.   
  
  
  
  12. const decoration = vscode.window.createTextEditorDecorationType({ 
    13.   
  
  
  
  13.     before: { 
    14.   
  
  
  
  14.         // before 样式 
    15.   
  
  
  
  15.     }, 
    16.   
  
  
  
  16.     textDecoration: `当前元素样式`, 
    17.   
  
  
  
  17.     rangeBehavior: vscode.DecorationRangeBehavior.ClosedClosed 
    18.   
  
  
  
  18. }); 
    19.   
  
  
  
  19. // 给该范围加装饰 
    20.   
  
  
  
  20. activeEditor.setDecorations(decoration, [newRange]); 
    21.

加装饰的流程我们走完了，但是样式还没填，怎么加呢?

首先当前元素要相对定位，然后加个 before 伪元素，设置为绝对定位并且 left 和 top 为负数。

之后就是设置背景图片了，power mode 提供了这么多 gif 可选。

所以呢，装饰对象就是这样的：

 
 
 
 
    
  
  
  
  
  1. // 背景图片的样式 
    2.   
  
  
  
  2. const backgroundCss = this.getBackgroundCssSettings(explosionUrl); 
    3.   
  
  
  
  3.  
    4.   
  
  
  
  4. //位置的样式 
    5.   
  
  
  
  5. const defaultCss = { 
    6.   
  
  
  
  6.     position: 'absolute', 
    7.   
  
  
  
  7.     [CSS_LEFT] : `-10px`, 
    8.   
  
  
  
  8.     [CSS_TOP]: `-1.2rem`, 
    9.   
  
  
  
  9.     width: `${this.config.explosionSize}ch`, 
    10.   
  
  
  
  10.     height: `${this.config.explosionSize}rem`, 
    11.   
  
  
  
  11.     display: `inline-block`, 
    12.   
  
  
  
  12.     ['z-index']: 1, 
    13.   
  
  
  
  13.     ['pointer-events']: 'none', 
    14.   
  
  
  
  14. }; 
    15.   
  
  
  
  15.  
    16.   
  
  
  
  16. // 样式对象转换为字符串 
    17.   
  
  
  
  17. const backgroundCssString = this.objectToCssString(backgroundCss); 
    18.   
  
  
  
  18. const defaultCssString = this.objectToCssString(defaultCss); 
    19.   
  
  
  
  19. const customCssString = this.objectToCssString(this.config.customCss || {}); 
    20.   
  
  
  
  20.  
    21.   
  
  
  
  21. // 创建装饰对象 
    22.   
  
  
  
  22. const decoration = vscode.window.createTextEditorDecorationType({ 
    23.   
  
  
  
  23.     before: { 
    24.   
  
  
  
  24.         contentText:'', 
    25.   
  
  
  
  25.         textDecoration: `none; ${defaultCssString}${backgroundCssString} ${customCssString}`, 
    26.   
  
  
  
  26.     }, 
    27.   
  
  
  
  27.     textDecoration: `none; position: relative;`, 
    28.   
  
  
  
  28.     rangeBehavior: vscode.DecorationRangeBehavior.ClosedClosed 
    29.   
  
  
  
  29. }); 
    30.

大功告成，这样我们把抖动和放烟花在 vscode 里面实现了一遍。

但是，还得加个触发的入口。

什么时候触发呢?涉及到两个 api：

编辑文本的时候，出现效果

 
 
 
 
    
  
  
  
  
  1. vscode.workspace.onDidChangeTextDocument(onDidChangeTextDocument); 
    2.

修改了插件配置的时候，重新设置插件对象

 
 
 
 
    
  
  
  
  
  1. vscode.workspace.onDidChangeConfiguration(onDidChangeConfiguration); 
    2.

从怎么触发的，到触发后干什么，我们都清楚了，接下来呢，还要会怎么注册这个插件到 vscode 中。

插件注册

注册插件就是在 package.json 里面配置一下，指定触发时机：

 
 
 
 
    
  
  
  
  
  1. "activationEvents": [ 
    2.   
  
  
  
  2.     "*" 
    3.   
  
  
  
  3. ] 
    4.

指定插件入口：

 
 
 
 
    
  
  
  
  
  1. "main": "./out/src/extension", 
    2.

指定插件的配置：

 
 
 
 
    
  
  
  
  
  1. "contributes": { 
    2.   
  
  
  
  2.     "configuration": { 
    3.   
  
  
  
  3.       "title": "Power Mode", 
    4.   
  
  
  
  4.       "properties": { 
    5.   
  
  
  
  5.         "powermode.enabled": { 
    6.   
  
  
  
  6.           "default": false, // 默认值 
    7.   
  
  
  
  7.           "type": "boolean",// 值类型 
    8.   
  
  
  
  8.           "description": "Enable to activate POWER MODE!!!" 
    9.   
  
  
  
  9.         } 
    10.   
  
  
  
  10.       } 
    11.   
  
  
  
  11.     } 
    12.   
  
  
  
  12. } 
    13.

总结

vscode 基于 electron，而 electron 基于 chromium，所以还是用网页来做 ui 的，那么很多网页里面的效果，基本都可以在编辑器实现。

但是是受约束的，要熟悉整个加装饰的流程：

  • 拿到当前编辑器 (activeEditor)
  • 拿到当前编辑的位置 (position)
  • 算出要加装饰的范围 (range)
  • 创建装饰对象 (decorationType)
  • 给那段范围的文本加装饰 (addDecoration)

抖动和放烟花都是基于这个 api 实现的，不过抖动是做上下左右的随机位移，放烟花是在编辑的位置加动图。

实现思路有了，还得指定触发的入口，也就是文本编辑的时候(onDidChangeTextDocument)。还有配置改变也得做下处理(onDidChangeConfiguration)。

之后，注册到 vscode 就可以了，在 package.json 里面配置入口(main)、生效事件(activeEvent)、配置项(contibutes.configuration)

兄弟萌，让我们一起在 vscode 里面放烟花吧!

当前题目：兄弟萌，让我们在Vscode里放烟花吧
网页地址：http://www.stwzsj.com/qtweb/news15/9965.html

网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联

猜你还喜欢下面的内容

企业建站知识

同城分类信息

公路打桩机　　 　界面设计　　 　电信内江机房　　 　大橙子建站　　 　大英网站建设　　 　彭山网站制作　　 　腾讯云香港空间　　 　域名申请　　 　成都谷歌推广　　 　专业网站设计　　 　成都手机网站报价　　 　成都SEO优化　　 　成都标牌标识牌制作公司　　 　康明斯发电机　　 　成都品牌网站建设　　 　服务器租用　　 　丹棱网站建设　　 　成都微信公众号开发　　 　网站制作　　 　定制级高端网站建设