技术笔记

编程 营销 外贸


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>&quot;添加到 PATH&quot;(方便命令行启动)</p> </li> <li>&quot;通过文件右键菜单快速打开&quot;</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>

页面列表

ITEM_HTML