自動編譯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+/就能注釋一大塊了。