🧰 第一步：环境准备 (JDK, Maven, Git)

在配置 VS Code 之前，需要先准备好 JDK、Maven 和 Git 这三个基础工具。

1. 安装 JDK

JDK 是 Java 开发和运行的基础。对于 Spring Boot 项目，推荐使用 JDK 17 或 JDK 21，它们是长期支持版本（LTS），稳定且兼容性好。

• 下载与安装：访问 Adoptium 或 Oracle 官网，下载对应操作系统的 .exe (Windows) 或 .dmg (macOS) 安装包，然后按提示完成安装。

• 验证安装：打开终端，输入以下命令，如果显示版本信息（例如 17.x.x 或 21.x.x），则表示 JDK 已安装成功。

  bash

  java -version
  javac -version

2. 安装 Maven

Maven 是 Java 项目的构建和管理工具。

• 下载与安装：访问 Maven 官网，下载 Binary zip 包（例如 apache-maven-3.9.x-bin.zip），并将其解压到电脑上一个没有中文字符的路径，例如 D:\tools\apache-maven-3.9.x。

• 配置环境变量：

  1. 新建系统变量 MAVEN_HOME，值为你的 Maven 解压路径。

  2. 编辑 Path 变量，添加 %MAVEN_HOME%\bin。

• 验证安装：打开终端，输入 mvn -v，如果显示 Maven 版本信息，则表示安装成功。

3. 安装 Git

Git 是版本控制工具。

• 下载与安装：访问 Git 官网，下载对应操作系统的版本并安装，大部分选项使用默认设置即可。

• 验证安装：安装完成后，打开终端，输入 git --version，如果显示 Git 版本信息，则表示安装成功。

🔌 第二步：安装核心插件

插件是 VS Code 的灵魂。打开 VS Code，点击左侧活动栏的“扩展”图标（或按 Ctrl+Shift+X），搜索并安装以下插件。

💡 小提示：安装好所有插件后，建议重启 VS Code 以使所有插件生效。

⚙️ 第三步：核心配置 (settings.json)

VS Code 的许多配置都通过 settings.json 文件来完成。打开命令面板 (Ctrl+Shift+P)，输入 Preferences: Open Settings (JSON) 并选择，即可编辑用户或工作区的设置文件。

建议将以下配置添加到你的 settings.json 中：

json

{
    // 1. 核心路径配置（请替换为你自己的实际路径）
    "java.home": "C:\\Program Files\\Eclipse Adoptium\\jdk-17.0.9.9-hotspot", // JDK 安装根目录[reference:14]
    "maven.executable.path": "D:\\tools\\apache-maven-3.9.8\\bin\\mvn.cmd", // Maven 的可执行文件路径[reference:15]
    "maven.settingsFile": "D:\\tools\\apache-maven-3.9.8\\conf\\settings.xml", // Maven 配置文件路径[reference:16]

    // 2. Maven 相关配置
    "maven.terminal.useJavaHome": true, // 让 Maven 终端使用 VS Code 配置的 JDK[reference:17]
    "maven.pomfile.autoUpdateEffectivePOM": true, // 自动更新 POM 文件[reference:18]
    "java.import.maven.enabled": true, // 启用 Maven 导入[reference:19]

    // 3. Java 语言服务器配置
    "java.configuration.updateBuildConfiguration": "automatic", // 自动更新项目构建配置[reference:20]
    "java.errors.incompleteClasspath.severity": "info", // 忽略不完整类路径的错误（避免大量红色波浪线）[reference:21]
    "java.import.exclusions": ["**/node_modules/**", "**/.metadata/**", "**/target/**"], // 排除无需扫描的目录以提升性能[reference:22]
    "java.completion.enabled": true, // 启用代码补全[reference:23]

    // 4. 编辑器体验
    "editor.suggest.snippetsPreventQuickSuggestions": false // 允许显示代码模板建议[reference:24]
}

记得将路径替换为你本地的实际安装路径。

🚀 第四步：项目级配置 (launch.json 与 tasks.json)

为了能更专业地调试项目，可以配置 launch.json 和 tasks.json。在项目根目录下创建 .vscode 文件夹，然后新建这两个文件。

1. launch.json (启动与调试配置)

