宇宙最强开发工具VScode快速搭建前后端分离环境【VUE+Springboot】

VS Code 的全称是 Visual Studio Code，是一款开源的、免费的、跨平台的、高性能的、轻量级的代码编辑器。它在性能、语言支持、开源社区方面，都做得很不错，是这两年非常热门的一款开发工具，它不仅有提升开发体验的界面、轻量化的编辑器，还有丰富而强大的插件，这些优秀的插件使得VS Code生态体系更加吸引人，让开发效率大大提升。

总之VS Code 软件实在是太酷、太好用了，越来越多的新生代互联网青年正在使用它。

本章分别从前端开发、后端开发两个角度重点介绍：

安装vscode,下载压缩包zip解压完成安装

---

2、解压完成后，启动vscode，设置中文支持，汉化包安装完成后，重启vscode

3、配置VScode前端开发环境：在vscode外先安装好nodejs开发环境

node下载（必选）：https://nodejs.org/zh-cn/

yarn下载（可选）：https://yarn.bootcss.com/

如果国外地址下载不了，可以更改为国内的地址：

https://www.newbe.pro/Mirrors/Mirrors-Yarn/

Python（可选）：https://www.python.org/

例如：

4、导入vue工程后，vscode工具会自动提示安装相应的插件支持vue开发

例如：导入cbitedu-ui工程后

5、在终端中根据自己项目的真实情况执行下面常用命令：

//如果因网络问题下载前端包出错，可以先执行生成的npm相关的文件，再重新映射到淘宝镜像重新下载
删除 C:\Users\Administrator\AppData\Roaming 路径下的 npm和npm-cache2个文件夹
# install dependencies
npm config set registry http://registry.npm.taobao.org/
npm install

# serve with hot reload at localhost:8081
npm run dev

# build for production with minification
npm run build

Compiles and hot-reloads for development
npm run serve
Compiles and minifies for production

6、运行项目npm run dev

二、后端开发

1、在vscode开发工具中开发spring boot项目

安装如下两个主要扩展即可，这两个扩展已关联java项目开发主要使用的maven、springboot等所需要的扩展。

安装插件  Java Extension Pack

安装此插件时会同时安装下列关联插件：
- Language Support for Java(TM) by Red Hat

主要功能：代码导航，自动补全，重构，代码片段
- Java Extension Pack

- Java Test Runner

运行和调试JUnit的测试用例
- Maven for Java

对Maven的支持。

安装插件 Spring Boot Extension Pack

安装此插件时会同时安装下列关联插件： 
- Spring Boot Tools 
- Cloudfoundry Manifest YML Support 
- Concourse CI Pipeline Editor 
- Spring Initializr Java Support

开始步骤：

1. 在 Visual Studio Code 中打开扩展视图(Ctrl+Shift+X)。
2. 输入“java”搜索商店扩展插件。
3. 找到并安装 Java Extension Pack (Java 扩展包)，如果你已经安装了 Language Support for Java(TM) by Red Hat，也可以单独找到并安装 Java Debugger for Visual Studio Code 扩展。
4. 输入“Spring Boot Extension”搜索商店扩展插件。
5. 找到并安装 “Spring Boot Extension Pack”。安装过程中可能会比较慢，耐心等待即可。

2、统一配置Java开发环境：

点左下角的设置图标->设置，打开设置内容筛选框，输入java.home，然后点击右侧的打开json格式setting：

3、分别配置JDK、Maven、字体、皮肤等设置内容如下：可以直接复制些段内容至settings.json中，提示如果没有相关组件带波浪线的，根据提示在插件中安装即可

或直接在云盘中直接下载setting.json和maven的setting.xml文件

