wezterm 與 neovim 前端環境設定分享

這篇是關於兩個前端開發過程中，學習 wezterm 與 nvim 的內容紀錄與分享。 # wezterm 此篇拿來使用方法、檢視設定、遇到的問題與往後想要達到的狀態，算是探索 terminal 的過程，之前使用 terminal 的順序分別為 iterm -> alacritty -> wezterm ，iterm 不用多說以前肯定是接觸 mac 後第一個會安裝的使用的酷東西，後來更換到 alacritty 執行速度真的快到不像話，可前端在開發會需要多個窗口，解決方法也是可以依賴 zellij 快速搞定，後續在使用上 wezterm 比較能達到一個平衡~而且不得不說 alacritty 的 icon 放在 mac 的 dock 上真的相當突兀~，預設 shell 是省心的 zsh + oh my zsh + powerlevel10k。 ## TODO - [x] 預設的 opt(alt) 加上方向鍵在 mac 無法使用，改為自行設定 ctrl + cmd。 - [ ] 設定自訂視窗分割僅限於 mac 上使用，尚未在 window 與 linux 上測試，所以不全部套用。 ## 快捷鍵 1. 新增分頁 cmd + t 2. 切換分頁 cmd + number key 3. 水平分割視窗畫面 ctrl + shift + opt + " 4. 垂直分割視窗畫面 ctrl + shift + opt + % 5. 移動分割區域 ctrl + cmd + arrow key #### **`~/.wezterm.lua`** ```lua local wezterm = require 'wezterm' local act = wezterm.action local config = wezterm.config_builder() -- config.color_scheme = 'AdventureTime' config.font = wezterm.font 'MesloLGS NF' config.font_size = 14 config.keys = { { key = 'LeftArrow', mods = 'CMD|CTRL', action = act{ ActivatePaneDirection = 'Left' } }, { key = 'RightArrow', mods = 'CMD|CTRL', action = act{ ActivatePaneDirection = 'Right' } }, { key = 'UpArrow', mods = 'CMD|CTRL', action = act{ ActivatePaneDirection = 'Up' } }, { key = 'DownArrow', mods = 'CMD|CTRL', action = act{ ActivatePaneDirection = 'Down' } }, } return config ``` # neovim 使用 nvim 前都習慣用 vscode 作為主要的 IDE 現在也依然在使用，確實上手速度與體驗上都相當優良直到現在依然也相當推薦，可開發時間長了會發現與其仰賴滑鼠進行操作，如果能在鍵盤上就完成全部除了可以節省更多時間且是多麽有魅力與成就感的，在未有提供 GUI 的環境下也無法使用 vscode 帶來的好處，所以就萌生了使用 nvim 的這條路，目前內容與設定放置可參考 https://github.com/akakaki/nvim-lua ，後續會把設定與檔案分開整理至下方內容中。 ## TODO - [ ] ~NvChad~ - [ ] ~Codium AI~ ## 快捷鍵 | 按鍵 | 操作 | |-|-| | h / j / k / l | 左 / 下 / 上 / 右 | | i / I | 在位置前編輯模式 / 移動至此行開頭進行編輯模式 | | a / A | 在位置後編輯模式 / 移動至此行結尾進行編輯模式 | | o / O | 新增一行並進入編輯模式 / 回到上一行並進入編輯模式 | | gg | 跳至第一行 | | G | 跳至最後一行 | | {n}G | 跳至 n 行 | | ctrl + o | 回到前一個位置 | | esc | 退出編輯 | | :wq / ZZ | 存檔離開 | | :q! / ZQ | 不儲存離開 | | viB / vib | 選取 {} 或 () / 選取整個 {} / () | | ciB / cib | 刪除 {} 或 () / 刪除整個 {} / () | | dd | 剪下整行 | | y | 複製行 | | p | 貼上 | | ~ | 當前位置文字大小寫轉換 | | % | 在括弧開始處跳至括弧內的結束行數 | | Shift + ~ | 變更大小寫 | | g~w | 字串變大寫 | | % | 跳至各種括號頭尾 | ## 搜尋 | 按鍵 | 操作 | |-|-| | / | 搜尋 | | :noh | 取消搜尋 | | n / N | return 後搜尋下一個與上一個 | ## 快捷組合功能 | 按鍵 | 操作 | |-|-| | ctrl + v + 選取行 + I | 可同時編輯 | | ctrl + v + G + $ | 全選 | | ctrl + v + G + $ + A | 修改最後 | | gg + = + G | 檔案排列整齊 | | ctrl + z / fg | 跳出檔案 / 回到檔案 |

