VScode+Maven+Tomcat构建java Web开发环境

前言

本文记录使用vscode搭建基于maven的Java Web 环境。

注意

经过查证，VSC并不适合作为JSP文件的编辑器，就连微软也对此持推诿态度，因此，我们建议读者使用Intellij IDEA或者Eclipse来开发JAVA Web程序。

如果你仍然执着于使用VSC编辑你的JSP(犟种)，你可以继续往下看。

1 资源列表

1.1 相关链接

名称 链接1（官网） 链接2（本站）
VS Code Download Visual Studio Code
Maven 3 Maven – Download Apache Maven
Tomcat 9 Apache Tomcat® - Apache Tomcat 9 软件下载
open JDK 17 存档的 OpenJDK GA 版本 (java.net)

部分站点国内访问受限，无法打开请自行解决。

1.2 说明

  1. 如未特殊说明，如果没有exe文件，请下载zip格式的文件，稍后提供环境变量配置方法。

  2. vscode建议下载system installer版本，安装时勾选添加到环境变量和添加右键菜单。

  3. maven下载最新版本即可

  4. Tomcat请下载9.x版本zip文件，10以及最新版本仍然有问题。

  5. JDK请下载17（zip资源），较高的版本（21）在某些情况下导致Maven无法生成pom文件。

2 安装和配置资源

2.1 安装

除了VS Code之外，其他的软件都解压到预安装位置，本文对应位置如下：

名称 位置
open JDK 17 D:\Program Files\Java\JDK_17
Tomcat 9 D:\Program Files\Servers\Tomcat_9
Mavern 3 D:\Program Files\Servers\Maven_3

2.2 配置环境变量以及配置文件

本小节所有环境变量均为系统环境变量，且所有名为Path的变量均为path变量追加内容

注意

误删Path将会导致系统出现无法拯救的问题，请当心!!!

2.2.1 Open JDK

Name Value
JAVA_HOME D:\Program Files\Java\JDK_17
Path %JAVA_HOME%\bin;

2.2.2 Maven 3

  • 环境变量

Name Value
M2_HOME D:\Program Files\Servers\Maven_3
Path %M2_HOME%\bin;

  • 配置文件

    位置为：${安装路径}\conf\setting.xml

    1. 配置本地仓库

      定位到49行左右,有如下注释内容，按照例子在下方添加本地仓库储存位置,建议位置为安装路径下的repo文件夹

      1
      2
      3
      4
      5
      6
      7
       <!-- localRepository
        | The path to the local repository maven will use to store artifacts.
        |
        | Default: ${user.home}/.m2/repository
       <localRepository>/path/to/local/repo</localRepository>
       -->
      <!--在这里添加下面的内容-->
      1
      <localRepository>D:\Program Files\Maven_3\repo</localRepository>

    2. 添加阿里云镜像

      在Mirrors节点添加以下内容

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      <mirrors>
        <!-- mirror
         | Specifies a repository mirror site to use instead of a given repository. The repository that
         | this mirror serves has an ID that matches the mirrorOf element of this mirror. IDs are used
         | for inheritance and direct lookup purposes, and must be unique across the set of mirrors.
         |
        <mirror>
          <id>mirrorId</id>
          <mirrorOf>repositoryId</mirrorOf>
          <name>Human Readable Name for this Mirror.</name>
          <url>http://my.repository.com/repo/path</url>
        </mirror>
         -->
          <!--在此添加-->
      </mirrors>
      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      19
      20
      21
      22
      <!-- 阿里云仓库 -->
        <mirror>
            <id>alimaven</id>
            <mirrorOf>central</mirrorOf>
            <name>aliyun maven</name>
            <url>http://maven.aliyun.com/nexus/content/repositories/central/</url>
        </mirror>
           
        <!-- 中央仓库1 -->
        <!-- <mirror>
            <id>repo1</id>
            <mirrorOf>central</mirrorOf>
            <name>Human Readable Name for this Mirror.</name>
            <url>http://repo1.maven.org/maven2/</url>
        </mirror>
        <mirror>
            <id>repo2</id>
            <mirrorOf>central</mirrorOf>
            <name>Human Readable Name for this Mirror.</name>
            <url>http://repo2.maven.org/maven2/</url>
        </mirror> -->

