VSCode编辑器使用
<h2><strong>一、安装与启动</strong></h2>
<ol>
<li>
<p>官网下载: <a href="https://code.visualstudio.com/"><a href="https://code.visualstudio.com">https://code.visualstudio.com</a></a></p>
</li>
<li>
<p>安装时勾选：</p>
<ul>
<li>
<p>"添加到 PATH"（方便命令行启动）</p>
</li>
<li>"通过文件右键菜单快速打开"</li>
</ul>
</li>
</ol>
<hr />
<h2><strong>二、界面概览</strong></h2>
<table>
<thead>
<tr>
<th>区域</th>
<th>功能说明</th>
</tr>
</thead>
<tbody>
<tr>
<td>资源管理器</td>
<td>管理项目文件和文件夹</td>
</tr>
<tr>
<td>编辑器区域</td>
<td>代码编写主区域（支持多标签页）</td>
</tr>
<tr>
<td>侧边栏</td>
<td>切换资源管理器/搜索/扩展等</td>
</tr>
<tr>
<td>状态栏</td>
<td>显示编码格式、Git状态、行号等</td>
</tr>
<tr>
<td>活动栏</td>
<td>左侧图标栏（文件/搜索/Git/调试等）</td>
</tr>
</tbody>
</table>
<hr />
<h2><strong>三、项目管理</strong></h2>
<h3>1. 基础操作</h3>
<ul>
<li>
<p><strong>打开文件夹</strong>：<code>Ctrl+K Ctrl+O</code>（Win/Linux） / <code>Cmd+K Cmd+O</code>（Mac）</p>
</li>
<li>
<p><strong>新建文件</strong>：<code>Ctrl+N</code> → 保存时指定后缀（如 <code>.html</code> <code>.php</code>）</p>
</li>
<li><strong>快速搜索文件</strong>：<code>Ctrl+P</code> → 输入文件名</li>
</ul>
<h3>2. 工作区保存</h3>
<ul>
<li>
<p>菜单栏 → 文件 → 将工作区另存为 → 生成 <code>.code-workspace</code> 文件（保存项目配置）</p>
</li>
<li>
<ul>
<li>*</li>
</ul>
</li>
</ul>
<h2><strong>四、常用快捷键速查</strong></h2>
<h3>通用操作</h3>
<table>
<thead>
<tr>
<th>功能</th>
<th>Windows/Linux</th>
<th>Mac</th>
</tr>
</thead>
<tbody>
<tr>
<td>命令面板</td>
<td><code>Ctrl+Shift+P</code></td>
<td><code>Cmd+Shift+P</code></td>
</tr>
<tr>
<td>切换侧边栏</td>
<td><code>Ctrl+B</code></td>
<td><code>Cmd+B</code></td>
</tr>
<tr>
<td>快速跳转行号</td>
<td><code>Ctrl+G</code></td>
<td><code>Ctrl+G</code></td>
</tr>
</tbody>
</table>
<h3>代码编辑</h3>
<table>
<thead>
<tr>
<th>功能</th>
<th>快捷键</th>
</tr>
</thead>
<tbody>
<tr>
<td>注释/取消注释</td>
<td><code>Ctrl+/</code></td>
</tr>
<tr>
<td>格式化代码</td>
<td><code>Shift+Alt+F</code></td>
</tr>
<tr>
<td>复制整行</td>
<td><code>Shift+Alt+↑/↓</code></td>
</tr>
<tr>
<td>多光标编辑</td>
<td><code>Alt+点击</code> 或 <code>Ctrl+Alt+↑/↓</code></td>
</tr>
</tbody>
</table>
<h3>导航与调试</h3>
<table>
<thead>
<tr>
<th>功能</th>
<th>快捷键</th>
</tr>
</thead>
<tbody>
<tr>
<td>跳转到定义</td>
<td><code>F12</code></td>
</tr>
<tr>
<td>查看函数参数</td>
<td><code>Ctrl+Shift+Space</code></td>
</tr>
<tr>
<td>启动调试</td>
<td><code>F5</code></td>
</tr>
</tbody>
</table>
<hr />
<h2><strong>五、必备插件推荐</strong></h2>
<p>通过 <code>Ctrl+Shift+X</code> 打开扩展商店，搜索安装：</p>
<h3>1. <strong>前端开发</strong></h3>
<ul>
<li>
<p><strong>Live Server</strong>：右键启动本地热更新服务器（HTML实时预览）</p>
</li>
<li>
<p><strong>Auto Rename Tag</strong>：自动修改配对的HTML标签</p>
</li>
<li>
<p><strong>Bootstrap 5 Snippets</strong>：输入 <code>bs5-</code> 触发Bootstrap代码片段</p>
</li>
<li><strong>jQuery Code Snippets</strong>：快速生成 <code>$(document).ready()</code> 等代码</li>
</ul>
<h3>2. <strong>PHP/MySQL</strong></h3>
<ul>
<li>
<p><strong>PHP Intelephense</strong>：PHP智能提示与语法检查</p>
</li>
<li>
<p><strong>PHP Debug</strong>：配合XDebug调试PHP</p>
</li>
<li><strong>SQLTools</strong>：连接MySQL数据库并执行查询</li>
</ul>
<h3>3. <strong>通用工具</strong></h3>
<ul>
<li>
<p><strong>Prettier</strong>：自动格式化代码（支持JS/HTML/CSS）</p>
</li>
<li>
<p><strong>ESLint</strong>：JavaScript代码质量检查</p>
</li>
<li>
<p><strong>Material Icon Theme</strong>：美化文件图标</p>
</li>
<li>
<ul>
<li>*</li>
</ul>
</li>
</ul>
<h2><strong>六、技术专项配置</strong></h2>
<h3>1. HTML/CSS/JS 增强</h3>
<ul>
<li>
<p><strong>Emmet 缩写</strong>：输入 <code>!</code> → <code>Tab</code> 生成HTML5基础结构</p>
</li>
<li><strong>CSS 自动补全</strong>：输入 <code>bgc</code> → <code>Tab</code> 生成 <code>background-color</code></li>
</ul>
<h3>2. PHP 开发</h3>
<ol>
<li>
<p>安装 <strong>XAMPP/MAMP</strong> 配置本地PHP环境</p>
</li>
<li>在 VSCode 设置中搜索 <code>PHP › Validate: Executable Path</code>，指定PHP解释器路径（如 <code>C:\xampp\php\php.exe</code>）</li>
</ol>
<h3>3. 连接 MySQL</h3>
<ol>
<li>
<p>安装 <strong>SQLTools</strong> 和 <strong>SQLTools MySQL/MariaDB Driver</strong></p>
</li>
<li>按 <code>Ctrl+Shift+P</code> → 输入 <code>SQLTools: New Connection</code> → 填写数据库信息</li>
</ol>
<hr />
<h2><strong>七、调试与运行</strong></h2>
<h3>1. 前端调试</h3>
<ul>
<li>
<p>使用 <strong>Live Server</strong> 右键启动页面，浏览器按 <code>F12</code> 打开开发者工具</p>
</li>
<li>在 JS 代码中点击行号左侧添加断点 → 按 <code>F5</code> 启动调试</li>
</ul>
<h3>2. PHP 调试</h3>
<ol>
<li>
<p>安装 <strong>XDebug</strong> 并配置 <code>php.ini</code></p>
</li>
<li>在 VSCode 中按 <code>F5</code> → 选择 PHP 环境 → 添加断点调试</li>
</ol>
<hr />
<h2><strong>附录：快捷键速查表</strong></h2>
<p><img src="https://code.visualstudio.com/assets/docs/getstarted/tips-and-tricks/KeyboardReferenceSheet.png" alt="VSCode 快捷键壁纸" /><br />
（访问官网下载高清版：<a href="https://code.visualstudio.com/shortcuts%EF%BC%89"><a href="https://code.visualstudio.com/shortcuts">https://code.visualstudio.com/shortcuts</a>）</a></p>
<hr />
<h2><strong>注意事项</strong></h2>
<ol>
<li>
<p>按 <code>Ctrl+,</code> 打开设置，可图形化修改配置（如字体大小、主题）</p>
</li>
<li>
<p>自定义快捷键：<code>Ctrl+K Ctrl+S</code> → 搜索功能 → 修改键位</p>
</li>
<li>多项目切换：使用 <strong>工作区</strong> 功能隔离不同项目配置</li>
</ol>
<p>掌握以上内容，可快速完成 90% 的日常开发任务</p>