Visual Studio Code 是一款免费的开源代码编辑器，它像 Sublime Text 一样轻量，但提供了许多与更大 IDE 如 PhpStorm 或 WebStorm 相同的功能。
在本文中，我将介绍一些我喜欢的 VS Code 功能，并向您展示如何充分利用它进行 WordPress 开发。
WordPress 开发的基础设置
大多数时候在 WordPress 中编写代码时，您正在开发一个插件或主题。一种方法是在 IDE 中打开该插件或主题并开始编码。不过有一个更好的方法，那就是使用 VS Code 的”工作区”。
您可以将 VS Code 中的工作区视为项目的容器——它不仅包含您的项目，还包含项目所依赖的文件（您的 WordPress 安装），以及该项目特定的任何扩展或设置。
我喜欢工作区，因为您可以为每个项目创建一个工作区，并可以在工作区级别更改 VS Code 中的任何设置或扩展。例如，您可能不想在所有项目中使用 WordPress 编码规范，或者您可能与一个无法在制表符和空格之间达成一致的开发团队合作。
在我的情况下，我绝大部分时间都花在插件开发上。所以我会有一个包含我所有插件的 Projects 文件夹，和一个包含我所有站点的 Sites 文件夹。然后我会将正在开发的插件符号链接到 Sites 文件夹中的一个全新的 WordPress 网站中。
在 Visual Studio Code 中，我首先打开插件本身，然后通过选择 文件 -> 将文件夹添加到工作区 来添加 WordPress 站点。这会设置一个新工作区，我可以同时编辑插件和 WordPress 安装。
这对于快速编辑 wp-config.php 文件并在开发时密切关注 debug.log 文件非常方便。
接下来，点击 文件 -> 将工作区另存为 来保存该工作区。这会创建一个 *.code-workspace 文件（基于 JSON），用于存储路径文件夹和设置。这允许您将来再次打开工作区，也可以作为稍后会派上用场的配置文件。如果您正在协作，可以对该文件进行版本控制——只需确保路径如 /Sites/my-site 不是特定于某台机器的即可。
更深入的 PHP 和 WordPress 集成
接下来，让我们看看如何让 Visual Studio Code 和 WordPress 配合得更好。开箱即用，VS Code 对 WordPress 和 PHP 的支持不如其他一些 IDE 如 PhpStorm（了解我们团队的一些成员如何将 PhpStorm 用于 WordPress 开发）。幸运的是，通过安装一些扩展很容易改变这一点。
由于 WordPress 仍然主要是 PHP，我使用 PHP Intelephense 扩展，它添加了 PHP 自动完成、符号导航支持，以及在工作区中查找引用的一种更好的方法。
虽然这会为PHP核心函数和项目中定义的内容添加自动补全，但它不会识别WordPress核心的很多内容。为此，可以使用Hooks IntelliSense for WordPress扩展。它可以自动补全WordPress钩子（动作/过滤器）及其优先级参数。还有PHP Tools for Visual Studio Code，它为WordPress核心函数、类和常量提供高级IntelliSense。它甚至可以解析get_posts()等函数的参数顺序，让你少花时间查Codex。
要强制执行WordPress最佳实践，请将WordPress Coding Standards与PHP Sniffer扩展一起使用。这种组合可以实时高亮显示缺少消毒或文件命名不正确等问题。只需全局安装phpcs并在工作区设置中配置扩展使用WordPress标准即可。
这些工具使WordPress插件和主题开发以及PHP开发变得更加容易。
调试PHP
Xdebug是调试PHP的宝贵工具，但配置起来可能很棘手。幸运的是，VS Code可以轻松配置Xdebug，在我的情况下它可以直接工作。
您只需要安装PHP Debug扩展并重新加载编辑器。然后转到”运行”选项卡，点击“创建launch.json文件”来创建新的PHP调试配置。
然后您应该会在编辑器顶部看到一个弹出窗口，要求您选择工作区文件夹来创建配置：
选择”workspace”将新配置插入您的*.code-workspace文件，然后选择”PHP”添加PHP配置。这将向该文件添加一些调试配置，包括新的”Listen for XDebug”选项。您可以在此处编辑配置名称或更改XDebug端口。以下是基于常见MAMP设置调整配置的方法：
{
"name": "Listen for XDebug",
"type": "php",
"request": "launch",
"port": 9003, // Xdebug v3+ uses 9003!
"pathMappings": {
// Docker example:
"/var/www/html": "${workspaceFolder}/wp",
// Local example (MAMP/XAMPP):
"/Applications/MAMP/htdocs/mysite": "${workspaceFolder}"
},
"log": true // Enable logging for troubleshooting
}
在我的情况下，它还添加了”Launch currently open script”配置。对于WordPress，我们很少需要直接加载PHP文件，所以我删除了该配置。
就是这样！您应该能够从这里开始调试PHP。转到WordPress插件或主题中的PHP文件，然后单击行号左侧在该行添加断点。
当您回到”Run”选项卡时，从下拉菜单中选择”Listen for XDebug”，然后点击播放图标开始监听请求。要使断点正常工作，请在您的网站URL后附加?XDEBUG_SESSION=VSCODE，或添加一个浏览器扩展。当您的代码遇到该断点时，运行时应该暂停，您可以查看所有变量、调用栈等更多信息。谁想到在Visual Studio Code中调试WordPress可以这么简单？
XDebug Ghosting You? Enable Logs
当您的断点神秘地没有触发——即使一切看起来都正确——您可以在php.ini中添加以下行来启用日志：
[xdebug]
xdebug.log = /tmp/xdebug.log # 简单路径，始终可写
xdebug.log_level = 1 # 1=错误，3=跟踪（详细）
何时检查日志：
- 断点被忽略（即使带有
?XDEBUG_SESSION=VSCODE）。 - VS Code的调试器显示”已连接”但从不暂停。
- 您正在对着屏幕嘟囔”为什么这不工作？！”
要查找的内容：
- “Could not connect to client”：防火墙阻止了端口
9003？尝试更改xDebug监听的端口或检查您的本地防火墙设置。 - “File is not mapped”：修复
launch.json中的pathMappings（例如，/var/www/html→${workspaceFolder}）。 - “Invalid session”：您是否启用了Xdebug浏览器扩展，或者忘记在URL中添加
?XDEBUG_SESSION=VSCODE？
Debugging JavaScript
调试PHP只是问题的一半——我们还需要能够调试JavaScript。幸运的是，现代VS Code内置了强大的工具。VS Code的JavaScript调试器默认随VS Code一起提供，支持Chrome、Edge、Node.js等。无需安装扩展！
接下来，您需要编辑*.code-workspace文件来添加JS调试配置：
：
{
"name": "Listen for JS",
"type": "chrome",
"request": "launch",
"url": "http://yoursite.test",
"webRoot": "/path/to/your/site/root",
}
这里的type指的是VS Code内置的JavaScript调试器，它支持基于Chromium的浏览器。如果您更喜欢Firefox，可以使用Mozilla的Firefox调试器扩展，并将type更新为"firefox"。
添加后，您应该在调试下拉菜单中看到”Listen for JS”选项：
作为参考，这是我目前整个mdb.code-workspace文件：
{
"folders": [
{
"path": "wp-migrate-db-pro"
},
{
"path": "/Users/mattshaw/Sites/mdb/app/public"
}
],
"launch": {
"version": "0.2.0",
"configurations": [
{
"type": "chrome",
"request": "launch",
"name": "Listen for JS",
"url": "http://mdb.test",
"webRoot": "/Users/mattshaw/Sites/mdb/app/public"
},
{
"name": "Listen for XDebug",
"type": "php",
"request": "launch",
"port": 9003
"pathMappings": {
"/var/www/html": "${workspaceFolder}/wp"
}
}
]
}
}
如果您使用Docker或远程开发，pathMappings是必不可少的。如果您是本地开发，则只需要在服务器文件路径与本地工作区不同时才需要它们。
Gotchas
如果您使用类似Webpack的工具将JS文件捆绑在一起，您可能会注意到断点不工作。现代工具会自动生成源映射，但如果您的源映射不对齐，您应该检查webpack.config.js中的devtool: 'source-map'。此外，在VS Code的调试配置中，确保webRoot与服务器的文档根目录匹配。
有了这个设置，现在在 VS Code 中调试 JS 变得很容易，使用的是与 Xdebug 相同的界面：
其他技巧
我还发现了一些其他重要的扩展，对日常开发很有帮助。GitLens 扩展可以在你当前工作的行上添加简单的 git blame 注释。而且现在它甚至集成了 GitHub，可以查看 pull request 洞察！
PHP DocBlocker 扩展对文档注释非常有用。只需在函数、方法或类的上方输入 /**，它就会根据函数/方法的参数自动补全文档注释。
Prettier 扩展对于整理你的 CSS、JS 和 HTML 代码非常棒，保存编辑器时自动格式化。
VS Code 内置的 Markdown 预览（无需扩展！）对于写文档或博客文章非常有用。而且如果你使用现代 JavaScript，原生语法高亮支持 ES6+——无需插件。
结束语
使用多年后，我仍然喜欢 VS Code。它就像是把 PhpStorm 和 Sublime Text 我最喜欢的功能结合起来，创造出了完美的 IDE。我也很喜欢可以直接在 VS Code 中安装扩展，无需离开编辑器就能查看该扩展的文档。
你用过 VS Code 吗？感觉怎么样？在评论中告诉我们吧。
