前端開發(fā)工具nvim替帶VSCode的安裝配置
1. Neovim是什么
在此之前,我一直都是使用VSCODE或者WEB STORM編輯器的. 他們確實好用方便. 直到我得了腱鞘炎之后. 不得不尋求減少使用鼠標(biāo)的方案.
在我之前的文章中也描述過這一過程. 我從使用VSCODE自帶的快捷鍵到使用Vim模擬器之后. 我對于這種能夠全鍵盤完成自己工作的操作方式越發(fā)的著迷.
它足夠的裝??,讓我這樣這種每天工作就是搬磚的底層碼農(nóng)也有一種自己已經(jīng)是程序員的感覺.
由此,我才迸發(fā)了使用vim實現(xiàn)更多的念頭.
自然而然的接觸到了neovim. 說它是vim的分支或者升級版都可以. 它的所有操作都可以通過鍵盤來實現(xiàn),分屏、修改、新增、函數(shù)跳轉(zhuǎn)、重構(gòu)、斷點debug、內(nèi)置終端. 最重要的是可以完美的潛入到編輯器當(dāng)中.比如說VS Code.這個極大的降低了開發(fā)者使用neovim的心里門檻.
簡單來說,neovim搭配各種插件可以最大限度的實現(xiàn)你平時使用VSCode的功能.
2. 我們?yōu)槭裁葱枰狽eovim
客觀原因, 想要減輕一下手腕負(fù)擔(dān),畢竟都要去醫(yī)院檢查了, 到了必須要重視的時候了.
至于很多大佬說的使用類vim這種編碼方式可以提高工作的效率. 就我自己的體驗而言,這個真沒有.或許它讓我極大的減少了使用鼠標(biāo)的次數(shù),極大的提高我敲字母的速度.但是這些一直都不是限制提高我工作效率的主要原因.
主要原因,是對于需求的理解,對于語言的熟悉度,對于API調(diào)用的熟悉度,對于編程思維邏輯的轉(zhuǎn)化程度,更準(zhǔn)確的說,是對設(shè)計模式在實際業(yè)務(wù)開發(fā)中合理的使用.
對于我這種菜鳥而言, 在使用vim之前, 思維的方式都還沒跟上我敲鍵盤的速度??, 所以我編碼的速度再快也沒有用
其次, 通過鍵盤來操作,會帶來快感.而且隨著你熟練度的不停提升. 而且這個快感能夠持續(xù)的時間很長,長到我使用了將近了兩個月之后,每每想到要寫代碼的時候,還是會有興奮感.
更重要的是,neovim自己從頭開始配置的話,你會熟悉每一個功能,每一個自己設(shè)置的hot keybindings.這種如臂使指的感覺會更加強烈.
最后,相比vim, neovim更強的性能和更現(xiàn)代化的lua配置語言,當(dāng)然這些是事實, neovim 帶來的異步任務(wù)特性從邏輯上必然是會提升體驗的,還有浮窗功能. 當(dāng)然聽說vim現(xiàn)在也有很多更新.但是我并不關(guān)心.
畢竟僅僅是neovim的顏值就可以不再看vim一眼了. 如下:

