2024年在Vim中开发vue2+java

2024-04-17 21:52

本文主要是介绍2024年在Vim中开发vue2+java,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

neovim 0.5刚出来的时代,那时刚有lua插件我很狂热。每天沉迷于打造自己的IDE之中。写过一堆相关的博客,也录过一些视频教程。后来发现neovim的接口和插件更新的很快,导致配置文件要不定期的修改,才能保证新版本的插件的适配。我也一直在更新,直到工作上的事情越来越多,导致我在也没有时间研究neovim,没时间更新了。为了高效的完成工作上的任务,我被迫使用了不需要折腾的IDE,比如:IDEA,VSCODE。我的neovim也一直保持着低版本。配置也不在更新了。

不知不觉NVIM v0.9.5 都出来了,是时候回到neovim玩玩了。只是现在的我,每天各种事情缠身,在也没有时间自己一点点研究vim插件,一点点组装自己的IDE了,我选择使用大佬们集成好的配置。这次我用LAZYVIM。

正如其名,我是真的懒的自己配置了。直接享受大佬的成果吧!以后有空了在深入研究一下吧。

环境说明

操作系统:macOS 13.4

安装方法Linux/MacOS

见官方文档:
http://www.lazyvim.org/installation

安装 LazyVim Starter

备份您当前的 Neovim 文件:

# required
mv ~/.config/nvim{,.bak}
# optional but recommended
mv ~/.local/share/nvim{,.bak}
mv ~/.local/state/nvim{,.bak}
mv ~/.cache/nvim{,.bak}

克隆启动器

git clone https://github.com/LazyVim/starter ~/.config/nvim

删除该文件夹,以便稍后可以将其添加到自己的存储库中.git

rm -rf ~/.config/nvim/.git

启动Neovim!

nvim

参考文件中关于如何自定义 LazyVim 的注释。

是否要自定义配置

此次我打算尽可能的使用LazyVim的默认配置,尽量不做修改。主要目的是想了解一下别的人配置,深入体验一下哪种会更好。

键盘映射

LazyVim 使用 which-key.nvim 来帮助你记住你的 键盘映射。只需按任意键,您就会看到一个弹出窗口,其中包含所有 可能以 开头的键盘映射。<space><space>
在这里插入图片描述

  • 默认值为<leader><space>
  • 默认值为<localleader>\

详情的说明见:
http://www.lazyvim.org/keymaps

<C-Up>增加窗口高度n
<C-Down>降低窗口高度n
<C-Left>减小窗口宽度n
<C-Right>增加窗口宽度n

这里我就遇到问题了,因为我用的macOS系统这几个按钮被系统切换虚拟桌面用了。
为了适应这个我把系统的快捷键暂时禁用了。
在这里插入图片描述
按键适应起来还是有点不习惯的。我要强行要求自己适应下来,主要我感觉一些默认的按键设置的还是很讲究的,很合理。

忍不住想修改的地方

主题

上面说了,想尽可能适合这一套配置。有一些地方我经过思考还是要修改的。
首先是主题,我感觉默认的主题蓝色的字体太多了,个人不太喜欢过多的蓝色。

实现方法:
创建~/.config/nvim/lua/plugins/core.lua

return {-- add gruvbox{ "ellisonleao/gruvbox.nvim" },-- Configure LazyVim to load gruvbox{"LazyVim/LazyVim",opts = {colorscheme = "gruvbox",},}
}

以上文本源于示例中的copy,正好gruvbox是我之前一直在用的主题感觉很不错。
还有craftzdog/solarized-osaka.nvim 这个主题也是不错的。

主题折腾以后,我还想试不同的主题。导致我精力分散。我决定还是用默认的主题。回归一切默认的原则。

按键

尽可能默认,实在忍不住修改的地方如下:
修改~/.config/nvim/lua/config/keymaps.lua在文件末尾增加。

local map = LazyVim.safe_keymap_set
map("i", "jk", "<Esc>")

主要在insert模式下用jk代替Esc太爽了,已经行成肌肉记忆。主要这个配置一般来说不会对别的按键影响。思考良久还是加上了。