按 F5 键，选择 Java，VS Code 会自动生成 .vscode/launch.json 文件。你也可以手动创建并参考以下配置：

json

{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "java",
            "name": "Debug (Attach) - Local", // 用于附加到已运行的 JVM 进程进行调试[reference:26]
            "request": "attach",
            "hostName": "localhost",
            "port": 5005
        },
        {
            "type": "java",
            "name": "Spring Boot App", // 启动 Spring Boot 应用
            "request": "launch",
            "mainClass": "com.example.demo.DemoApplication", // 替换为你项目的主启动类全限定名[reference:27]
            "projectName": "demo", // 必须严格等于 pom.xml 中的 <artifactId>[reference:28]
            "args": "", // 程序运行参数，如 --server.port=8081[reference:29]
            "vmArgs": "-Xmx512m" // JVM 参数[reference:30]
        }
    ]
}

2. tasks.json (任务自动化配置)

用于定义构建、测试等任务。在 .vscode 文件夹中创建 tasks.json 文件。

json

{
    "version": "2.0.0",
    "tasks": [
        {
            "label": "mvn clean package", // 任务名称
            "type": "shell",
            "command": "mvn -B clean package -DskipTests", // 执行的命令[reference:32]
            "group": "build",
            "problemMatcher": ["$maven"]
        }
    ]
}

✅ 第五步：验证与启动一个 Spring Boot 项目

环境配置完成后，可以通过创建一个 Spring Boot 项目来验证环境是否生效。

1. 创建项目：打开命令面板 (Ctrl+Shift+P)，输入 Spring Initializr: Create a Maven Project 并选择。然后按提示填写项目信息，在“选择依赖”时，至少选择 Spring Web，最后选择项目存放位置。

2. 等待依赖下载：VS Code 会自动下载项目依赖。如果下载缓慢，可以配置 Maven 使用阿里云镜像。

3. 编写测试接口：在项目的启动类同级或下级目录下，新建一个 Java 类，例如 HelloController，并编写一个简单的 REST 接口：

   java

   import org.springframework.web.bind.annotation.GetMapping;
   import org.springframework.web.bind.annotation.RestController;
   
   @RestController
   public class HelloController {
       @GetMapping("/hello")
       public String hello() {
           return "Hello, VS Code Java!"; // 用于测试
       }
   }

4. 运行并测试：在左侧的 Spring Boot Dashboard 视图中，找到你的项目，点击 ▶️ 按钮运行。应用启动后，打开浏览器访问 http://localhost:8080/hello，如果能看到 Hello, VS Code Java! 的返回信息，则说明你的开发环境已经配置成功了！

在 Java + Spring Boot + Maven 项目中，需要将编译产物、IDE 配置、日志、本地配置等文件忽略，避免提交到 Git 仓库。以下是一份标准的 .gitignore 文件，你可以直接复制到项目根目录下。

📄 推荐 .gitignore 内容

gitignore

# ============= 编译输出 =============
/target/
/classes/
/checkouts/
*.class

# ============= Maven 相关 =============
pom.xml.tag
pom.xml.releaseBackup
pom.xml.versionsBackup
pom.xml.next
release.properties
dependency-reduced-pom.xml
buildNumber.properties
.mvn/timing.properties
.mvn/wrapper/maven-wrapper.jar

# ============= IDE 相关 (通用) =============
.idea/
*.iws
*.iml
*.ipr
.vscode/
.classpath
.project
.settings/
bin/
.svn/
*.swp
*.swo
*~

# ============= Spring Boot 相关 =============
application-local.properties
application-dev.properties
application-*.yml
bootstrap-local.yml
*.log
*.pid

# ============= 日志文件 =============
logs/
*.log
*.gz

# ============= 操作系统生成文件 =============
.DS_Store
Thumbs.db
desktop.ini
ehthumbs.db

# ============= 临时文件 =============
*.tmp
*.bak
*.old
*.orig

# ============= 敏感配置或密钥 =============
*.p12
*.jks
*.key
*.pem
.env
.secret

# ============= 前端或混合项目生成 =============
node_modules/
dist/
build/
*.tsbuildinfo

🔍 关键解释

💡 提示：如果你的团队需要共享某些 VS Code 调试配置（如 launch.json），可以将 .vscode/ 从 .gitignore 中移除，并提交通用配置，但建议不要提交个人敏感设置。