• #terminal

Arch Linux 基本安裝

目前可以選擇的 Linux 分支相當多，GUI 的畫面與流程讓整個難度上也降低了不少，其中 Arch 算是比較有趣的，官方收入上雖然有 script 腳本可方便進行整個安裝流程，可當一個一個進行設定安裝可以認識到每個步驟做了些什麼，讓使用者能更掌握整個系統的狀況與內容，當問題發生的時候也可以更快判斷解決。 # 前置動作 1. 製作安裝隨身碟，在 Arch Linux 官方下載，先來說說 Windows 下可以用 rufus 寫入，Mac 或 Linux 用 dd 製作。 2. BIOS 需要禁用安全啟動 Secure Boot。 # 進入系統後檢查 1. 檢查 UEFI 啟用的系統64位元 cat /sys/firmware/efi/fw_platform_size。 2. 測試是否網路可正常運作 ping -c 3 archlinux.org，整個安裝流程原則上都需要網路進行，如使用 wifi 連線，驅動正確運作但被鎖定可用 rfkill 解除限制。 3. 安裝來源可更改 /etc/pacman.d/mirrorlist，詳細位置可搜尋 arch linux mirror list，並用 pacman -Syy 做確認連線正常。 4. terminal 字體太小可以輸入 setfont ter-132n # 安裝 硬碟使用 /dev/sdc 硬體為 intel cpu ，預設英文語系作為範例。 1. 找出要安裝系統的硬碟並轉換為 gpt 分割表，小心整顆硬碟會消失。 1. fdisk -l 2. fdisk /dev/sdc 3. (g) 2. 分區切割方法 1. (n) ⇒ 預設新增順序(Enter) ⇒ First Sector 預設即可(Enter) ⇒ Last Sector 輸入需要的分區大小 ⇒ 輸入 t 編輯類型。 | 輸入容量 | 格式 | 檢查 | 掛載(Mount) | 說明 | | --- | --- | --- | --- | --- | | +512MB | uefi | /dev/sdc1 512MB EFI | /boot | EFI | | +16GB | swap | /dev/sdc2 16GB SWAP | [SWAP] | SWAP 當記憶體使用滿載時可暫存用分區，建議為記憶體兩倍大小或記憶體的 60%，如果記憶體夠大使用頻率不高就可以不用太大，休眠記憶體用滿需要完全存入 | | 剩餘的 | | /dev/sdc3 *GB Linux | / | 把剩下的空間都給 Linux | 2. 輸入 w 確認最後寫入。 3. fdisk -l 或 lsblk 查看是否分割正確。 4. mkfs.fat -F32 /dev/sda1 5. mkfs.ext4 /dev/sda3 6. mkswap /dev/sda2 7. mount /dev/sda3 /mnt 8. mkdir /mnt/boot 9. mount /dev/sda1 /mnt/boot 10. swapon /dev/sda2 11. df -h 看掛載是否正確 3. 用 pacstrap 安裝基礎系統 1. pacstrap -K /mnt base linux linux-firmware intel-ucode vim 5. 設定開機掛載硬碟規則 1. genfstab -U /mnt >> /mnt/etc/fstab 2. cat /mnt/etc/fstab 6. 進入 chroot 當前系統 1. arch-chroot /mnt 7. 設定時區 1. ln -sf /usr/share/zoneinfo/Asia/Taipei /etc/localtime 2. hwclock --systohc 8. 設定語系 1. vim /etc/locale.gen 2. 取消註解 en_US.UTF8 UTF-8 3. locale-gen 4. echo "LANG=en_US.UTF-8" >> /etc/locale.conf 9. 建立主機名稱與 host 內容 1. echo “ArchLinux” >> /etc/hostname 2. echo “127.0.0.1 localhost” >> /etc/hosts 3. echo “::1 localhost” >> /etc/hosts 4. echo “127.0.0.1 ArchLinux” >> /etc/hosts 10. 更改 root 密碼 1. passwd 11. GRUB 開機選單引導 安裝 GRUB 與 efibootmgr，且安裝至 EFI。 1. pacman -S grub efibootmgr 2. mount /dev/sda1 /boot 3. grub-install —target=x86_64-efi —bootloader-id=GRUB —efi-directory=/boot 4. grub-mkconfig -o /boot/grub/grub.cfg 5. ls /boot 檢查是否安裝成功(應列出 grub 與 initramfs-linux.img) 12. 退出 chroot、取消掛載、關機或重新開機 1. exit 2. umount /mnt/boot 3. umount /mnt 4. reboot 這樣目前系統雛型就已經可以進入與使用，接著選擇使用硬碟作為開機，進入後安裝圖形化界面、中文語系與輸入法，也可以安裝 zsh .. 等等讓前端更方便順手開發的工具，讓整個系統更符合自己的時候習慣，另外官方沒收入的軟體也可以透過 aur 進行下載編譯來解決，跟 mac 的 homebrew 一樣相當方便。  # 參考 1. https://ivonblog.com/posts/install-archlinux/ 2. https://wiki.archlinux.org/title/Installation_guide

