千姿百态,瞬息万变,Win11系统NeoVim打造全能/全栈编辑器(前端/Css/Js/Vue/Golang/Ruby/ChatGpt)

简介: 我曾经多次向人推荐Vim,其热情程度有些类似现在卖保险的,有的时候,人们会因为一些弥足珍贵的美好暗暗渴望一个巨大的负面,比如因为想重温手动挡的快乐而渴望买下一辆二十万公里的老爷车,比如因为所谓完美的音质而舍不得一个老旧的有线耳机,比如因为一个铜炉火锅而期待北京那漫长而寒冷的冬天。

我曾经多次向人推荐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。因为什么?因为热爱,如果是真爱,哪怕风情万千遇到不解风情,也所甘愿,哪怕没人懂,也要周周至至做出来。

相关文章
|
3月前
|
JavaScript 前端开发 程序员
前端原生Js批量修改页面元素属性的2个方法
原生 Js 的 getElementsByClassName 和 querySelectorAll 都能获取批量的页面元素,但是它们之间有些细微的差别,稍不注意,就很容易弄错!
|
4天前
|
数据采集 JavaScript Android开发
【02】仿站技术之python技术,看完学会再也不用去购买收费工具了-本次找了小影-感觉页面很好看-本次是爬取vue需要用到Puppeteer库用node.js扒一个app下载落地页-包括安卓android下载(简单)-ios苹果plist下载(稍微麻烦一丢丢)-优雅草卓伊凡
【02】仿站技术之python技术,看完学会再也不用去购买收费工具了-本次找了小影-感觉页面很好看-本次是爬取vue需要用到Puppeteer库用node.js扒一个app下载落地页-包括安卓android下载(简单)-ios苹果plist下载(稍微麻烦一丢丢)-优雅草卓伊凡
29 7
【02】仿站技术之python技术,看完学会再也不用去购买收费工具了-本次找了小影-感觉页面很好看-本次是爬取vue需要用到Puppeteer库用node.js扒一个app下载落地页-包括安卓android下载(简单)-ios苹果plist下载(稍微麻烦一丢丢)-优雅草卓伊凡
|
8天前
|
前端开发
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
26 1
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
|
3月前
|
JavaScript 前端开发 Java
springboot解决js前端跨域问题,javascript跨域问题解决
本文介绍了如何在Spring Boot项目中编写Filter过滤器以处理跨域问题,并通过一个示例展示了使用JavaScript进行跨域请求的方法。首先,在Spring Boot应用中添加一个实现了`Filter`接口的类,设置响应头允许所有来源的跨域请求。接着,通过一个简单的HTML页面和jQuery发送AJAX请求到指定URL,验证跨域请求是否成功。文中还提供了请求成功的响应数据样例及请求效果截图。
springboot解决js前端跨域问题,javascript跨域问题解决
|
3月前
|
缓存 JavaScript 前端开发
JavaScript 与 DOM 交互的基础及进阶技巧,涵盖 DOM 获取、修改、创建、删除元素的方法,事件处理,性能优化及与其他前端技术的结合,助你构建动态交互的网页应用
本文深入讲解了 JavaScript 与 DOM 交互的基础及进阶技巧,涵盖 DOM 获取、修改、创建、删除元素的方法,事件处理,性能优化及与其他前端技术的结合,助你构建动态交互的网页应用。
88 5
|
3月前
|
缓存 前端开发 JavaScript
JavaScript前端路由的实现原理及其在单页应用中的重要性,涵盖前端路由概念、基本原理、常见实现方式
本文深入解析了JavaScript前端路由的实现原理及其在单页应用中的重要性,涵盖前端路由概念、基本原理、常见实现方式(Hash路由和History路由)、优点及挑战,并通过实际案例分析,帮助开发者更好地理解和应用这一关键技术,提升用户体验。
128 1
|
3月前
|
JSON 前端开发 JavaScript
聊聊 Go 语言中的 JSON 序列化与 js 前端交互类型失真问题
在Web开发中,后端与前端的数据交换常使用JSON格式,但JavaScript的数字类型仅能安全处理-2^53到2^53间的整数,超出此范围会导致精度丢失。本文通过Go语言的`encoding/json`包,介绍如何通过将大整数以字符串形式序列化和反序列化,有效解决这一问题,确保前后端数据交换的准确性。
74 4
|
3月前
|
机器学习/深度学习 自然语言处理 前端开发
前端神经网络入门:Brain.js - 详细介绍和对比不同的实现 - CNN、RNN、DNN、FFNN -无需准备环境打开浏览器即可测试运行-支持WebGPU加速
本文介绍了如何使用 JavaScript 神经网络库 **Brain.js** 实现不同类型的神经网络,包括前馈神经网络(FFNN)、深度神经网络(DNN)和循环神经网络(RNN)。通过简单的示例和代码,帮助前端开发者快速入门并理解神经网络的基本概念。文章还对比了各类神经网络的特点和适用场景,并简要介绍了卷积神经网络(CNN)的替代方案。
608 1
|
3月前
|
JavaScript 前端开发 开发者
前端框架对比:Vue.js与Angular的优劣分析与选择建议
【10月更文挑战第27天】在前端开发领域,Vue.js和Angular是两个备受瞩目的框架。本文对比了两者的优劣,Vue.js以轻量级和易上手著称,适合快速开发小型到中型项目;Angular则由Google支持,功能全面,适合大型企业级应用。选择时需考虑项目需求、团队熟悉度和长期维护等因素。
98 1
|
3月前
|
JavaScript 前端开发 API
前端框架对比:Vue.js与Angular的优劣分析与选择建议
【10月更文挑战第26天】前端技术的飞速发展让开发者在构建用户界面时有了更多选择。本文对比了Vue.js和Angular两大框架,介绍了它们的特点和优劣,并给出了在实际项目中如何选择的建议。Vue.js轻量级、易上手,适合小型项目;Angular结构化、功能强大,适合大型项目。
123 1

热门文章

最新文章

  • 1
    【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
  • 2
    【08】flutter完成屏幕适配-重建Android,增加GetX路由,屏幕适配,基础导航栏-多版本SDK以及gradle造成的关于fvm的使用(flutter version manage)-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
  • 3
    【05】flutter完成注册页面完善样式bug-增加自定义可复用组件widgets-严格规划文件和目录结构-规范入口文件-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
  • 4
    详解智能编码在前端研发的创新应用
  • 5
    巧用通义灵码,提升前端研发效率
  • 6
    智能编码在前端研发的创新应用
  • 7
    【04】flutter补打包流程的签名过程-APP安卓调试配置-结构化项目目录-完善注册相关页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程
  • 8
    【07】flutter完成主页-完成底部菜单栏并且做自定义组件-完整短视频仿抖音上下滑动页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
  • 9
    抛弃node和vscode,如何用记事本开发出一个完整的vue前端项目
  • 10
    大前端之前端开发接口测试工具postman的使用方法-简单get接口请求测试的使用方法-简单教学一看就会-以实际例子来说明-优雅草卓伊凡