🛠 如何使用

1. 在项目根目录下创建 .gitignore 文件（注意文件名以点开头）。

2. 将上述内容粘贴进去并保存。

3. 如果某些文件之前已经被 Git 追踪，需要先清除缓存再重新应用：

   bash

   git rm -r --cached .
   git add .
   git commit -m "Apply .gitignore rules"

在 VS Code 中给 Spring Boot 应用添加启动参数，可以通过三种方式实现。根据你的使用习惯，选择最合适的一种。

springboot添加启动参数

方式一：通过 launch.json 配置（推荐，最专业）

这种方式适合需要精细控制启动参数、环境变量或调试配置的场景。

1. 创建 launch.json：

   • 点击 VS Code 左侧的“运行和调试”图标（或按 Ctrl+Shift+D）。

   • 点击顶部的“创建 launch.json 文件”，然后选择 Java 环境。VS Code 会自动在 .vscode 文件夹下生成 launch.json。

2. 添加 Spring Boot 启动配置：
   在 configurations 数组中，添加或修改一个 Spring Boot 的配置项。关键参数如下：

   • args：程序参数，对应 -- 开头的参数（如 --server.port=8081）。

   • vmArgs：JVM 参数，对应 -D 或 -X 开头的参数（如 -Dserver.port=8081 或 -Xmx512m）。

   • env：环境变量。

   示例配置如下：

json

{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "java",
            "name": "Spring Boot App",
            "request": "launch",
            "mainClass": "com.example.demo.DemoApplication", // 改为你的主启动类全限定名
            "projectName": "demo", // 改为你的 artifactId
            "args": "--server.port=8081 --custom.property=hello", // 程序参数
            "vmArgs": "-Xmx512m -Dfile.encoding=UTF-8",        // JVM参数
            "env": {                                            // 环境变量
                "SPRING_PROFILES_ACTIVE": "dev"
            }
        }
    ]
}

3. 启动调试：

   • 在“运行和调试”视图顶部的下拉框中选择 Spring Boot App。

   • 点击绿色的启动按钮（▶️）或按 F5。

方式二：通过 Spring Boot Dashboard 配置（最便捷）

如果你安装了 Spring Boot Extension Pack，可以使用 Dashboard 快速添加启动参数。

1. 打开 Spring Boot Dashboard：在 VS Code 左侧活动栏找到 Spring Boot 的图标（一个带叶子的咖啡杯）。

2. 找到你的项目，点击项目旁边的 ≡ 图标（或右键点击项目），选择 Edit Start Configuration。

3. 在弹出的 launch.json（或 .vscode/settings.json 中针对该项目的配置）中，像方式一一样添加 args 或 vmArgs 字段。

4. 保存后，直接在 Dashboard 中点击项目旁边的 ▶️ 按钮启动，参数就会生效。

方式三：通过 Maven 命令启动（临时测试）

如果你更喜欢用 Maven 命令启动，可以通过 spring-boot:run 传递参数。

在 VS Code 的集成终端中执行：

bash

# 传递程序参数（使用 -Dspring-boot.run.arguments）
mvn spring-boot:run -Dspring-boot.run.arguments="--server.port=8081 --custom.property=hello"

# 传递 JVM 参数（使用 -Dspring-boot.run.jvmArguments）
mvn spring-boot:run -Dspring-boot.run.jvmArguments="-Xmx512m -Dfile.encoding=UTF-8"

常见参数示例

提示：程序参数（args）会自动覆盖 application.properties 中的同名配置；JVM 参数（vmArgs）中的 -D 参数同样可以覆盖配置文件。

验证参数是否生效

启动应用后，可以在控制台日志中看到类似信息：

text

Tomcat started on port(s): 8081 (http) with context path ''
The following profiles are active: dev

如果你习惯用 launch.json 方式，我可以再帮你补充一个多环境（dev/prod）快速切换的配置示例。

vue2/vue3 html开发配置

一、核心插件推荐

Vue 开发必备

表格

⚠️ 重要：Vue3 项目用 Vue - Official，Vue2 老项目可继续用 Vetur 或迁移到 Vue - Official 的兼容模式

通用前端插件

表格

