前端開發工具nvim替帶VSCode的安裝配置

Posted on by

1. Neovim是什麼

在此之前,我一直都是使用VSCODE或者WEB STORM編輯器的. 他們確實好用方便. 直到我得瞭腱鞘炎之後. 不得不尋求減少使用鼠標的方案.

在我之前的文章中也描述過這一過程. 我從使用VSCODE自帶的快捷鍵到使用Vim模擬器之後. 我對於這種能夠全鍵盤完成自己工作的操作方式越發的著迷.

它足夠的裝🐮,讓我這樣這種每天工作就是搬磚的底層碼農也有一種自己已經是程序員的感覺.

由此,我才迸發瞭使用vim實現更多的念頭.

自然而然的接觸到瞭neovim. 說它是vim的分支或者升級版都可以. 它的所有操作都可以通過鍵盤來實現,分屏、修改、新增、函數跳轉、重構、斷點debug、內置終端. 最重要的是可以完美的潛入到編輯器當中.比如說VS Code.這個極大的降低瞭開發者使用neovim的心裡門檻.

簡單來說,neovim搭配各種插件可以最大限度的實現你平時使用VSCode的功能.

2. 我們為什麼需要Neovim

客觀原因, 想要減輕一下手腕負擔,畢竟都要去醫院檢查瞭, 到瞭必須要重視的時候瞭.

至於很多大佬說的使用類vim這種編碼方式可以提高工作的效率. 就我自己的體驗而言,這個真沒有.或許它讓我極大的減少瞭使用鼠標的次數,極大的提高我敲字母的速度.但是這些一直都不是限制提高我工作效率的主要原因.

主要原因,是對於需求的理解,對於語言的熟悉度,對於API調用的熟悉度,對於編程思維邏輯的轉化程度,更準確的說,是對設計模式在實際業務開發中合理的使用.

對於我這種菜鳥而言, 在使用vim之前, 思維的方式都還沒跟上我敲鍵盤的速度😂, 所以我編碼的速度再快也沒有用

其次, 通過鍵盤來操作,會帶來快感.而且隨著你熟練度的不停提升. 而且這個快感能夠持續的時間很長,長到我使用瞭將近瞭兩個月之後,每每想到要寫代碼的時候,還是會有興奮感.

更重要的是,neovim自己從頭開始配置的話,你會熟悉每一個功能,每一個自己設置的hot keybindings.這種如臂使指的感覺會更加強烈.

最後,相比vim, neovim更強的性能和更現代化的lua配置語言,當然這些是事實, neovim 帶來的異步任務特性從邏輯上必然是會提升體驗的,還有浮窗功能. 當然聽說vim現在也有很多更新.但是我並不關心.

畢竟僅僅是neovim的顏值就可以不再看vim一眼瞭. 如下:

顏值才是第一生產力

總的來說:

  • 還不錯的顏值
  • 極客
  • 裝🐮
  • 如臂使指的快感

3. 如何配置Neovim

我逛遍瞭整個中文社區,隻推薦在兩個地方看如何從頭配置Neovim.

一個掘金上面有一本且唯一一本小冊也從頭配置起瞭neovim. 另一個在知乎上面搜索 「Neovim IDE 搭建系列」即可.

當然也可以直接使用網上大佬的配置.

但是這些大佬的配置, 對於不熟悉lua的人來說,確實是夠抽象的. 就算能夠成功運行,也是一臉的懵逼.就達不到如臂指使的程度瞭,所以還是推薦有時間有精力的話,跟著教程自己從頭配置一遍.

不得不說,確實很可能會消耗你不少的時間的.但是給你帶來的影響,甚至會跟隨你的整個職業生涯的.

隻要是處理文字就有可能需要vim

系統的看可以去看掘金小冊中neovim的教程,整個掘金就一個. 或者去看知乎上面. 這裡就不畫蛇添註瞭,隻做一個簡單的過程概要.

我當前的配置環境:

環境: MacOS Monterey 12.3

終端工具: iterm2

軟件管理工具: HomeBrew

其實大差不差的,即使是在windows平臺也是需要配置wsl2來進行環境的配置.配置邏輯基本相同

3.1 安裝第三方終端

這裡選擇瞭使用人數最多的,有瞭疑問也容易搜索到. iterm2. 使用homebrew進行軟件管理

  brew install iterm2

