Java 后端工程师使用 VS Code 解锁前端开发新姿势

零、前言

对于前后端没有严格分工的项目而言，Java 工程师们仍然需要做部分前端页面开发，开发方式有许多种，比如：

使用 FreeMarker 模板标记的前后端结合的开发方式；使用 ajax 异步加载数据的前后端分离的开发方式；使用 webpack 等工具的现代化 Web 开发，前后端完全分离。

不同的项目之间有细微的差别，其中第二种属于传统的开发方式，且多采用一个项目包含 Java、Web 两种代码的方式，本文主要讲在使用这种方式的情况下如何使用新的开发姿势来提升工作效率。

通过本文的学习，你将大幅提升前端编码效率，解锁新的姿势。

一、准备开发工具

开发工具可以选择：IDEA、WebStorm、Visual Studio Code 等等，IDEA 和 WebStorm 属于同类，VS Code 较轻量级，本文主要介绍使用 IDEA 和 VS Code 的情况。

IDEA

在 IDEA 中进行开发的优势是可以在一个 IDE 中完成后端和前端代码的修改，缺点是当只需要修改前端代码时需要打开较大的工程，并且在编译运行的环节都较为缓慢。

在 IDEA 中运行程序时，修改前端代码需要重新编译项目，进行以下设置可以打开即时编译。

Visual Studio Code

IDEA 中也可以进行一定的前端开发，但毕竟不是为前端开发准备的 IDE，Visual Studio Code 搭配上丰富的插件可以更好地完成 Web 开发，并且更加轻量快速，在修改前端代码时也不需要进行 Java 项目级别的编译。

VS Code 有轻量、便捷、快速专业等优点，因此在编写前端代码时其是更好的一个选择，但在使用 VS Code 时也存在一些需要解决的问题，下个部分重点讲解如何解决这些问题。

二、如何把 VS Code 变成专业的 Web IDE

VS Code 上拥有丰富的插件，装上之后就像给工具装上了翅膀，可以在代码的世界里自由的翱翔，下面就是几个必装的插件，也是解锁姿势的重点。

Live Server

这是本次要重点讲解的插件，使用 IDEA 做前端开发时可以启动 Spring Web 程序，同样在使用 VS Code 时也需要一个服务端提供前端代码的运行环境，那么就需要安装上这个插件。

安装后，点击右下角的 Go Live 按钮即可运行。

此时 ajax 请求不到接口，需要设置接口代理，找到 Live Server 的代理设置，进行如下修改即可（视情况改为 spring 程序的端口）。

装了该插件已经可以进行 Java 后台系统的前端开发，但要追求更高的开发效率，还可以安装以下的插件。

Javascript 相关插件Git 相关插件图标主题更多插件

还有许多小的插件，期待你自己去探索。

三、姿势的演进

姿势是不断演进的，技术是永不停歇的，把工具用好能够事半功倍。