由eclipse 转入VSCode 搭建springboot初步使用记录

  • 下载安装vscode 这里不在讲述安装过程
  • 打开vscode 后,Ctrl + shift + x 打开插件商店
  • 使用Ctrl + , 快捷键 打开settings选项
  • 接下来 点击Run或者使用F5运行应用


下载安装vscode 这里不在讲述安装过程

下载链接:vscode

打开vscode 后,Ctrl + shift + x 打开插件商店

vscode导入axios vscode导入eclipse项目_vscode

jdk 和maven 没有安装的请先自行安装.

选择安装一下两个插件: Java Extension Pack. Spring boot Extension Pack

vscode导入axios vscode导入eclipse项目_springboot_02

vscode导入axios vscode导入eclipse项目_java_03

以下我也安装了jQuery HTML 和vscode-icon 插件 进行更有好的显示和提示

vscode导入axios vscode导入eclipse项目_java_04


vscode导入axios vscode导入eclipse项目_java_05


vscode导入axios vscode导入eclipse项目_vscode_06

如果你习惯于eclipse 的快捷键 可进行 如下配置

VSCode 设置eclipse 风格快捷键
【首选项】–>【键盘快捷方式】–>【用于高级自定义打开和编辑 keybindings.json】

[
    { "key": "alt+/",  "command": "editor.action.triggerSuggest","when": "editorTextFocus" },
    { "key": "ctrl+d", "command": "editor.action.cutLines","when": "editorTextFocus" },
    { "key": "ctrl+alt+down","command": "editor.action.copyLinesDownAction", "when": "editorTextFocus" },
    { "key": "ctrl+alt+up", "command": "editor.action.copyLinesUpAction", "when": "editorTextFocus" },
    { "key": "shift+alt+r","command": "editor.action.rename","when": "editorTextFocus" },
    { "key": "ctrl+shift+c","command": "editor.action.commentLine","when": "editorTextFocus" },
    { "key": "ctrl+d","command": "editor.action.deleteLines","when": "editorTextFocus" },
    { "key": "ctrl+k","command": "editor.action.addSelectionToNextFindMatch","when": "editorFocus"},
    { "key": "alt+shift+2","command": "workbench.action.splitEditor"},
    { "key": "ctrl+shift+f","command": "editor.action.format","when": "editorTextFocus"},
]

使用Ctrl + , 快捷键 打开settings选项

打开settings.json文件

vscode导入axios vscode导入eclipse项目_springboot_07


vscode导入axios vscode导入eclipse项目_eclipse_08

配置Java HOME 和maven

{
    "java.home": "/usr/java/jdk1.8.0_181",
    "maven.executable.path": "/home/XXX/maven/apache-maven-3.5.4/bin/mvn",
    "java.configuration.maven.userSettings": "/home/XXX/maven/settings.xml",
    "workbench.iconTheme": "vscode-icons",
}

接下来 我是从spring官网构建一个简单的springboot 项目;start.spring.io

vscode导入axios vscode导入eclipse项目_eclipse_09

选择了以war 包打包. 依赖选择了 web devtools thymeleaf 三个

将下载下来的zip 文件解压. 该文件夹就是我们的项目.

使用vscode 选择 file -> open folder 打开该文件夹

vscode导入axios vscode导入eclipse项目_springboot_10


其中controller 部分为自己创建.

vscode导入axios vscode导入eclipse项目_eclipse_11


此处贴出代码. 方便copy 哈哈

package com.example.demo.controller;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;


@Controller
public class BaseController{

    @RequestMapping("/index")
    public String index(){

        return "index";
    }

    @RequestMapping("/list")
    public String list(){

        return "user/list";
    }

    
    @RequestMapping("/base")
    @ResponseBody
    public String base(){

        return "测试信息";
    }
}

在templates 目录下 我们创建了一个index.html文件

vscode导入axios vscode导入eclipse项目_vscode导入axios_12

贴

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    首页信息展示
</body>
</html>

使用了thymeleaf模板. 此处为防止严格的html5错误检查 加入依赖和配置

<!--启用不严格检查html-->
 		<dependency>
    		<groupId>net.sourceforge.nekohtml</groupId>
    		<artifactId>nekohtml</artifactId>
    		<version>1.9.22</version>
 		</dependency>

application.properties文件 加入如下配置

spring.thymeleaf.mode=LEGACYHTML5

接下来 点击Run或者使用F5运行应用

vscode导入axios vscode导入eclipse项目_vscode导入axios_13


访问index (http://localhost:8080/index)这里我的端口配置为8888 默认端口8080

页面显示如下. 项目成功搭建启动

vscode导入axios vscode导入eclipse项目_eclipse_14

如果大家有好的相关文章 欢迎评论分享