• #arch
• #linux

如何用原生的 new Date() 計算取得固定的日期

很多需求會在固定的日期或範圍內顯示不一樣的內容或效果， 可總不能等到當天才進行上線或佈署太冒險了， 這時候就可以用 new Date 進行判斷， 下面以母親節作為例子(五月的第二個禮拜日)， 初始步驟先轉跳至當年的五月份，接著可以從兩種思路上去做計算， ## 第一天作為計算 先取得五月的第一天為星期幾，並且加上當天，且跟兩週的時間做相減即可取得正確的母親節日期。 ```js const month = new Date(new Date().setMonth(4)).setDate(1) const day = 14 - new Date(month).getDay() + 1 console.log(day) ``` ## 第二週日期與星期做相減 一樣先取得五月，接著把日期設定為 14 日也就是兩個禮拜，可因起始的星期不一定是週日，所以須在扣除多餘的天數即可得到第二週日期了。 ```js const month = new Date(new Date().setMonth(4)).setDate(14) const day = 14 - new Date(month).getDay() console.log(day) ``` 兩種方法都是用星期與週去進行計算， 可以再搭配 setInterval 或是 web worker 的方式去更新或觸發事件， 另外如果有安裝 dayjs 也可以這樣寫 ```js const month = dayjs().month(4).startOf('month') const day = 14 - month.day() + 1 console.log(day) ```

• #javascript

fenvi FV-T919 安裝踩坑紀錄