顏值才是第一生產(chǎn)力
總的來說:
- 還不錯的顏值
- 極客
- 裝??
- 如臂使指的快感
3. 如何配置Neovim
我逛遍了整個中文社區(qū),只推薦在兩個地方看如何從頭配置Neovim.
一個掘金上面有一本且唯一一本小冊也從頭配置起了neovim. 另一個在知乎上面搜索 「Neovim IDE 搭建系列」即可.
當(dāng)然也可以直接使用網(wǎng)上大佬的配置.
但是這些大佬的配置, 對于不熟悉lua的人來說,確實是夠抽象的. 就算能夠成功運行,也是一臉的懵逼.就達(dá)不到如臂指使的程度了,所以還是推薦有時間有精力的話,跟著教程自己從頭配置一遍.
不得不說,確實很可能會消耗你不少的時間的.但是給你帶來的影響,甚至?xí)S你的整個職業(yè)生涯的.
只要是處理文字就有可能需要vim
系統(tǒng)的看可以去看掘金小冊中neovim的教程,整個掘金就一個. 或者去看知乎上面. 這里就不畫蛇添注了,只做一個簡單的過程概要.
我當(dāng)前的配置環(huán)境:
環(huán)境: MacOS Monterey 12.3
終端工具: iterm2
軟件管理工具: HomeBrew
其實大差不差的,即使是在windows平臺也是需要配置wsl2來進(jìn)行環(huán)境的配置.配置邏輯基本相同
3.1 安裝第三方終端
這里選擇了使用人數(shù)最多的,有了疑問也容易搜索到. iterm2. 使用homebrew進(jìn)行軟件管理
brew install iterm2
3.2 安裝neoviem
brew install neovim
homebrew的使用具體可以查看我的另外一篇文章
一般來說安裝neovim是不會出問題的.但是要安裝neovim的前置環(huán)境會勸退一批人.
你需要安裝好nodejs、python環(huán)境, nodejs自不用說, 很多neovim的插件都是依托于python3環(huán)境的.
brew install python3 pip3 install neovim --upgrade
安裝python模塊之后,我們可以在終端中輸入nvim就能夠自動的進(jìn)入到nvim的主頁面. 此時輸入:CheckHealth它就會自動檢測你當(dāng)天環(huán)境是否已經(jīng)成功配置成功了.
當(dāng)你看到全部是OK的時候,就表明已經(jīng)配置成功了 . 即使出現(xiàn)了ERROR也不用害怕,它下面會給出建議,讓你干啥你就干啥就好.
每個人電腦當(dāng)前環(huán)境不一樣,網(wǎng)絡(luò)狀況不一樣,有時候確實會出現(xiàn)不一樣的問題,這就需要你自己善于使用搜索功能了.在這里我推薦reddit中的r/neovim社區(qū).
以下是我自己碰到的問題:
1.安裝pip失敗,提示: SyntaxError: invalid syntax
使用bootstrap教程
curl 'https://bootstrap.pypa.io/get-pip.py' > get-pip.py
接著使用python3執(zhí)行該腳本
sudo python3 get-pip.py
靜等它執(zhí)行完成,隨后在命令好中輸入:
pip --version
出現(xiàn)如下截圖說明,你的pip已經(jīng)安裝成功

有了pip,就可以執(zhí)行pip install neovim,讓pyhon3和neovim產(chǎn)生關(guān)聯(lián)
2. ERROR: This script does not work on Python 2.7 The minimum supported Python version is 3.6. Please use bootstrap.pypa.io/pip/2.7/get… instead
顧名思義,就是使用pyhon2.7版本不支持, 請下載bootstrap.pypa.io/pip/2.7/get…
3. Ruby provider (optional)的/usr/local/bin/neovim-ruby-host --version
運行如下命令可以解決:
gem install msgpack
3.3 快速啟動neovim
cd ~ && vim .zshrc
然后找到空白地區(qū),鍵入:
# neovim alias vim='nvim' alias vi='nvim'
之后你就可以直接在shell中輸入vi或者vim就是使用的neovim了
3.4 創(chuàng)建neovim配置文件
mkdir ~/.config/nvim vi ~/.config/nvim/init.vim
配置文件結(jié)果如下:

init.lua 是所有功能的初始化
lua -> 配置文件下詳情
lsp -> 提供代碼識別功能,和vscode通用一套.
plugin-config -> 其他各種花里胡哨的配置, 功能性的、UI類型的都在里面
basic.lua -> vim基本配置文件
colorscheme.lua -> 其實屬于plugin-config中的一員,但是主題是高頻使用所以單獨拎出
keybindings.lua -> 鍵位綁定
plufins.lua -> 插件引入入口
ginit.vim -> 我的終端模擬器neovide配置文件
pugin -> 自動生成
更具具體的配置內(nèi)容,可以自己網(wǎng)上搜索
3.5 配置字體
字體是終端一切漂亮圖標(biāo)的基礎(chǔ). nerd font
地址在這里 www.nerdfonts.com/font-downlo…. 找一個自己喜歡的就行. nerd font是這些字體的超集.
需要注意的是, neovim的配置文件和終端模擬器都需要配置對應(yīng)的字體
4. 終端模擬器之選
4.1 iterm2
優(yōu)點: 網(wǎng)上的資料最多. 而且提供了可視化的UI配置. 配置起來也是最簡單.功能也是最簡單的.如果要使用thmux的話,甚至是有內(nèi)置的.
缺點: 卡, 分屏多幾個就卡得不行不行的, 即使配置了GPU加速也沒有任何作用,現(xiàn)在已放棄.
4.2 alacrittty
A fast, cross-platform, OpenGL terminal emulator
優(yōu)點: 快,簡單
缺點: 太簡單,沒有tab, 你一次只能打開一個終端.
我的配置文件如下:
# Spread additional padding evenly around the terminal content. dynamic_padding: true # window customization window: dimensions: columns: 140 lines: 38 # padding: # x: 0 # y: 0 decorations: none # Background opacity opacity: 0.95 # mouse mouse: hide_when_typing: true scrolling: history: 10000 multiplier: 3 # Font configuration font: normal: family: "SauceCodePro Nerd Font" style: "常規(guī)體" bold: family: "SauceCodePro Nerd Font" style: "粗體" italic: family: "SauceCodePro Nerd Font" style: "斜體" bold_italic: family: "SauceCodePro Nerd Font" style: "粗斜體" # Point size size: 14.0 offset: x: 0 y: 5 glyph_offset: x: 0 y: 0 use_thin_strokes: true # #builtin_box_drawing: true # If `true`, bold text is drawn using the bright color variants. draw_bold_text_with_bright_colors: true
文件放置于 .config/alacritty/alacritty.yml
4.3 kitty
優(yōu)點: 快、使用過程中沒有出現(xiàn)性能問題. 可以配置項很多. 缺點: 配置文件全英文,官方文檔全英文,足夠復(fù)雜 網(wǎng)上說之前說中文輸入有問題,我是沒有碰到. 而且也是快,沒有性能問題. 現(xiàn)在完全作為頂替iterm2的存在 配置文件, 基本使用默認(rèn)配置,改了如下:
font_family BlexMono NF adjust_column_width -1 background_opacity 0.9 hide_window_decorations yes
第一個是為了連體字
第二個是kitty默認(rèn)字體渲染間距偏寬,-1就正好
第三個背景來一點透明
第四個隱藏頂部title
4.4 Neovide
各種使用下來感覺就是alacritty的升級版.升級在了那些騷操作上面.我現(xiàn)在的開發(fā)項目的主力. 簡單, 動畫很流暢.掌控感有爽快感.
配置文件:
set guifont=BlexMono\ NF:h14 set listchars=tab:>~,trail:. let g:neovide_refresh_rate=60 let g:neovide_no_idle=v:false let g:neovide_fullscreen=v:false let g:neovide_cursor_animation_length=0.13 let g:neovide_remember_window_size=v:true let g:neovide_cursor_trail_length=0.5 let g:neovide_cursor_antialiasing=v:true let g:neovide_cursor_vfx_mode = "torpedo" let g:neovide_cursor_vfx_opacity=200.0 let g:neovide_cursor_vfx_particle_lifetime=1.2 let g:neovide_cursor_vfx_particle_density=7.0 let g:neovide_cursor_vfx_particle_speed=10.0 let g:neovide_cursor_vfx_particle_phase=1.5 let g:neovide_cursor_vfx_particle_curl=1.0
以上就是前端開發(fā)工具nvim來代替VSCode配置使用的詳細(xì)內(nèi)容,更多關(guān)于前端開發(fā)工具nvim配置的資料請關(guān)注腳本之家其它相關(guān)文章!
相關(guān)文章
網(wǎng)絡(luò)抓包工具wireshark入門教程詳解
Wireshark是一個網(wǎng)絡(luò)數(shù)據(jù)包分析軟件,功能非常強大,奈何他是英文版的,今天就為大家詳細(xì)介紹一下網(wǎng)絡(luò)抓包工具wireshark的使用教程2018-10-10
wireshark網(wǎng)絡(luò)抓包工具的使用教程
WireShark是非常流行的網(wǎng)絡(luò)抓包分析工具,可以截取各種網(wǎng)絡(luò)數(shù)據(jù)包,并顯示數(shù)據(jù)包詳細(xì)信息,下面就跟隨小編一起學(xué)習(xí)一下wireshark的具體使用吧2023-08-08
Apifox?Echo學(xué)習(xí)curl?httpie?命令使用詳解
這篇文章主要為大家介紹了通過Apifox?Echo學(xué)習(xí)curl?httpie?命令使用,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-09-09

