聊聊vscode中怎么搭建一个Java项目

vscode中怎么搭建一个java项目?下面本篇文章给大家介绍一下在vscode中搭建java项目的方法,希望对需要的朋友有所帮助!

聊聊vscode中怎么搭建一个Java项目

多年来,Java开发一直被三大IDE所主宰——Eclipse、InelliJ IDEA和NetBeans。但我们还有其他好的选择。在越来越多的通用多语言代码编辑器中,Visual Studio Code已经成为一个佼佼者,它提供了令人印象深刻的Java支持。VS Code还为其他技术栈提供了一流的支持,包括前端JavaScript框架、Node.js和Python。

Visual Studio Code应该是你的下一个Java IDE吗?本文介绍了如何使用Visual Studio Code用Spring构建企业级Java后端,并将其与Svelte JavaScript前端相连。

设置Spring Boot

要完成本教程的构建,你需要安装Java和Maven。如果你还没有的话,你还需要为你的系统安装最新的Visual Studio Code发行版。这是一个简单的安装过程。

立即学习“Java免费学习笔记(深入)”;

现在让我们直接进入一个新项目。你将使用Spring Initializr来创建一个新的Spring Boot Web应用。打开VS Code,点击左下角的扩展图标。这将让你搜索可用的插件(有很多)。键入 “spring init”,你会看到Spring Initializr Java支持扩展。如图1所示,安装它。

图1.安装Spring Initializr扩展

1.png

一旦安装完毕(不会花很长时间),你可以通过命令行使用它,可以用Ctrl-Shift-P(或从主菜单中View -> Command Palette)来访问。打开命令行,输入 “spring init”,你会看到新安装的命令。运行它。

现在跟着向导走。你可以接受大多数默认。

在添加依赖项时,添加Spring Boot Web和Spring DevTools。(你可以稍后通过右键单击POM文件并选择 “添加启动器 “来添加更多的依赖项)。你还要为项目选择一个位置;只要在你的本地驱动器上选择一个方便的位置。

