建站
咨詢
售后
建站咨詢
新聞中心
本文轉(zhuǎn)載自微信公眾號(hào)「神光的編程秘籍 」，作者神說要有光zxg。轉(zhuǎn)載本文請(qǐng)聯(lián)系神光的編程秘籍公眾號(hào)。
10年積累的網(wǎng)站設(shè)計(jì)制作、網(wǎng)站制作經(jīng)驗(yàn)，可以快速應(yīng)對(duì)客戶對(duì)網(wǎng)站的新想法和需求。提供各種問題對(duì)應(yīng)的解決方案。讓選擇我們的客戶得到更好、更有力的網(wǎng)絡(luò)服務(wù)。我雖然不認(rèn)識(shí)你，你也不認(rèn)識(shí)我。但先網(wǎng)站制作后付款的網(wǎng)站建設(shè)流程，更有鳳城免費(fèi)網(wǎng)站建設(shè)讓你可以放心的選擇與我們合作。
最近一直在研究 vscode 插件，今天給大家一分享一個(gè)效果特別炫的插件，名字叫 power mode。
編寫代碼邊放煙花、編輯器還會(huì)抖動(dòng)。
效果很炫，但是我們肯定不能滿足于會(huì)用，得研究下它是怎么實(shí)現(xiàn)的。
實(shí)現(xiàn)思路
在 vscode 里大家可能沒啥思路，但如果這個(gè)效果放到網(wǎng)頁(yè)里呢，文本改變的時(shí)候抖動(dòng)編輯器、然后再上面出現(xiàn)一些煙花效果。這個(gè)可能有的同學(xué)就有思路了。
抖動(dòng)編輯器：抖動(dòng)不也是個(gè)動(dòng)畫么，就是左右位移，這一秒右移，下一秒回到原位置，這樣就抖起來了。
煙花效果：不管啥花里胡哨的煙花，給個(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 幫助里打開開發(fā)者工具：
然后，兄弟萌，看，這編輯器部分部分就是個(gè) div 啊
所以剛才在網(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 的，是受到限制的，要這樣幾步：
(兄弟萌，下面的步驟要一步步來，不能跳著看)
通過 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，這不就是偽元素么?沒錯(cuò)，就是偽元素，而且還可以加一系列樣式呢。加啥樣式都可以。
到了這，是不是就有如何在編輯器里做那些效果的思路了呢?
接下來，我們來看看 power-mode 的實(shí)現(xiàn)細(xì)節(jié)。
代碼實(shí)現(xiàn)
我們先從效果實(shí)現(xiàn)開始看吧，主要是抖動(dòng)和放煙花：
抖動(dòng)
抖動(dòng)的原理我們分析過了，就是定時(shí)做位移。
首先，它定義了一系列的位移的裝飾對(duì)象，就是通過 vscode.window.createTextEditorDecorationType 這個(gè)創(chuàng)建裝飾對(duì)象的 api：
- public activate = () => {
- this.dispose();
- this.negativeX = vscode.window.createTextEditorDecorationType(
{ - textDecoration: `none; margin-left: 0px;`
- });
- this.positiveX = vscode.window.createTextEditorDecorationType(
{ - textDecoration: `none; margin-left: ${this.config.shakeIntensity}px;`
- });
- this.negativeY = vscode.window.createTextEditorDecorationType(
{ - textDecoration: `none; margin-top: 0px;`
- });
- this.positiveY = vscode.window.createTextEditorDecorationType(
{ - textDecoration: `none; margin-top: ${this.config.shakeIntensity}px;`
- });
- this.shakeDecorations = [
- this.negativeX,
- this.positiveX,
- this.negativeY,
- this.positiveY
- ];
- }
然后呢?就是定時(shí)讓 editor 抖起來?。?/p>
也是根據(jù)編輯的 position 算出 range，然后給這段 range 加裝飾
- private shake = () => {
- 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 < 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);
- }
如上，就是定時(shí)加不同的位移樣式，隨機(jī)上下左右抖。
放煙花
然后我們來放煙花，思路我們分析過了，就是在編輯的位置加上一個(gè) gif，然后下次放的時(shí)候去掉上次的。
來按流程走一遍：
- // 當(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(
{ - before: {
- // before 樣式
- },
- textDecoration: `當(dāng)前元素樣式`,
- rangeBehavior: vscode.DecorationRangeBehavior.ClosedClosed
- });
- // 給該范圍加裝飾
- activeEditor.setDecorations(decoration, [newRange]);
加裝飾的流程我們走完了，但是樣式還沒填，怎么加呢?
首先當(dāng)前元素要相對(duì)定位，然后加個(gè) before 偽元素，設(shè)置為絕對(duì)定位并且 left 和 top 為負(fù)數(shù)。
之后就是設(shè)置背景圖片了，power mode 提供了這么多 gif 可選。
所以呢，裝飾對(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(
{ - before: {
- contentText:'',
- textDecoration: `none; ${defaultCssString}${backgroundCssString} ${customCssString}`,
- },
- textDecoration: `none; position: relative;`,
- rangeBehavior: vscode.DecorationRangeBehavior.ClosedClosed
- });
大功告成，這樣我們把抖動(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ā)后干什么，我們都清楚了，接下來呢，還要會(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!!!"
- }
- }
- }
- }
總結(jié)
vscode 基于 electron，而 electron 基于 chromium，所以還是用網(wǎng)頁(yè)來做 ui 的，那么很多網(wǎng)頁(yè)里面的效果，基本都可以在編輯器實(shí)現(xiàn)。
但是是受約束的，要熟悉整個(gè)加裝飾的流程：
- 拿到當(dāng)前編輯器 (activeEditor)
- 拿到當(dāng)前編輯的位置 (position)
- 算出要加裝飾的范圍 (range)
- 創(chuàng)建裝飾對(duì)象 (decorationType)
- 給那段范圍的文本加裝飾 (addDecoration)
抖動(dòng)和放煙花都是基于這個(gè) api 實(shí)現(xiàn)的，不過抖動(dòng)是做上下左右的隨機(jī)位移，放煙花是在編輯的位置加動(dòng)圖。
實(shí)現(xiàn)思路有了，還得指定觸發(fā)的入口，也就是文本編輯的時(shí)候(onDidChangeTextDocument)。還有配置改變也得做下處理(onDidChangeConfiguration)。
之后，注冊(cè)到 vscode 就可以了，在 package.json 里面配置入口(main)、生效事件(activeEvent)、配置項(xiàng)(contibutes.configuration)
兄弟萌，讓我們一起在 vscode 里面放煙花吧!
本文標(biāo)題：兄弟萌，讓我們?cè)赩scode里放煙花吧
URL地址：http://www.dlmjj.cn/article/dhdpdgo.html