LSP

vue智能提示的设置我花了1下午+1 上午才让自己满意。我的目标是开发体验能与vscode中类似最好。
我是刚用LazyVim的新手,所以不明白怎么搞就去项目的讨论区找相关的文章,比如:
https://github.com/LazyVim/LazyVim/discussions/2814
这个是可以用,但是用起来不是我想要的,比如:写<el并不会提示我想要的组件。

我在找了很久,没找到合适我的。与是我就想纯手动配置lsp。

手动配置

我本人其实对手动配置更熟悉一些,我之前做的nvim配置都是我一点点手动配置出来的。突然用这种全自己的配置我反而不会用了。与是我就打算手动试试,实在不行就暂时回到IDEA吧。
与是我找到了nvim-lspconfig的官方文档,地址如下:
https://github.com/neovim/nvim-lspconfig/blob/master/doc/server_configurations.md#vuels

这里提示一下node版本用18,反正我用12是不行的

安装vls

npm install -g vls

配置
~/.config/nvim/lua/config/lazy.lua 在末尾加入下面一行

require'lspconfig'.vuels.setup{}

就以上两步竟然直接可以了。

require'lspconfig'.vuels.setup{} 这一行放哪合适我在研究一下。放哪最优,有空时在优化一下。我想写到~/.config/nvim/lua/plugins之中,虽然能用,但是会有错误提示。

试用了一下,element-ui的组件都可以正常提示出来,我非常的满意。

自动配置

我本想手动我都会了,自动肯定更简单。只要执行以下命令就可以搞定

:MasonInstall vetur-vls 

当然输命令的方法不利于分享配置,写在配置里这样:
~/.config/nvim/lua/plugins/lsp.lua
内容如下:

return {{"williamboman/mason.nvim",opts = {ensure_installed = {"vetur-vls"},},}
}

不用做任何额外配置就可以直接使用了。网上很多教程都用的是vue-language-server 并不符合我的需求,不清楚是不是vue2.0与3.0的区别导致的。花了4,5个小时总算把这个解决了。不解决根本睡不着。

话说回来,这里是引用vetur-vls这个名称我怎么看都不像是vue的lsp 这个坑太浪费时间了。


以下是探索过程:

LazyVim的加载机制我还不太熟悉,比如:lsp安装后如何卸载之类的我都不会。

:Mason - opens a graphical status window
:MasonUpdate - updates all managed registries
:MasonInstall <package> ... - installs/re-installs the provided packages
:MasonUninstall <package> ... - uninstalls the provided packages
:MasonUninstallAll - uninstalls all packages
:MasonLog - opens the mason.nvim log file in a new tab window

我上去:MasonUninstallAll 把之前安装的全卸载了。
我发现打开一些类型的文件比如lua,竟然会自动安装lsp.
研究发下Mason关于vue的Lsp有两种

名称LSP
vetur-vlsvuels
vue-language-servervolar

不难看出我上面手动安装的是vuels安装命令应该是:

:MasonInstall vetur-vls 

而我之间错误的认为应该是:

:MasonInstall vue-language-server

这是一个坑啊,我本能的以为vue-language-server的缩写是vuels 从字面意思上讲是这样。

java开发

支持java开发的lsp也有几个,我这里直接选jdtls,因为这个是eclipse提供的,毕竟eclipse也好多年了感觉更靠谱。通过项目首页:https://github.com/mfussenegger/nvim-jdtls 了解到这个jdtls运行环境要求:

  • eclipse.jdt.ls 需要 Java 17
  • 该脚本需要 Python 3.9jdtls

我已经准备好了以上的环境,那么添加java的支持只需要简单的:

:MasonInstall jdtls

等待安装完成后,重新nvim就可以开发java了,非常的方便。
在这里插入图片描述

当然输命令的方法不利于分享配置,写在配置里这样:
~/.config/nvim/lua/plugins/lsp.lua
内容如下:

return {{"williamboman/mason.nvim",opts = {ensure_installed = {"vetur-vls","jdtls"},},}
}

