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

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

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

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

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

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

preview

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

开始步骤：

在 Visual Studio Code 中打开扩展视图(Ctrl+Shift+X)。
输入“java”搜索商店扩展插件。
找到并安装 Java Extension Pack (Java 扩展包)，如果你已经安装了 Language Support for Java(TM) by Red Hat，也可以单独找到并安装 Java Debugger for Visual Studio Code 扩展。
输入“Spring Boot Extension”搜索商店扩展插件。
找到并安装 “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文件夹加入到工作区