千姿百態,瞬息萬變,Win11系統NeoVim打造全能/全棧編輯器(前端/Css/Js/Vue/Golang/Ruby/ChatGpt)

劉悅的技術部落格發表於2023-02-01

我曾經多次向人推薦Vim,其熱情程度有些類似現在賣保險的,有的時候,人們會因為一些彌足珍貴的美好暗暗渴望一個巨大的負面,比如因為想重溫手動擋的快樂而渴望買下一輛二十萬公里的老爺車,比如因為所謂完美的音質而捨不得一個老舊的有線耳機,比如因為一個銅爐火鍋而期待北京那漫長而寒冷的冬天。

也許有的人會因為Vim而放棄169刀的JetBrains全家桶,沒錯,Vim的快樂,就是手動擋的快樂,懂得自然懂,不懂的永遠也不會懂,但如果沒有用Vim敲過程式碼,那麼絕對枉生於有Vim的世界。

之前一篇:上古神兵,先天至寶,Win11平臺安裝和配置NeoVim0.8.2編輯器搭建Python3開發環境(2023最新攻略),我們已經配置好了Python3開發環境,本次繼續添磚加瓦,讓NeoVim進化為全棧編輯器,全知全能,無所不通。

全能補全:coc.nvim

之前配置Python補全,我們使用過NCM2擴充套件外掛:

Plug 'ncm2/ncm2'  
Plug 'roxma/nvim-yarp'  
Plug 'ncm2/ncm2-bufword'  
Plug 'ncm2/ncm2-path'  
Plug 'ncm2/ncm2-jedi'

五個外掛,僅僅為了Python的補全,而Coc.nvim 透過 Microsoft 的 Language Server Protocol,支援許多程式語言,包括 JavaScript, Python, C++ ,Ruby等等。同時還可以透過設定和擴充套件進行靈活定製,滿足不同使用者的需求。

重新編寫配置:

Plug 'neoclide/coc.nvim', {'branch': 'release'}

安裝外掛:

:PlugInstall

安裝Python補全:

:CocInstall coc-pyls

就這麼簡單。

隨後,還可以對其他目標語言進行設定,比如想支援Golang的補全,透過命令:

:CocConfig

開啟配置檔案,Win11預設路徑是:~\AppData\Local\nvim\coc-settings.json

{  
    "languageserver": {  
        "golang": {  
            "command": "gopls",  
            "rootPatterns": [  
                "go.mod"  
            ],  
            "filetypes": [  
                "go"  
            ]  
        }  
    },  
    "suggest.noselect": false,  
    "coc.preferences.diagnostic.displayByAle": true,  
    "suggest.floatEnable": true  
}

新增Golang的配置,這裡使用gopls模組。

正確配置之後,就可以使用程式碼補全了 例如我們輸入 fmt. 就會提示fmt包中的方法,預設選擇第一個,使用< C-n > < C-p > 上下選擇,回車確認,nvim下可以使用懸浮窗功能。

類似的,如果想配置Ruby的智慧提示,設定不需要配置檔案,只需要安裝對應模組即可:

gem install solargraph

隨後NeoVim內執行命令:

:CocInstall coc-solargraph

但這也帶來了一個問題,即編譯執行的時候,預設執行的語言是Python,如何讓Vim程式自動進行判斷?只需要修改配置即可:

autocmd FileType python nnoremap <C-B> :sp <CR> :term python % <CR>  
autocmd FileType go nnoremap <C-B> :sp <CR> :term go run % <CR>  
nnoremap <C-W> :bd!<CR>

這裡透過NeoVim中的autocmd進行判斷,如果是Python程式碼就透過python直譯器執行,如果是golang程式碼就透過Golang的編譯器進行編譯,互不影響。

NeoVim 的 autocmd 是用來自動執行命令的一種機制。它可以在特定的事件發生時觸發命令的執行,比如開啟檔案、儲存檔案等。這樣可以自動地對檔案進行格式化、新增頭部資訊等操作。

前端的補全更簡單,一鍵式命令安裝即可:

:CocInstall coc-vetur coc-json coc-html coc-css

但前端頁面預設是沒有閉合高亮的,所以推薦下面這個外掛:

Plug 'leafOfTree/vim-matchtag'

它可以針對前端頁面標籤的閉合進行動態高亮:

非常方便。

快捷操作與配置

也許有人會因為諸如儲存、註釋以及記錄等操作還需要輸入vim命令而苦惱,但其實這並不是什麼問題,Vim也可以自動儲存:

Plug 'Pocco81/auto-save.nvim'

這樣就可以免去:w的操作。

單行以及多行的批次註釋可以依賴這個外掛:

Plug 'tpope/vim-commentary'

這樣就可以透過組合鍵gc快速進行註釋操作了。

編輯操作記錄可以依賴這個外掛:

Plug 'mhinz/vim-startify'

如此可以在首頁動態的選擇曾經編輯過的檔案:

想要傳統IDE那樣的動態調節字型大小?

let s:fontsize = 12  
function! AdjustFontSize(amount)  
  let s:fontsize = s:fontsize+a:amount  
  :execute "GuiFont! Consolas:h" . s:fontsize  
endfunction  
  