{ // The Cursive font is operator Mono, it's $200 and you need to buy it to get the cursive
    "editor.fontFamily": "Fira Code,Operator Mono, Menlo, Monaco, 'Courier New', monospace",
    "editor.fontSize": 17,
    "editor.lineHeight": 25,
    "editor.letterSpacing": 0.5,
    "files.trimTrailingWhitespace": true,
    "editor.fontWeight": "400",
    "prettier.eslintIntegration": true,
    "editor.cursorStyle": "line",
    "editor.cursorWidth": 5,
    "editor.cursorBlinking": "solid",
    "editor.renderWhitespace": "all",
    "editor.fontLigatures": true,
    "editor.mouseWheelZoom": true,
      "java.configuration.runtimes": [
          {
            "name": "JavaSE-1.8",
            "path": "F:\\javaee\\jdk\\jdk1.8.0_281",
          },
          {
            "name": "JavaSE-11",
            "path": "F:\\javaee\\jdk\\jdk-11.0.10",
          },
        ],
     "workbench.startupEditor": "newUntitledFile",
      "java.errors.incompleteClasspath.severity": "ignore",
       "java.jdt.ls.java.home": "F:\\javaee\\jdk\\jdk-11.0.10",
      "files.exclude": {
          "**/.classpath": true,
          "**/.project": true,
          "**/.settings": true,
          "**/.factorypath": true
      },
      "editor.suggestSelection": "first",
      "vsintellicode.modify.editor.suggestSelection": "automaticallyOverrodeDefaultValue",
      "xml.java.home": "",
      "spring.initializr.defaultLanguage": "Java",
      "spring.initializr.defaultJavaVersion": "8",
      "spring.initializr.serviceUrl": [
           "https://start.aliyun.com"
          ],
      "java.configuration.maven.userSettings": "F:\\javaee\\apache-maven-3.6.3\\conf\\settings.xml",
      "maven.executable.path": "F:\\javaee\\apache-maven-3.6.3\\bin\\mvn.cmd",
      "maven.terminal.useJavaHome": true,
      "maven.terminal.customEnv": [
          {
              "environmentVariable": "JAVA_HOME",
              "value": "F:\\javaee\\jdk\\jdk1.8.0_281"
          }
      ],
      "concourse.ls.java.home": "",
      "java.configuration.maven.globalSettings": "F:\\javaee\\apache-maven-3.6.3\\conf\\settings.xml",
      "java.project.outputPath": "",
    "spring-boot.ls.java.home": "",
      "open-in-browser.default": "Chrome",
      "liveServer.settings.CustomBrowser": "chrome",
      "cloudfoundry-manifest.ls.java.home": "F:\\javaee\\jdk\\jdk1.8.0_281",
      "sonarlint.ls.javaHome": "F:\\javaee\\jdk\\jdk1.8.0_281",
      "workbench.iconTheme": "vscode-icons",
      "java.test.log.level": "error",
      "java.debug.logLevel": "info",
    "vsicons.dontShowNewVersionMessage": true,
    "files.autoSave": "afterDelay",
    "java.jdt.ls.vmargs": "-XX:+UseParallelGC -XX:GCTimeRatio=4 -XX:AdaptiveSizePolicyWeight=90 -Dsun.zip.disableMemoryMapping=true -Xmx1G -Xms100m -javaagent:\"c:\\Users\\zhujw\\.vscode\\extensions\\vscjava.vscode-lombok-1.0.1\\server\\lombok.jar\"",
    "redhat.telemetry.enabled": true,
    "editor.semanticTokenColorCustomizations": {

    }

  }

如果你的mvn更新包速度很慢，建议使用阿里云的镜像速度会快点（修改maven的setting配置如下）：

 <!-- 阿里云仓库 -->
        <mirror>
            <id>alimaven</id>
            <mirrorOf>central</mirrorOf>
            <name>aliyun maven</name>
            <url>http://maven.aliyun.com/nexus/content/repositories/central/</url>
        </mirror>
        <mirror>
            <id>nexus-aliyun</id>
            <mirrorOf>*</mirrorOf>
            <name>Nexus aliyun</name>
            <url>http://maven.aliyun.com/nexus/content/groups/public</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>

        <!-- 中央仓库2 -->
        <mirror>
            <id>repo2</id>
            <mirrorOf>central</mirrorOf>
            <name>Human Readable Name for this Mirror.</name>
            <url>http://repo2.maven.org/maven2/</url>
        </mirror>

配置完成重启 VSCode。

4、导入spring boot项目即可，先导Java Maven工程，再把前端cbitedu-ui文件夹加入到工作区

5、执行maven相应的操作

6、启动工程之前还需要配置下运行环境，如下图，点左边的小虫子图标，然后点上面的下拉箭头，选择添加配置，第一次设置时VS Code会提示选择需要运行的语言环境，选择对应环境后自动创建 launch.json 文件。

7、启动cbitedu-admin项目

8、新建终端，运行前端工程cbitedu-ui