增强体验

表格

二、settings.json 完整配置

JSON

复制

{
  // ========== 编辑器基础配置 ==========
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.tabSize": 2,
  "editor.detectIndentation": false,
  
  // ========== Vue 专属配置 ==========
  // Vue3 项目使用 Vue - Official
  "[vue]": {
    "editor.defaultFormatter": "Vue.volar"
  },
  // Vue2 项目如需使用 Vetur（ legacy ）
  // "vetur.format.defaultFormatter.html": "prettier",
  // "vetur.format.defaultFormatter.js": "prettier-eslint",
  
  // ========== HTML 配置 ==========
  "[html]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "editor.linkedEditing": true  // 自动重命名配对标签
  },
  
  // ========== JavaScript/TypeScript ==========
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[typescript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  
  // ========== ESLint 配置 ==========
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    "vue",
    "typescript",
    "typescriptreact"
  ],
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": "explicit"
  },
  
  // ========== Prettier 配置 ==========
  "prettier.singleQuote": true,
  "prettier.semi": false,
  "prettier.trailingComma": "es5",
  "prettier.printWidth": 100,
  "prettier.arrowParens": "avoid",
  
  // ========== 文件关联 ==========
  "files.associations": {
    "*.vue": "vue",
    "*.html": "html"
  },
  
  // ========== Emmet 快速编写 ==========
  "emmet.includeLanguages": {
    "vue": "html",
    "javascript": "javascriptreact"
  },
  "emmet.syntaxProfiles": {
    "vue-html": "html"
  },
  
  // ========== 路径提示 ==========
  "path-intellisense.mappings": {
    "@": "${workspaceFolder}/src"
  },
  
  // ========== 其他优化 ==========
  "editor.quickSuggestions": {
    "strings": true  // 在字符串中也启用快速建议（模板内）
  },
  "editor.snippetSuggestions": "top",
  "files.exclude": {
    "**/node_modules": true,
    "**/dist": true
  }
}

三、项目级配置文件

1. .eslintrc.js（Vue3 示例）

JavaScript

复制

module.exports = {
  root: true,
  env: {
    browser: true,
    node: true,
    es2021: true
  },
  extends: [
    'eslint:recommended',
    'plugin:vue/vue3-recommended',  // Vue3 规则
    // 'plugin:vue/recommended',    // Vue2 用这个
    'plugin:@typescript-eslint/recommended',
    'prettier'  // 必须放最后，关闭与 Prettier 冲突的规则
  ],
  parser: 'vue-eslint-parser',
  parserOptions: {
    parser: '@typescript-eslint/parser',
    ecmaVersion: 2021,
    sourceType: 'module'
  },
  plugins: ['vue', '@typescript-eslint'],
  rules: {
    'vue/multi-word-component-names': 'off',  // 允许单单词组件名
    'vue/no-v-html': 'warn',
    '@typescript-eslint/no-explicit-any': 'warn'
  }
}

2. .prettierrc

JSON

复制

{
  "semi": false,
  "singleQuote": true,
  "trailingComma": "es5",
  "printWidth": 100,
  "tabWidth": 2,
  "useTabs": false,
  "arrowParens": "avoid",
  "endOfLine": "lf",
  "htmlWhitespaceSensitivity": "css"
}

3. jsconfig.json 或 tsconfig.json（路径别名）

JSON

复制

{
  "compilerOptions": {
    "target": "ES2020",
    "module": "ESNext",
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"],
      "@components/*": ["src/components/*"],
      "@views/*": ["src/views/*"],
      "@utils/*": ["src/utils/*"]
    }
  },
  "include": ["src/**/*"],
  "exclude": ["node_modules", "dist"]
}

四、Vue2 vs Vue3 配置差异

表格

五、快速检查清单

新建项目后按顺序执行：

bash

复制

# 1. 安装项目依赖（包含 ESLint/Prettier）
npm install

# 2. 安装 VS Code 推荐插件（项目可添加 .vscode/extensions.json）
# Ctrl+Shift+P → "Extensions: Show Recommended Extensions"

# 3. 重启 VS Code 确保插件生效

# 4. 测试格式化
# 打开任意 .vue 文件，按 Ctrl+S 应自动格式化

六、常见问题解决

表格