悲劇說在前，隔天測試了一下 airpods 發現會連線失敗，原因是晶片先天的體質 😑，之前買了 nuphy air75 才決心入手在黑蘋果免驅藍牙，一開使蠻推的(看下面的文章有多愉悅)，只能說購買前沒好好功課有夠悲劇的。 最簡單解決的方式直接使用 usb 藍牙就可解決連不上跟太弱的問題，關閉 fenvi FV-T919 的藍牙則是拔除原本安裝在主機板上 usb 供電，天線移除靠近 logo 的那根即可。  **(( 以下就當作紀錄，之後購入新硬體的時候要踩個煞車好好想想啊啊 ))** 市面上除了原廠拆機的藍牙外，最最常見的就是 fenvi FV-T919 相關的系列，也可以順便把無線網路一次到位摸蛤蜊兼洗褲，另外有可以更換網卡但散熱性比較沒這麼好(?)，但想說既然沒有打算換其他的就選好點的四天線版本反正沒差多少，到貨後無線網路測試的完全沒問題而且裝好後還自動連上這有點嚇到(猜是鑰匙圈同步了手機的密碼，方便到太驚訝了 😂)  接著重頭戲的藍牙，可裝完後在系統偏好設定內沒有顯示，想到既然都可以在 macos 免驅，不用補 kext 了，姑且 linux 下試試，果然在 manjaro 下可以取得而且使用也正常反而忘記試試無線網路 😵，好的這樣就排除卡片壞掉的問題了。 爬文後有兩個方向，一是重新編輯 usb 的數量，另外一個則是補上 BrcmPatchRAM 相關的無線網卡 kext，試過一輪後發現正解是重新製作 usb 配置即可。  這裏之前是用 hackintool 弄但過程需要刪刪剪剪蠻麻煩的，論壇找找推薦，後來換成 USBMap 操作上就輕鬆許多，插拔過所有的插槽即可輸出使用，另外需要注意 10.14.1 後解限制補丁的補丁或更新已經沒有用了，所以接口數量上限為 15 個無法一次擁有所有的插槽，雖然我沒有這麼多 usb 的插槽就是，調整完後重開機就是享受了無線帶來的~~便利~~生活了 \\(^o^)/ 參考文件 - [黑蘋果啟用 Handoff 功能（Yosemite 10.10）](https://benjenq.pixnet.net/blog/post/41443669) - [[開箱] "黑蘋果網卡"之Fenvi FV-T919簡單開箱](https://www.ptt.cc/bbs/PC_Shopping/M.1615704188.A.A36.html) - [USB Mapping | OpenCore Post-Install](https://dortania.github.io/OpenCore-Post-Install/usb/intel-mapping/intel.html) - [AirPods + Fenvi T919 : hackintosh](https://www.reddit.com/r/hackintosh/comments/ke0nzx/airpods_fenvi_t919/gg33kg1/)

• #fenvi
• #bcm94360cd
• #fv-t919
• #黑蘋果
• #hackintosh
• #wifi
• #bluetooth

proxy

前陣子因緣際會遇到了個狀況 再不使用框架的狀態下監聽更新資料後執行某一個function去重新渲染畫面 平常寫慣了vue一時之間還真的萌生了要不說服對方用vue去渲染的念頭 思緒先回來😩 從來沒有認真去想過vue究竟是用了什麼黑魔法去完成監聽參數的動作 再查過一些文件粗淺地了解到了是使用es6內的proxy與reflect去達到響應的 這次使用的主角就是proxy，可以透過他的包裝去攔截資料變化 進而做出類似watch等等相關動作時才達到類似監聽參數的效果 完全是一個漲姿勢以下示範直接進入示範環節先上code 詳細內容可以再去找找 參考資料 - [不只懂 Vue 語法：Vue 3 如何使用 Proxy 實現響應式（Reactivity）？](https://ithelp.ithome.com.tw/articles/10264271)

• #javascript
• #proxy

在 Vue 3 中使用 Google Analytics

在原本v1站台裏是使用gtm作為ga的資料來源， 觸發後還需要在gtm的內設定轉為事件最後才能再ga呈現， 這樣過程繁瑣到炸，所以目前改用gtag記錄一下過程。 現在專案為vue 3，在vue 2的時候可以使用`vue-gtag`， vue 3則是使用`vue-gtag-next` ``` yarn add vue-gtag-next ``` 在目錄的main中引入vue gtag並加入自己的ga id， 就可以在ga的即時中查看到中看到自己的裝置、動作與數量，  ```javascript import VueGtag from 'vue-gtag-next' ... createApp() .use(VueGtag, { property: { id: 'G-XXXXXX', } }) ... ``` ~~這樣差不多完成了(?)~~ 現在可以在站台頁面切換到處點點， 透過即時報表來確認資料是否已開始傳入， 即時內只會顯示過去的30分鍾內的的資料， 另外vue-gtag也與g-tag一樣可以送出動作(event)之類等等的事件。 ```javascript import { event } from 'vue-gtag-next' export default { setup () { const action = () => { event('mine-action', { value: 'menu' }) } return { action, } } } ``` 參考gtag文件 - [gtag.js official documentation](https://developers.google.com/analytics/devguides/collection/gtagjs) - [vue-gtag-next](https://github.com/MatteoGabriele/vue-gtag-next) - [vue-gtag-next documentation](https://matteo-gabriele.gitbook.io/vue-gtag/v/next/) - [在 Vue 3.0 使用 Google Analytics 分析](https://blog.epoch.tw/2021/04/25/%E5%9C%A8-Vue-3-0-%E4%BD%BF%E7%94%A8-Google-Analytics-%E5%88%86%E6%9E%90/)

• #vue 3
• #google analytics