一旦新项目被创建并加载到你的工作区,你可以通过输入Ctrl-Shift-`或从Terminal -> New Terminal来打开一个命令行终端。

在终端中,输入mvn spring-boot:run。第一次这样做时,Maven会下载新的依赖项。完成后,开发服务器将开始运行。你可以通过打开浏览器,访问localhost:8080来验证这一点。你会看到一个默认的 “not found “错误页面,因为我们还没有定义任何路由,但这可以验证服务器已经启动并在监听。

你可以按Ctrl-Shift-P键,输入 “Demo”,调出DemoApplication.java文件,快速访问文件。打开它,你会看到一个典型的独立的Spring Boot启动器应用程序。

现在我们要安装Java扩展包,它为我们提供了各种功能,如IntelliSense和上下文敏感的资源创建。回到扩展菜单,输入 “Java扩展”,然后安装Java扩展包。最后,添加Spring Boot扩展包。现在你会注意到,当你打开DemoApplication.java文件时,VS Code会在源文件中提供运行和调试命令。

导入Java项目

在这一点上,Visual Studio Code理解Java,并会提示你。”这个项目包含Java,你想导入它吗?”继续,选择 “总是”。一旦这样做了,VS Code就能对Java进行自动完成等操作。

我们来添加一个REST控制器。打开文件视图(左侧菜单的左上方),右击/src/com/jay/demo,选择 “New File”。将文件命名为MyController.java,如清单1所示。

清单1.VS代码中的Java

package com.jay.demo;public class MyController {}

首先,用@RestController来注释这个类。请注意,在安装了扩展后,你有完全的自动完成支持。还需要注意的是,你总是可以通过把光标放在你需要帮助的地方,然后输入Ctrl-space来请求IntelliSense和自动完成,这将使VS Code根据你当前的位置提供建议。如果你用过Eclipse,就会很熟悉,这是同一个热键。

在新的MyController类中,开始输入 “Get…”,你会得到一个自动完成的GetMapping片段;继续并选择它。这将创建一个基本的GET映射,我们将对其进行修改,如清单2所示。

清单2 基本的GET映射

@RestControllerpublic class MyController {  @GetMapping(value="/")  public String getMethodName(@RequestParam(required = false) String param) {      return "test";  }}

现在如果你打开localhost:8080,你会看到一个简单的 “测试 “响应。注意,由于Spring DevTools和spring-boot:run,服务器正在自动重新加载变化。

创建一个Svelte前端

现在让我们打开一个新的终端–你可以通过选择Terminal -> Split-Terminal来并排运行终端。在新的终端中,进入一个方便的目录(不在Java项目内),创建一个新的Svelte前端,其命令如清单3所示。

清单3 Svelte的前端脚手架

npx degit sveltejs/template vs-java-frontendcd vs-java-frontendnpm installnpm run dev

现在你应该能够浏览到localhost:5000,并看到Svelte的问候页面。

将前端添加到工作区

接下来,在文件资源管理器中右击Demo项目下,选择 “添加文件夹到工作区”。导航到我们刚刚用Svelte创建的前端项目。这将把前端添加到VS Code中,作为项目工作区的一部分,所以我们可以编辑它。现在将Svelte for VS Code扩展添加到VS Code,使用与上面添加Java扩展时相同的过程。一旦该扩展被安装,VS Code将能够同时处理前端的JavaScript框架和后端的Java。

连接前端和后端

我们可以通过使用Ctrl-Shift-P打开app.svelte文件,并将脚本修改为清单4的样子来测试前端与后端的通信。清单4 后端通信

            export let name;            async function loadData(){                        let response = await fetch("http://localhost:8080");                        name = await response.text();            }            loadData();

清单4运行一个函数,向我们的后端端点发射一个简单的GET请求,并将响应放入name变量,然后反映在标记中。

Java运行时配置

要获得有关和配置你的Java运行时的信息,你可以打开命令行(Ctrl-Shift-P)并打开 “配置Java运行时”。你会看到一个类似图2的屏幕。 

图2.配置Java运行时

2.png

注意,VS Code已经检测到你所安装的JDK,并确定哪些项目在使用哪个版本。它还允许你从IDE中安装新的版本。

调试Java

在VS Code中调试你的Java也很简单。如果演示应用程序正在运行,请停止它。右键点击DemoApplication文件,选择Debug。Spring Boot将以调试模式运行。

打开MyController,双击第14行左边的红点,设置一个中断点。现在重新加载localhost:5000页面。断点会被抓住,你会看到一个像图3一样的屏幕。

图3.调试一个Java文件

3.png

 注意菜单栏允许你继续、进入、跨步等。从这里你有完整的代码调试能力,包括从底部的调试控制台获得变量状态和运行命令的能力。

运行测试

现在打开DemoApplicationTests.java文件,它是由Spring Initializr创建的。注意到有一个 “运行测试 “打开。点击这个。(你也可以右击该文件,选择 “运行Java”。)

测试将运行,一个复选标记将变得可用 – 这允许你查看测试运行结果,如图4所示。

图4.查看JUnit结果

4.png

保存工作区配置

当你关闭VS Code时,它会提示你保存工作区配置,建议命名为workspace.code-workspace。保存配置,当你再次打开项目时,你会发现所有的设置都已到位。

Java的VS代码

在Visual Studio Code中发现的Java功能可以与更传统的Java IDE中的功能相媲美,并安装了正确的扩展。不同的是。VS Code往往更轻巧,反应更快,而且通常都能正常工作,不需要大惊小怪。

这种速度和简易性与无缝使用其他技术栈的能力相结合–意味着你不必换档到一个新的环境或与配置打交道–使VS Code成为Java开发的一个引人注目的选择。

更多关于VSCode的相关知识,请访问:vscode教程!!

以上就是聊聊vscode中怎么搭建一个Java项目的详细内容,更多请关注创想鸟其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 chuangxiangniao@163.com 举报,一经查实,本站将立刻删除。
发布者:程序猿,转转请注明出处:https://www.chuangxiangniao.com/p/58854.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2025年11月10日 11:18:32
下一篇 2025年11月10日 11:21:04

相关推荐

  • 使用 Mask 导入本地图片时,如何解决跨域问题?

    跨域疑难:如何解决 mask 引入本地图片产生的跨域问题? 在使用 mask 导入本地图片时,你可能会遇到令人沮丧的跨域错误。为什么会出现跨域问题呢?让我们深入了解一下: mask 框架假设你以 http(s) 协议加载你的 html 文件,而当使用 file:// 协议打开本地文件时,就会产生跨域…

    2025年12月24日
    200
  • 为什么在 React 组件中无法获得 Tailwind CSS 语法提示?

    为什么在 React 组件中无法获得 Tailwind CSS 语法提示? 你在 VSCode 中编写 HTML 文件时,可以正常获取 Tailwind CSS 语法提示。但当你尝试在 React 组件中编写 Tailwind CSS 时,这些提示却消失不见了。这是什么原因造成的? 解决方案 要解决…

    2025年12月24日
    000
  • 如何在 VSCode 中为 React 组件启用 Tailwind CSS 提示?

    在 vscode 中为 react 组件启用 tailwind css 提示 如果你在使用 vscode 编写 react 组件时,发现 tailwind css 提示无法正常显示,这里有一个解决方法: 安装 tailwind css intellisense 插件 这是实现代码提示的关键,确保你已…

    2025年12月24日
    200
  • Vue3 中如何将页面上的 PX 单位转换为 REM?

    vue3 下如何实现某个页面 px 自适应到 rem? 在 vue3 中,您可以在某个页面中使用 px 转 rem 的自适应功能,以免影响其他项目 ui 框架。以下是实现方法: 使用 jquery 获取页面宽度,并将其作为基准值。例如,使用 375 作为基准,您可以在页面 mounted 生命周期函…

    2025年12月24日
    000
  • 如何实现 Vue 3 项目中特定页面自适应,避免影响全局 UI 框架?

    自适应页面 px 到 rem 插件探索 在 vue 3 项目中,开发者有时需要让某个特定页面具有自适应大小,即根据不同分辨率自动调整 px 到 rem 的转换。然而,传统的 px-to-rem 插件可能会影响整个项目的 ui 框架。 为了解决这个问题,这里提供了一种利用 javascript 和 v…

    2025年12月24日
    000
  • Vue 3 页面如何实现 px to rem 自适应?

    如何在 vue 3 页面中实现 px to rem 自适应? 在 vue 项目中,有时需要让特定的页面进行 px to rem 自适应,以实现自动缩放。以下是一个可用的解决方案: 使用 javascript 获取页面宽度,并以 375px 作为基准值。例如: let appwidth = $(‘#a…

    2025年12月24日
    400
  • CSS 砌体 Catness

    css 就像技术中的其他东西一样 – 它总是在变化和发展。该领域正在进行的开发是 css 网格布局模块级别 3,也称为 css masonry 布局。 theo 制作了一段视频,介绍了它的开发方式以及苹果和谷歌就如何实施它进行的辩论。 所有这些让我很高兴尝试 css 砌体! webkit…

    好文分享 2025年12月24日
    000
  • 如何解决VSCode中折叠部分的代码复制问题?

    Vscode中折叠代码的复制方法 当Vscode中的代码过多时,可以将其折叠起来以方便查看和编辑。不过,有时用户可能会发现折叠后复制代码时只复制了显示的部分,而折叠部分没有被复制。以下是如何解决此问题的方法: 使用快捷键Ctrl+C直接复制 当代码折叠时,直接使用Ctrl+C快捷键复制即可复制所有代…

    2025年12月24日
    000
  • 如何复制折叠的代码?

    Visual Studio Code 中如何复制折叠的代码? Visual Studio Code (vscode) 中,当遇到过长的代码时,为了提高可读性和简洁性,开发人员会经常使用折叠功能将代码折叠起来。然而,在折叠代码后,直接按住 Ctrl + C 复制代码时,只会复制展开的部分,而折叠的部分…

    2025年12月24日
    000
  • 如何在 VSCode 复制折叠的代码?

    如何复制折叠的 VSCode 代码 使用 VSCode 时,代码过长可能会造成不便。在折叠代码后,发现无法正常复制折叠的部分,令人感到烦恼。本文将介绍一种解决方案,帮助你轻松复制折叠的 VSCode 代码。 问题:如何复制折叠起来的 VSCode 代码? 当你折叠代码后,直接选中复制只会复制未折叠的…

    2025年12月24日
    000
  • CSS 太棒了!

    我正在学习什么 css 赋予了页面活力。多年来,css 变得越来越强大,并且已经开始用于制作以前需要 javascript 的动画。本周我一直在研究它的一些更高级的属性。 媒体查询 媒体查询几乎已经成为新时代设备的必需品。随着智能手机的出现,通过手机消费媒体的人比任何其他设备都多。因此,网站必须在移…

    2025年12月24日
    000
  • 试验 Tailwind CSS:快速指南

    tailwind css 是一个实用性优先的 css 框架,因其灵活性和易用性而在 web 开发人员中广受欢迎。 tailwind css 在 npm 上的每周下载量超过 950 万次(2024 年 8 月 5 日),显然它是 web 开发社区的最爱。在这篇博文中,我们将探讨如何在不设置本地开发环境…

    2025年12月24日
    000
  • VSCode如何使用HTML插件_高效开发环境配置【技巧】

    VSCode中HTML开发需配置五项功能:一、启用内置HTML语言支持;二、配置Emmet实现快捷展开;三、安装Live Server插件实现自动刷新预览;四、启用Auto Rename Tag同步修改成对标签;五、配置Prettier实现HTML格式自动化。 如果您在VSCode中编写HTML文件…

    2025年12月23日
    000
  • 怎么在vscode中运行html_vscode运行html文件步骤【教程】

    使用Live Server插件可实现实时预览,安装后右键HTML文件选择Open with Live Server即可在浏览器中自动打开并实时刷新页面。 如果您在使用 VSCode 编辑 HTML 文件,但无法直接查看页面效果,可以通过多种方式快速预览和运行 HTML 文件。以下是具体的操作步骤: …

    2025年12月23日
    000
  • 怎么进入html5编辑_用VSCode/记事本打开.html文件即可进入HTML5编辑【进入】

    最直接编辑HTML5文件的方式是用文本编辑器打开.html文件:一、VSCode右键打开或拖拽加载;二、记事本右键打开并设UTF-8编码;三、VSCode命令面板快速搜索打开。 如果您希望对HTML5文件进行编辑,最直接的方式是使用文本编辑器打开已有的.html文件。以下是具体操作步骤: 一、使用V…

    2025年12月23日
    000
  • vscode设置html5环境_插件配置与代码片段设置【教程】

    若VS Code中HTML文件缺乏语法高亮、智能补全及HTML5结构快速生成,需安装Auto Close Tag、Auto Rename Tag、CSS class IntelliSense和HTML Boilerplate插件,启用Emmet并配置html关联与格式化设置。 如果您在 Visual…

    2025年12月23日
    000
  • 怎么在vscode运行html_vscode运行html步骤【指南】

    答案:在VSCode中运行HTML需安装Live Server扩展。1. 创建并保存HTML文件;2. 安装Ritwick Dey开发的Live Server插件;3. 右键选择“Open with Live Server”即可在浏览器中实时预览,修改后自动刷新。 在 VSCode 中运行 HTML…

    2025年12月23日
    000
  • vscode怎么编译运行html_vscode编译运行html步骤【指南】

    使用Live Server插件可实时预览HTML页面,安装后右键选择Open with Live Server即可在浏览器中查看并支持热重载。 如果您在使用 Visual Studio Code 编辑 HTML 文件,但无法查看页面效果,可能是因为缺少正确的运行环境或配置。以下是几种在 VSCode…

    2025年12月23日
    000
  • vscode怎么运行html代码框架_vscode运行html框架方法【教程】

    使用Live Server插件可快速预览HTML,安装后右键选择“Open with Live Server”即可在浏览器中实时查看页面效果。 如果您在使用 Visual Studio Code 编辑 HTML 文件,但无法直接查看页面效果,可以通过多种方式快速运行并预览 HTML 代码。以下是几种…

    2025年12月23日
    000
  • vscode运行html慢怎么办_解vscode运行html慢问题【技巧】

    使用Live Server插件启动本地服务器预览HTML,禁用非必要扩展以释放资源,优化大体积静态文件引入方式,清除浏览器缓存并切换至高性能浏览器,调整VSCode自动保存与文件监听设置,可显著提升加载速度。 如果您在使用VSCode运行HTML文件时发现加载或预览速度较慢,可能是由于插件配置、浏览…

    2025年12月23日
    000

发表回复

登录后才能评论
关注微信