手动安装

自动安装确实方便,但是我打开spring boot基于jdk1.8的项目出现满屏的错误,spring的注解都找不到。完全是一个不可用的状态。
在这里插入图片描述
我记得以前我手动配置的时候是可以正常开发spring项目的啊。
《【视频】零基础neovim搭建Java IDE》
于是我打算手动配置一下。
首先卸载:

:MasonUninstall jdtls

下载jdt-language-server

不同版本下载导航
https://download.eclipse.org/jdtls/milestones/?d

本文中实际下载的版本是:
https://download.eclipse.org/jdtls/milestones/1.34.0/

#创建workspace目录,后面会用到
mkdir -p ~/.local/share/nvim/lsp/jdt-language-server/workspace/folder
cd ~/.local/share/nvim/lsp/jdt-language-server
# 下载jdt-language-server-xxxxx.tar.gz
wget wget https://www.eclipse.org/downloads/download.php\?file\=/jdtls/milestones/1.34.0/jdt-language-server-1.34.0-202404031240.tar.gz
# 解压 前后一下你的文件名,根据实际情况修改
tar -zxvf jdt-language-server-1.34.0-202404031240.tar.gz

环境变量设置

环境变量设置参考:

# 包含 plugin 和 configs 的目录,由jdt-language-server-xxx.tar.gz解压出的
export JDTLS_HOME=$HOME/.local/share/nvim/lsp/jdt-language-server/# 不设置则默认是$HOME/workspace
export WORKSPACE=$HOME/.local/share/nvim/lsp/jdt-language-server/workspace/

配置jdtls

安装插件
~/.config/nvim/lua/plugins/jdtls.lua
内容如下:

return {{"mfussenegger/nvim-jdtls",},}

要配置 nvim-jdtls, 添加以下内容 ftplugin/java.lua 在 neovim 配置基目录 (示例. ~/.config/nvim/ftplugin/java.lua, 详情见 :help base-directory)。

mkdir -p ~/.config/nvim/ftplugin/
nvim ~/.config/nvim/ftplugin/java.lua

我的配置如下:

-- See `:help vim.lsp.start_client` for an overview of the supported `config` options.
local config = {-- The command that starts the language server-- See: https://github.com/eclipse/eclipse.jdt.ls#running-from-the-command-linecmd = {-- 💀'java', -- or '/path/to/java17_or_newer/bin/java'-- depends on if `java` is in your $PATH env variable and if it points to the right version.'-Declipse.application=org.eclipse.jdt.ls.core.id1','-Dosgi.bundles.defaultStartLevel=4','-Declipse.product=org.eclipse.jdt.ls.core.product','-Dlog.protocol=true','-Dlog.level=ALL','-Xmx1g','--add-modules=ALL-SYSTEM','--add-opens', 'java.base/java.util=ALL-UNNAMED','--add-opens', 'java.base/java.lang=ALL-UNNAMED',-- 💀'-jar', '/Users/itkey/.local/share/nvim/lsp/jdt-language-server/plugins/org.eclipse.equinox.launcher_1.6.800.v20240304-1850.jar',-- ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^                                      ^^^^^^^^^^^^^^^^^^^^^^^^^^-- Must point to the                                                     Change this to-- eclipse.jdt.ls installation                                           the actual version-- 💀'-configuration', '/Users/itkey/.local/share/nvim/lsp/jdt-language-server/config_mac',-- ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^        ^^^-- Must point to the                      Change to one of `linux`, `win` or `mac`-- eclipse.jdt.ls installation            Depending on your system.-- 💀-- See `data directory configuration` section in the README'-data', '/Users/itkey/.local/share/nvim/lsp/jdt-language-server/workspace/folder'-- ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^  },-- 💀-- This is the default if not provided, you can remove it. Or adjust as needed.-- One dedicated LSP server & client will be started per unique root_dirroot_dir = require('jdtls.setup').find_root({'.git', 'mvnw', 'gradlew'}),-- Here you can configure eclipse.jdt.ls specific settings-- See https://github.com/eclipse/eclipse.jdt.ls/wiki/Running-the-JAVA-LS-server-from-the-command-line#initialize-request-- for a list of optionssettings = {java = {}},-- Language server `initializationOptions`-- You need to extend the `bundles` with paths to jar files-- if you want to use additional eclipse.jdt.ls plugins.---- See https://github.com/mfussenegger/nvim-jdtls#java-debug-installation---- If you don't plan on using the debugger or other eclipse.jdt.ls plugins you can remove thisinit_options = {bundles = {}},
}
-- This starts a new client & server,
-- or attaches to an existing client & server depending on the `root_dir`.
require('jdtls').start_or_attach(config)