inoremap <expr> <TAB> pumvisible() ? "\<C-y>" : "\<CR>"  
inoremap <expr> <Esc> pumvisible() ? "\<C-e>" : "\<Esc>"  
inoremap <expr> <C-j> pumvisible() ? "\<C-n>" : "\<Down>"  
inoremap <expr> <C-k> pumvisible() ? "\<C-p>" : "\<Up>"

透過tab鍵選擇自動補全的程式碼提示?

" In insert mode, pressing ctrl + numpad's+ increases the font  
inoremap <C-kPlus> <Esc>:call AdjustFontSize(1)<CR>a  
inoremap <C-kMinus> <Esc>:call AdjustFontSize(-1)<CR>a

在Vim中,你甚至可以和ChatGpt一親芳澤:

use({  
  'terror/chatgpt.nvim',  
  run = 'pip3 install -r requirements.txt'  
})

當然,在使用者目錄下需要chatgpt的apikey或者token: ~/.chatgpt-nvim.json:

{  
  "authorization": "<API-KEY>",      # Optional API key  
  "session_token": "<SESSION-TOKEN>" # Your ChatGPT session token  
}

由於api-key是收費的,這裡建議使用token:

訪問 https://chat.openai.com/chat 並且登入
按F12開啟開發者工具
在應用的標籤上 > 選擇Cookies
直接複製__Secure-next-auth.session-token的value值寫到上面的session_token中即可。

效果如下:

最後,完整的全棧NeoVim配置:

call plug#begin('C:\nvim-win64\nvim-win64\share\nvim\plugged')  
  
  
Plug 'navarasu/onedark.nvim'  
  
Plug 'pablopunk/native-sidebar.vim'  
  
  
Plug 'Pocco81/auto-save.nvim'  
  
Plug 'leafOfTree/vim-matchtag'  
  
Plug 'mhinz/vim-startify'  
  
Plug 'neoclide/coc.nvim', {'branch': 'release'}  
  
Plug 'tpope/vim-commentary'  
  
  
call plug#end()  
  
let g:onedark_config = {  
    \ 'style': 'warm',  
\}  
colorscheme onedark  
  
  
let g:native_sidebar_shortcut = '<c-t>'  
  
set clipboard^=unnamed,unnamedplus  
  
syntax on                       "syntax highlighting, see :help syntax  
filetype plugin indent on       "file type detection, see :help filetype  
set number                      "display line number  
set path+=**                    "improves searching, see :help path  
set noswapfile                  "disable use of swap files  
set wildmenu                    "completion menu  
set backspace=indent,eol,start  "ensure proper backspace functionality  
set undodir=~/.cache/nvim/undo  "undo ability will persist after exiting file  
set undofile                    "see :help undodir and :help undofile  
set incsearch                   "see results while search is being typed, see :help incsearch  
set smartindent                 "auto indent on new lines, see :help smartindent  
set ic                          "ignore case when searching  
  
set expandtab                   "expanding tab to spaces  
set tabstop=4                   "setting tab to 4 columns  
set shiftwidth=4                "setting tab to 4 columns  
set softtabstop=4               "setting tab to 4 columns  
set showmatch                   "display matching bracket or parenthesis  
set hlsearch incsearch          "highlight all pervious search pattern with incsearch  
  
highlight ColorColumn ctermbg=9 "display ugly bright red bar at color column number  
  
" Keybind Ctrl+l to clear search  
nnoremap <C-l> :nohl<CR><C-l>:echo "Search Cleared"<CR>  
  
" When python filetype is detected, F5 can be used to execute script   
" autocmd FileType python nnoremap <buffer> <c-b> :<cr>:exec '!python' shellescape(expand('%:p'), 1)<cr>  
  
autocmd FileType python nnoremap <C-B> :sp <CR> :term python % <CR>  
autocmd FileType go nnoremap <C-B> :sp <CR> :term go run % <CR>  
nnoremap <C-W> :bd!<CR>  
  
  
let s:fontsize = 12  
function! AdjustFontSize(amount)  
  let s:fontsize = s:fontsize+a:amount  
  :execute "GuiFont! Consolas:h" . s:fontsize  
endfunction  
  
inoremap <expr> <TAB> pumvisible() ? "\<C-y>" : "\<CR>"  
inoremap <expr> <Esc> pumvisible() ? "\<C-e>" : "\<Esc>"  
inoremap <expr> <C-j> pumvisible() ? "\<C-n>" : "\<Down>"  
inoremap <expr> <C-k> pumvisible() ? "\<C-p>" : "\<Up>"  
  
" In insert mode, pressing ctrl + numpad's+ increases the font  
inoremap <C-kPlus> <Esc>:call AdjustFontSize(1)<CR>a  
inoremap <C-kMinus> <Esc>:call AdjustFontSize(-1)<CR>a

只需要不到70行的配置,我們就擁有了一個萬能的Vim編輯器。

結語

滿打滿算,七個外掛,全知全能,而我們需要做的,只是一行簡單的:PlugInstall。因為什麼?因為熱愛,如果是真愛,哪怕風情萬千遇到不解風情,也所甘願,哪怕沒人懂,也要週週至至做出來。

相關文章