前端開發(fā)工具nvim替帶VSCode的安裝配置
1. Neovim是什么
在此之前,我一直都是使用VSCODE或者WEB STORM編輯器的. 他們確實(shí)好用方便. 直到我得了腱鞘炎之后. 不得不尋求減少使用鼠標(biāo)的方案.
在我之前的文章中也描述過這一過程. 我從使用VSCODE自帶的快捷鍵到使用Vim模擬器之后. 我對于這種能夠全鍵盤完成自己工作的操作方式越發(fā)的著迷.
它足夠的裝??,讓我這樣這種每天工作就是搬磚的底層碼農(nóng)也有一種自己已經(jīng)是程序員的感覺.
由此,我才迸發(fā)了使用vim實(shí)現(xiàn)更多的念頭.
自然而然的接觸到了neovim. 說它是vim的分支或者升級版都可以. 它的所有操作都可以通過鍵盤來實(shí)現(xiàn),分屏、修改、新增、函數(shù)跳轉(zhuǎn)、重構(gòu)、斷點(diǎn)debug、內(nèi)置終端. 最重要的是可以完美的潛入到編輯器當(dāng)中.比如說VS Code.這個極大的降低了開發(fā)者使用neovim的心里門檻.
簡單來說,neovim搭配各種插件可以最大限度的實(shí)現(xiàn)你平時使用VSCode的功能.
2. 我們?yōu)槭裁葱枰狽eovim
客觀原因, 想要減輕一下手腕負(fù)擔(dān),畢竟都要去醫(yī)院檢查了, 到了必須要重視的時候了.
至于很多大佬說的使用類vim
這種編碼方式可以提高工作的效率. 就我自己的體驗(yàn)而言,這個真沒有.或許它讓我極大的減少了使用鼠標(biāo)的次數(shù),極大的提高我敲字母的速度.但是這些一直都不是限制提高我工作效率的主要原因.
主要原因,是對于需求的理解,對于語言的熟悉度,對于API調(diào)用的熟悉度,對于編程思維邏輯的轉(zhuǎn)化程度,更準(zhǔn)確的說,是對設(shè)計模式在實(shí)際業(yè)務(wù)開發(fā)中合理的使用.
對于我這種菜鳥而言, 在使用vim之前, 思維的方式都還沒跟上我敲鍵盤的速度??, 所以我編碼的速度再快也沒有用
其次, 通過鍵盤來操作,會帶來快感.而且隨著你熟練度的不停提升. 而且這個快感能夠持續(xù)的時間很長,長到我使用了將近了兩個月之后,每每想到要寫代碼的時候,還是會有興奮感.
更重要的是,neovim自己從頭開始配置的話,你會熟悉每一個功能,每一個自己設(shè)置的hot keybindings.這種如臂使指的感覺會更加強(qiáng)烈.
最后,相比vim, neovim更強(qiáng)的性能和更現(xiàn)代化的lua配置語言,當(dāng)然這些是事實(shí), neovim 帶來的異步任務(wù)特性從邏輯上必然是會提升體驗(yàn)的,還有浮窗功能. 當(dāng)然聽說vim現(xiàn)在也有很多更新.但是我并不關(guān)心.
畢竟僅僅是neovim的顏值就可以不再看vim一眼了. 如下:
顏值才是第一生產(chǎn)力
總的來說:
- 還不錯的顏值
- 極客
- 裝??
- 如臂使指的快感
3. 如何配置Neovim
我逛遍了整個中文社區(qū),只推薦在兩個地方看如何從頭配置Neovim.
一個掘金上面有一本且唯一一本小冊也從頭配置起了neovim. 另一個在知乎上面搜索 「Neovim IDE 搭建系列」即可.
當(dāng)然也可以直接使用網(wǎng)上大佬的配置.
但是這些大佬的配置, 對于不熟悉lua
的人來說,確實(shí)是夠抽象的. 就算能夠成功運(yùn)行,也是一臉的懵逼.就達(dá)不到如臂指使的程度了,所以還是推薦有時間有精力的話,跟著教程自己從頭配置一遍.
不得不說,確實(shí)很可能會消耗你不少的時間的.但是給你帶來的影響,甚至?xí)S你的整個職業(yè)生涯的.
只要是處理文字就有可能需要vim
系統(tǒng)的看可以去看掘金小冊中neovim的教程,整個掘金就一個. 或者去看知乎上面. 這里就不畫蛇添注了,只做一個簡單的過程概要.
我當(dāng)前的配置環(huán)境:
環(huán)境: MacOS Monterey 12.3
終端工具: iterm2
軟件管理工具: HomeBrew
其實(shí)大差不差的,即使是在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ò)狀況不一樣,有時候確實(shí)會出現(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
運(yùn)行如下命令可以解決:
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 -> 其實(shí)屬于plugin-config中的一員,但是主題是高頻使用所以單獨(dú)拎出
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)點(diǎn): 網(wǎng)上的資料最多. 而且提供了可視化的UI配置. 配置起來也是最簡單.功能也是最簡單的.如果要使用thmux
的話,甚至是有內(nèi)置的.
缺點(diǎn): 卡, 分屏多幾個就卡得不行不行的, 即使配置了GPU加速也沒有任何作用,現(xiàn)在已放棄.
4.2 alacrittty
A fast, cross-platform, OpenGL terminal emulator
優(yōu)點(diǎn): 快,簡單
缺點(diǎn): 太簡單,沒有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)點(diǎn): 快、使用過程中沒有出現(xiàn)性能問題. 可以配置項(xiàng)很多. 缺點(diǎ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就正好
第三個背景來一點(diǎn)透明
第四個隱藏頂部title
4.4 Neovide
各種使用下來感覺就是alacritty的升級版.升級在了那些騷操作上面.我現(xiàn)在的開發(fā)項(xiàng)目的主力. 簡單, 動畫很流暢.掌控感有爽快感.
配置文件:
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)文章
npm script 的文件監(jiān)聽和自動刷新的命令詳解
文件監(jiān)聽的作用是為了實(shí)現(xiàn)自動化,釋放雙手和精力,提高效率,讓開發(fā)者更加關(guān)注于開發(fā)。這篇文章主要介紹了npm script 的文件監(jiān)聽和自動刷新,需要的朋友可以參考下2019-06-06Chrome瀏覽器斷點(diǎn)調(diào)試技巧(非常詳細(xì)!)
在我們?nèi)粘i_發(fā)中,常常利用chrome強(qiáng)大的控制臺Sources下面進(jìn)行代碼斷點(diǎn)調(diào)試,這篇文章主要給大家介紹了關(guān)于Chrome瀏覽器斷點(diǎn)調(diào)試技巧的相關(guān)資料,需要的朋友可以參考下2023-09-09git push 本地項(xiàng)目推送到遠(yuǎn)程分支的方法(git命令版)
這篇文章主要介紹了git push 本地項(xiàng)目推送到遠(yuǎn)程分支的方法(git命令版),需要的朋友可以參考下2020-09-09Postman配置多環(huán)境請求地址的實(shí)現(xiàn)
本文主要介紹了Postman配置多環(huán)境請求地址的實(shí)現(xiàn),文中通過示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下2022-01-01SonarQube實(shí)現(xiàn)自動化代碼掃描的安裝及使用集成方式
Sonar是一個用于代碼質(zhì)量管理的開源平臺,通過插件機(jī)制,Sonar可與第三方工具進(jìn)行集成。將Sonar引入到代碼開發(fā)的過程中,提供靜態(tài)源代碼安全掃描能力,這無疑是安全左移的一次很好的嘗試和探索2021-10-10VS2019無法啟動程序(系統(tǒng)找不到指定文件)解決辦法
這篇文章主要介紹了VS2019無法啟動程序(系統(tǒng)找不到指定文件)解決辦法,文中通過圖文介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-08-08使用let's?encrypt申請免費(fèi)的SSL證書
這篇文章主要為大家介紹了如何使用let's?encrypt申請免費(fèi)的SSL證書示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-05-05