3.2 安裝neoviem

  brew install neovim

homebrew的使用具體可以查看我的另外一篇文章

一般來說安裝neovim是不會出問題的.但是要安裝neovim的前置環境會勸退一批人.

你需要安裝好nodejs、python環境, nodejs自不用說, 很多neovim的插件都是依托於python3環境的.

  brew install python3
  pip3 install neovim --upgrade

安裝python模塊之後,我們可以在終端中輸入nvim就能夠自動的進入到nvim的主頁面. 此時輸入:CheckHealth它就會自動檢測你當天環境是否已經成功配置成功瞭.

當你看到全部是OK的時候,就表明已經配置成功瞭 . 即使出現瞭ERROR也不用害怕,它下面會給出建議,讓你幹啥你就幹啥就好.

每個人電腦當前環境不一樣,網絡狀況不一樣,有時候確實會出現不一樣的問題,這就需要你自己善於使用搜索功能瞭.在這裡我推薦reddit中的r/neovim社區.

以下是我自己碰到的問題:

1.安裝pip失敗,提示: SyntaxError: invalid syntax

使用bootstrap教程

curl 'https://bootstrap.pypa.io/get-pip.py' > get-pip.py

接著使用python3執行該腳本

sudo python3 get-pip.py

靜等它執行完成,隨後在命令好中輸入:

pip --version

出現如下截圖說明,你的pip已經安裝成功

有瞭pip,就可以執行pip install neovim,讓pyhon3和neovim產生關聯

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

然後找到空白地區,鍵入:

# neovim
alias vim='nvim'
alias vi='nvim'

之後你就可以直接在shell中輸入vi或者vim就是使用的neovim瞭

3.4 創建neovim配置文件

mkdir ~/.config/nvim
vi ~/.config/nvim/init.vim

配置文件結果如下:

init.lua 是所有功能的初始化

lua -> 配置文件下詳情

lsp -> 提供代碼識別功能,和vscode通用一套.

plugin-config -> 其他各種花裡胡哨的配置, 功能性的、UI類型的都在裡面

basic.lua -> vim基本配置文件

colorscheme.lua -> 其實屬於plugin-config中的一員,但是主題是高頻使用所以單獨拎出

keybindings.lua -> 鍵位綁定

plufins.lua -> 插件引入入口

ginit.vim -> 我的終端模擬器neovide配置文件

pugin -> 自動生成

更具具體的配置內容,可以自己網上搜索

3.5 配置字體

字體是終端一切漂亮圖標的基礎. nerd font

地址在這裡 www.nerdfonts.com/font-downlo…. 找一個自己喜歡的就行. nerd font是這些字體的超集.

需要註意的是, neovim的配置文件和終端模擬器都需要配置對應的字體

4. 終端模擬器之選

4.1 iterm2

優點: 網上的資料最多. 而且提供瞭可視化的UI配置. 配置起來也是最簡單.功能也是最簡單的.如果要使用thmux的話,甚至是有內置的.

缺點: 卡, 分屏多幾個就卡得不行不行的, 即使配置瞭GPU加速也沒有任何作用,現在已放棄.

4.2 alacrittty

A fast, cross-platform, OpenGL terminal emulator

優點: 快,簡單

缺點: 太簡單,沒有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: "常規體"
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

優點: 快、使用過程中沒有出現性能問題. 可以配置項很多. 缺點: 配置文件全英文,官方文檔全英文,足夠復雜 網上說之前說中文輸入有問題,我是沒有碰到. 而且也是快,沒有性能問題. 現在完全作為頂替iterm2的存在 配置文件, 基本使用默認配置,改瞭如下:

font_family      BlexMono NF 
adjust_column_width -1
background_opacity 0.9
hide_window_decorations yes

第一個是為瞭連體字

第二個是kitty默認字體渲染間距偏寬,-1就正好

第三個背景來一點透明

第四個隱藏頂部title

4.4 Neovide

各種使用下來感覺就是alacritty的升級版.升級在瞭那些騷操作上面.我現在的開發項目的主力. 簡單, 動畫很流暢.掌控感有爽快感.

配置文件:

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

以上就是前端開發工具nvim來代替VSCode配置使用的詳細內容，更多關於前端開發工具nvim配置的資料請關註WalkonNet其它相關文章！

推薦閱讀：