请注意^^^^^^^^^^^^^^^^^^^^^^^^^^上面一行的内容都是必须跟实际情况调整的地方。

完成这一步以后,已经可以正常开发java了。
在这里插入图片描述
并且spring boot的Maven项目依赖也可以正常识别,没有自动安装时的那么报错提示了。

JDK编译版本问题

IDEA中有一些功能,在nvim中我还没有找到完美替代方案,比如:

  • jrebel插件 ,可能vim中有替代方案只是目录我还不会
  • mybatis相关的插件,写sql提示非常方便,我在vim中也没有找到类似的。
  • sql查询,数据库查询,在IDEA中智能提示非常强大,也没找到满意的。

所以开发java的项目,我的IDEA是同时在运行的。项目的启动也是通过IDEA完成的。

因为jdt-language-server这个运行需要jdk17以上的版本,而我现在开发的项目实际上还是用jdk8最多。就会导致一个问题,使用nvim-jdtls开发项目的时候,会自动用jdk18编译项目,就会导致IDEA中无法运行项目。每次都要在idea中重新build才能运行。

经研究最终解决办法:

  1. 环境变量中java使用项目的编译JDK版本,比如:JDK8。
  2. jdt-language-server运行使用的jdk版本在ftplugin/java.lua中直接写死
local config = {cmd = {-- 这里直接指定一个高版本的JDK,不影响项目用低版本编译'/Users/itkey/.soft/java-language-server/scripts/jdks/mac/jdk-18/Contents/Home/bin/java',......

解决以上问题,我终于可以使用vim+idea的组合愉快的写代码了。强强连手,各司其职!!!

lombok支持

cd /Users/itkey/.local/share/nvim/lsp/jdt-language-server/
#下载lombok.jar
wget https://projectlombok.org/downloads/lombok.jar

修改ftplugin/java.lua在-jar前面加一行

	--增加lombok插件支持,getter setter good bye"-javaagent:/Users/itkey/.local/share/nvim/lsp/jdt-language-server/lombok.jar",

搞定!!!这下舒服了。

全部配置

防止有遗漏,我的全部配置文件如下,可供参考:

-- See `:help vim.lsp.start_client` for an overview of the supported `config` options.
local config = {-- The command that starts the language server-- See: https://github.com/eclipse/eclipse.jdt.ls#running-from-the-command-linecmd = {-- 💀'/Users/itkey/.soft/java-language-server/scripts/jdks/mac/jdk-18/Contents/Home/bin/java', -- or '/path/to/java17_or_newer/bin/java'-- depends on if `java` is in your $PATH env variable and if it points to the right version.'-Declipse.application=org.eclipse.jdt.ls.core.id1','-Dosgi.bundles.defaultStartLevel=4','-Declipse.product=org.eclipse.jdt.ls.core.product','-Dlog.protocol=true','-Dlog.level=ALL','-Xmx1g','--add-modules=ALL-SYSTEM','--add-opens', 'java.base/java.util=ALL-UNNAMED','--add-opens', 'java.base/java.lang=ALL-UNNAMED',--增加lombok插件支持,getter setter good bye"-javaagent:/Users/itkey/.local/share/nvim/lsp/jdt-language-server/lombok.jar",-- 💀'-jar', '/Users/itkey/.local/share/nvim/lsp/jdt-language-server/plugins/org.eclipse.equinox.launcher_1.6.800.v20240304-1850.jar',-- ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^                                      ^^^^^^^^^^^^^^^^^^^^^^^^^^-- Must point to the                                                     Change this to-- eclipse.jdt.ls installation                                           the actual version-- 💀'-configuration', '/Users/itkey/.local/share/nvim/lsp/jdt-language-server/config_mac',-- ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^        ^^^-- Must point to the                      Change to one of `linux`, `win` or `mac`-- eclipse.jdt.ls installation            Depending on your system.-- 💀-- See `data directory configuration` section in the README'-data', '/Users/itkey/.local/share/nvim/lsp/jdt-language-server/workspace/folder'-- ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^  },-- 💀-- This is the default if not provided, you can remove it. Or adjust as needed.-- One dedicated LSP server & client will be started per unique root_dirroot_dir = require('jdtls.setup').find_root({'.git', 'mvnw', 'gradlew'}),-- Here you can configure eclipse.jdt.ls specific settings-- See https://github.com/eclipse/eclipse.jdt.ls/wiki/Running-the-JAVA-LS-server-from-the-command-line#initialize-request-- for a list of optionssettings = {java = {}},-- Language server `initializationOptions`-- You need to extend the `bundles` with paths to jar files-- if you want to use additional eclipse.jdt.ls plugins.---- See https://github.com/mfussenegger/nvim-jdtls#java-debug-installation---- If you don't plan on using the debugger or other eclipse.jdt.ls plugins you can remove thisinit_options = {bundles = {}},
}
-- This starts a new client & server,
-- or attaches to an existing client & server depending on the `root_dir`.
require('jdtls').start_or_attach(config)

以下部分是探索失败的过程,可以不看。

java-language-server(未成功仅供参考)

自动安装

安装之前先要安装jdk18,
开始手动之前,我看到了还有一个叫java-language-server的,我想用自动安装的方式试一下。

:MasonInstall java-language-server

很遗憾我自动安装报错了。经我研究是因为执行

mvn package -DskipTests

这一行报错了,网上找到相关解决办法:
https://stackoverflow.com/questions/76459274/unable-to-install-java-language-server-with-mason-lsp-zero
对我并不生效。这篇文章中对我有意思的是这一行命令:

chmod +x /bin/bash

macOS中默认bash执行起来有问题,执行这一行bash至少能执行了。

其实下面这行命令我本地手动执行并不会报错

mvn package -DskipTests

为什么在mason调用时报错,我怀疑是mason调用时,环境变量有问题。目前也又没有发现具体问题出在哪里我就用了一个野路子实现跳过这条命令。

which mvn
/opt/homebrew/bin//mvn

我在bash中查了一个mvn这个命令的位置,虽然我把这个mvn程序替换成其他程序。这样暂时骗过Mason,让它误以为编译通过了。
替换完mvn程序后,在执行

:MasonInstall java-language-server

这次就安装成功了。然后手动执行编译命令:

cd ~/.local/share/nvim/mason/packages/java-language-server
mvn package -DskipTests

测试一下lsp是否安装成功,可以执行:

~/.local/share/nvim/mason/packages/java-language-server/dist/lang_server_mac.sh

返回如下就说明成功了:

11:29:05.521	信息	LSP$1MessageReader run	Placing incoming messages on queue...
11:29:05.521	信息	LSP connect	Reading messages from queue...

虽然这个LSP安装成功了,我不清楚为什么。依然找不到Spring相关的依赖关系。
在这里插入图片描述
智能提示,也是时有时无,不清楚是哪个地方没搞对导致的。不知道如何下手,感觉像是没有识别到maven,或者jdk版本的原因?

手动安装

,我不知道是什么原因。那我就手动安装试试:
https://github.com/neovim/nvim-lspconfig/blob/master/doc/server_configurations.md#java_language_server

手动安装也折腾了一下。官方的文档写的比较简洁。

  1. 下载代码
git clone https://github.com/georgewfraser/java-language-server.git
  1. 安装JDK18
    我本没有JDK18的环境,我用项目中自带的脚本下载java-language-server/scripts/download_mac_jdk.sh 下载后并配置好环境变量。
#jdk18
export JAVA_HOME=/Users/itkey/.soft/java-language-server/scripts/jdks/mac/jdk-18/Contents/Home
export PATH=$JAVA_HOME/bin:$PATH:.
export CLASSPATH=$JAVA_HOME/lib/tools.jar:$JAVA_HOME/lib/dt.jar:.
  1. 编译代码
mvn package -DskipTests

编译完成后,会在dist目录生成相关的程序文件。
4. 运行dist/lang_server_mac.sh

cd dist
./lang_server_mac.sh

运行报错了。
./launch_mac.sh: line 13: ./mac/bin/java: No such file or directory
很明显是缺少文件了,经过我研究解决办法如下:

cd scripts
./link_mac.sh
# 把上一步生成的mac目录移动到dist目录,解决找不到文件问题
mv ./dist/mac ../dist

此时我们在执行:

cd dist
./lang_server_mac.sh

显示信息如下,说明已经成功了。

10:34:15.835	信息	LSP$1MessageReader run	Placing incoming messages on queue...
10:34:15.835	信息	LSP connect	Reading messages from queue...

这篇关于2024年在Vim中开发vue2+java的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/912954

相关文章

HTML5 Mobile Upload

HTML5移动端图片上传并前端预览 用到了HTML5的FileReader对象,主要思想是由于移动端的网络不比PC快,故需要做上传前预览,采用base64编码目前是比较好的方法。前端用FileReader获取图片并转为base64编码并<img>预览,上传到服务器由后台解码生成图片并保存到磁盘。 核心代码: $('input[type=file]').change(function(){

html5 progress元素

progress元素是HTML5中新增的状态交互元素,用来表示页面中某个任务完成的进度,IDL定义如下: interface HTMLProgressElement : HTMLElement {attribute double value;attribute double max;readonly attribute double position;readonly attribut

HTML5上传图片base64编码显示缩略图

<li><label for="username">营业执照</label><a href="javascript:void(0);" class="cert-btn-blue-add"><span class="icon-add-white"></span><input type="file" capture="camera"/>添加图片</a><a class="cert-arrow-ri

jQuery插件 笔记

//闭包限定命名空间(function ($) {//默认参数var defaluts = {foreground: 'red',background: 'yellow'};$.fn.extend({"highLight": function (options) {var opts = $.extend({}, defaluts, options); //使用jQuery.extend 覆盖

开发一个完整的JavaScript组件

http://www.codeceo.com/article/javascript-plugin.html 作为一名开发者,大家应该都知道在浏览器中存在一些内置的控件:Alert,Confirm等,但是这些控件通常根据浏览器产商的不同而形态各异,视觉效果往往达不到UI设计师的要求。更重要的是,这类内置控件的风格很难与形形色色的各种风格迥异的互联网产品的设计风格统一。因此,优秀的前端开发者们

uni-app获取手机通讯录(基于HTML5+)

官方API:https://www.html5plus.org/doc/zh_cn/contacts.html   话不多说,直接上代码 contacts.vue <template><view><button type="primary" @tap="getContacts">获取联系人</button><block v-for="(item,index) in list" :k

好用的vue富文本编辑器记录

vue-quill-editor https://github.com/surmon-china/vue-quill-editor https://www.npmjs.com/package/vue-quill-editor https://blog.csdn.net/nickroprak/article/details/86645519(自定义图片上传) *默认上传图片为base64编吗

vuex重点笔记

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。 这个状态自管理应用包含以下几个部分: state,驱动应用的数据源;view,以声明方式将 state 映射到视图;actions,响应在 view 上的用户输入导致的状态变化。 但是,当我们的应用遇到多个组件共享状态时,单向数据流的简

vue 电脑端调摄像头拍照,canvas转base64,base64转图片文件并上传到服务器

VUE(用了iview):  <template><div id='cameraUpload'><Form ref='member' :label-width='120' :model='member' :rules='memberRule' style='width: 600px'><FormItem label='照片' prop='photo'><div v-if="member.phot