自动编译div
A. 浏览器扩展：如何利用Vite实现开发热更新
>
前言做个浏览器扩展的小伙伴肯定知道，浏览器扩展是没有开发运行环境的，我们只能通过开发者人员模式→加载解压缩的扩展来运行项目，这时加载的其实就是最后需要发布的资源。每次改动源码，必须手动刷新浏览器。如果想使用Webpack/Vite等需要打包的方式开发项目，则更麻烦，还要额外每次手动编译。
那么Vite自带的HMR能否实现热更新呢？显然不能，本地启动的devServer浏览器压根用不了，所以本文主要解决以下两个问题：
代码修改，自动重编译。
重编译完成，自动刷新浏览器。
自动重编译这里纯粹水字数?，实现起来非常简单，使用vitebuild--watch代替vitebuild即可。
自动刷新浏览器思路也不复杂：编译结束→通知浏览器里的页面→页面调用刷新方法
1.如何获知编译结束？翻遍Vite文档也没有相关的配置项，只能自定义插件，而Vite特有的插件钩子同样无法实现，虽然标题写的Vite，最终还得仰仗大哥Rollup。代码见下文↓
2.如何通知浏览器里的页面？没啥说的，Websocket永远滴神！
3.页面如何刷新？仅刷新当前页面：window.location.reload()
刷新整个插件：chrome.runtime.reload()
4.代码实现安装依赖（强力推荐PNPM！）
pnpm?add?-D?wsRollup插件：为什么通知加了延迟？因为当我们快速多次修改保存源码时，第一次编译完成触发了closeBundle，紧接着又会重新编译，如果立刻通知刷新，浏览器扩展页面会加载失败，因为第二次编译还未完成，当真正完成编译已无法通知到页面。
所以我们在closeBundle钩子中延迟，在watchChange钩子中重新计时。
import?{?ConfigEnv,?UserConfig?}?from?"vite"import?{?ConfigEnv,?UserConfig?}?from?"vite"export?default?function()?{????let?wss:?WebSocketServer????let?ws:WebSocket????let?timer????//?发送通知????const?send?=?(msg)?=>?{????????if?(!ws)?return????????msg?=?JSON.stringify(msg)????????ws.send(msg)????}????//?清理资源????//?如果不清空变量的引用，插件将不会自动退出????const?close?=?()?=>?{????????ws?&&?ws.close()????????wss?&&?wss.close()????????clearTimeout(timer)????????ws?=?null????????wss?=?null????????timer?=?null????}????return?{????????name:?'build-notifier',????????apply(config:?UserConfig,?{?command?}:?ConfigEnv)?{????????????//?我们只在?build?且?watch?的情况下使用插件????????????const?canUse?=?command?===?'build'?&&?Boolean(config.build.watch)????????????if?(canUse)?{????????????????//?创建?websocket?server????????????????wss?=?new?WebSocketServer({?port:?2333?})????????????????wss.on('connection',?(client)?=>?{????????????????????ws?=?client????????????????})????????????}????????????return?canUse????????},????????closeBundle()?{????????????timer?=?setTimeout(()?=>?send('watch-build-ok'),?500)????????},????????watchChange()?{????????????clearTimeout(timer)????????},????????closeWatcher()?{????????????close()????????}????}}在vite.config.ts中引入插件：
import?buildNotifier?from?'./.vite/plugins/rollup-plugin-notifier'export?default?defineConfig({????plugins:?[????????buildNotifier()????]})页面监听通知，并在需要热更新的页面中，通过script标签引入该脚本即可。
//?加上开发环境的判断//?最终打包时?tree?shaking?会移除这段用不到的代码if?(import.meta.env.DEV)?{????const?ws?=?new?WebSocket('ws://localhost:2333')????ws.onmessage?=?(event)?=>?{????????let?msg?=?JSON.parse(event.data)????????if?(msg?===?'watch-build-ok')?{????????????window.location.reload()????????}????}}<body>????<div?id="app"?v-cloak></div>????<script?type="mole"?src="../reload/home.ts"></script></body>完整示例项目：bookmark-cleaner：自动检测失效书签链接，一键清理??
原文：https://juejin.cn/post/7095321125244108807
B. notepad++怎么实现一键自动完成一堆代码
notepad++也想实现其他编译器的那种输入几个字母就可以把整段代码完成的功能，省去了几十句代码一个个的敲的麻烦，提高编程的效率很有用，为了不让一些码农太累，今天就做一个教程吧
1、从网络下载zencoding工具，将所需要的zencoding工具的解压，就能看见一个NppScripting.dll的文件和一个文件夹NppScripting
2、打开notepad++的安装目录~~~Notepad++plugins，如果不知道我的上篇文章写了，很详细，再放入解压文件到这个目录
3、将notepad++重启后，就可以在编辑器里输入代码，如箭头所示的地方就是我马上要输入的代码
4、比如要输入一个HTML5的结构代码，就可以在里面输入html:5,然后按ctrl+e,编译器就会自动输完一串代码完成，真是便利啊，为我们减轻多少枯燥的工作量啊
5、在比如，要想在里面输入几个样式块可以输入div#div1ulli*5a一行 就省去了7行代码的输入
6、其他实用功能：比如给一大块代码加注释，就在相加注释的代码的下一行，第一个字母 前按ALT+/就能注释一大块了。