2.2.3 Tomcat 9

Name Value
CATALINA_TMPDIR D:\Program Files\Servers\Tomcat_9
Path %CATALINA_TMPDIR%\bin;

3 环境检测

依次使用以下命令检测环境安装是否正确。（CMD中）

1
2
3
4
5
6
7
8
# java 检测
Java -version

# Maven 检测
mvn -version

# Tomcat 检测
catalina version

若输出类似以下内容，则表示环境安装不正确！请重新核对

1
2
3
4
5
6
7
8
9
10
11
12
13

# CMD 中
'XXX' is not recognized as an internal or external command,
operable program or batch file.

# PowerShell 中
xxx : The term 'xxx' is not recognized as the name of a cmdlet, function, script file, or operable program. Check the spe
lling of the name, or if a path was included, verify that the path is correct and try again.
At line:1 char:1
+ jb
+ ~~
    + CategoryInfo          : ObjectNotFound: (jb:String) [], CommandNotFoundException
    + FullyQualifiedErrorId : CommandNotFoundException

4 VS Code配置

4.1添加JAVA_Web用户配置

在VSCode左下角设置中添加一个新的用户配置，名称为JAVA_Web，用于和其他开发环境区分。

4.2 安装插件

安装如下插件（仅包括显式已经安装的插件）

image-20240311103529326

image-20240311103651343

image-20240311103724402

其他插件不是必须的，但是你仍然可以安装他们，例如格式化代码插件和主题插件，亦或者是AI插件。

5 创建工程

5.1 创建工程

在VSCode中使用Ctrl+Shift+p打开命令栏，输入如下内容，如果插件安装正确，将会有自动提示。

1
java create new project

然后依次选择高亮的选项

image-20240311105802380

image-20240311105837761

提示

在这两处你需要按下回车或者输入自定义内容

输入版本号

确认信息

5.2 配置插件

5.2.1 服务器插件

image-20240311193652796

在此处选择create New Server…

好吧，犟种能看到这也是真真正正的犟种了，下面的链接可能能帮到你。（实在是不想写了）

只看关于CSC插件部分哈————VSCode中开发JavaWeb项目（Maven+Tomcat+热部署）_vscode运行javaweb项目-CSDN博客

5.2.2 nvm-package-auto插件

mvn-package-auto - Visual Studio Marketplace

这玩意监听文件改动，用来自动执行mvn package命令。

在你的 ./.vscode/settings.json文件里面写上下面的内容

1
2
3
4
5
6
7
//写在根节点下
// 自动执行mvm的命令
"mavenPackageAuto.maven.executable.options": "clean package -f \"pom.xml\"",
// 是否启用自动执行命令
"mavenPackageAuto.enable": true,
// 不知道哪儿冒出来的，好像不写也没啥事
"java.configuration.updateBuildConfiguration": "interactive"

5.2.3 Tomcat Maven Helper插件

这玩意自己看介绍吧。

This Visual Studio Code extension allows you to trigger a hot reload using Maven whenever a file in your project is modified.

大概就是这玩意可以热部署到Tomcat，配合5.2.2的插件就可以实现热部署了，代价是你的电脑需要足够好。

用法就是 Ctrl + Shift + P输入Live Maven Install来使用他。

Usage

Open the Command Palette (Ctrl+Shift+P). Type “Live Maven Install” and select the corresponding option. The extension will automatically trigger a hot reload using Maven whenever a file in your project is modified.

I hope this extension is helpful for you! If you have any questions or need further assistance, feel free to ask.

结语

大概就是怎么些玩意吧，祝你使用愉快~~~