Logo

菜单

发布于 2026-01-06 0 阅读
0

VSCode for PHP 和 Laravel

VSCode for PHP 和 Laravel

VSCode+PHP+Laravel

本文旨在帮助您配置 Visual Studio Code，以便用于 PHP 和 Laravel 开发。它提供了一个稳固的基础配置，您可以通过添加特定于工作区的配置来扩展其功能。我将介绍一些最佳扩展程序、有用的配置设置和外部工具。

让我们从最重要的扩展开始吧！

Intelephense

这是 PHP 支持中最重要的扩展。它提供了一个快速的语言服务器，并添加了代码补全、跳转到定义、格式化等功能。您也可以从Intelephense购买许可证，我强烈推荐。它添加了一些额外的功能，例如重命名符号和其他代码操作。

安装完成后，禁用内置的 PHP 功能，以便改用 Intelephense：

禁用内置 PHP 支持

如果已购买许可证，请使用cmd+shift+p该命令调出命令面板并搜索“输入许可证密钥”。

对于 Intelephense 而言，默认设置通常就足够了。在工作区级别，如果您正在处理多个 PHP 项目和框架，设置文档路径和 PHP 版本会很有帮助。

设置 Intelephense 文档根目录和 PHP 版本

最后，如果使用 Intelephense 进行格式化（而不是像 PHP CS Fixer 或 Pint 这样的外部工具），则将其设置为 PHP 文件的默认格式化程序。这可以通过调出设置的 JSON 版本来完成。



"[php]": {
    "editor.defaultFormatter": "bmewburn.vscode-intelephense-client"
},
Enter fullscreen mode Exit fullscreen mode

Phpactor

这既是一个外部工具，也是一个扩展。但是，该扩展并未在 VSCode 扩展市场中提供，需要手动安装。该扩展提供了许多实用的代码操作，例如将限定符替换为导入语句以及添加返回类型。

首先，按照以下说明或步骤安装 Phpactor ：



# Download phpactor.phar
curl -Lo phpactor.phar https://github.com/phpactor/phpactor/releases/latest/download/phpactor.phar
Enter fullscreen mode Exit fullscreen mode 


chmod a+x phpactor.phar # update permissions
mv phpactor.phar ~/.local/bin/phpactor # move file into path
Enter fullscreen mode Exit fullscreen mode 


# Check the installation
phpactor status
Enter fullscreen mode Exit fullscreen mode

系统安装 Phpactor 后，下一步是安装插件。下载最新版本（phpactor.vsix）。然后，可以通过导入插件或使用命令行界面 (CLI) 在 VSCode 中进行安装。

从 VSIX 安装 VSCode 插件



code --install-extension /path/to/phpactor.vsix
Enter fullscreen mode Exit fullscreen mode

安装插件后，Phpactor 将对工作区进行索引，然后添加新的代码操作。以下屏幕截图展示了如何将限定符替换为命名空间以及添加返回类型。

将限定符替换为导入

添加缺失的返回类型

Laravel Extra 智能感知

此插件为视图和路由等内容添加了自动补全功能。例如，在routes/web.php文件中，可用视图的列表会显示在自动补全弹出窗口中：

查看自动完成功能

它还为 Laravel 验证规则和配置添加了自动完成功能。

Laravel Goto

此插件用于在 Laravel 应用中快速导航至视图、配置和其他文件，只需将鼠标悬停在相应字符串上即可。例如，在文件中routes/web.php，当鼠标悬停在“welcome”上时，会弹出窗口直接导航至该welcome.blade.php文件。opt+;也可以使用快捷方式导航至其他文件。

转到查看文件

Laravel Blade 代码片段

这个插件为.blade.php文件添加了语法高亮显示和实用代码片段。如果需要，它甚至可以用于格式化 Blade 文件。不过，本文稍后会介绍如何使用 Prettier 来格式化 Blade 文件。

Better Pest / Better PHPUnit

这些插件提供了便捷的快捷键，方便运行测试。如果项目使用 Pest，请使用 Better Pest 扩展；否则，请使用 Better PHPUnit。如果使用多个项目，还可以针对不同的工作区启用/禁用这些插件。

默认情况下提供以下快捷键，可根据光标位置运行特定测试，或运行文件中的所有测试，或运行先前运行的测试。



{
    "key": "cmd+k cmd+r",
    "command": "better-pest.run"
},
{
    "key": "cmd+k cmd+f",
    "command": "better-pest.run-file"
},
{
    "key": "cmd+k cmd+p",
    "command": "better-pest.run-previous"
}
Enter fullscreen mode Exit fullscreen mode

有关使用 Docker 或其他更高级配置进行设置的其他设置，请参阅文档。

更漂亮

Prettier 是一个用于格式化 JavaScript/TypeScript 文件的框架，它具有鲜明的规范。如果您使用 Inertia 等框架来格式化 React 和 Vue 文件，强烈推荐使用 Prettier。它还可以格式化其他文件类型，例如 JSON 和 Markdown。安装扩展程序后，也请将 Prettier 安装到项目中：



npm install --save-dev --save-exact prettier
Enter fullscreen mode Exit fullscreen mode

cmd+shift+p安装完成后，可以打开命令面板（ ），并使用该面板在项目中Prettier: Create Configuration File创建.prettierrc文件。有关可配置规则的列表，请参阅以下内容：选项 · Prettier。

还可以添加其他插件来支持 Prettier 的更多功能和语言，例如 Blade 模板引擎。安装shufo/prettier-plugin-blade插件并将其添加到配置文件中：



npm install --save-dev @shufo/prettier-plugin-blade prettier
Enter fullscreen mode Exit fullscreen mode 


// .prettierrc
{
  "plugins": ["@shufo/prettier-plugin-blade"],
  "overrides": [
    {
      "files": ["*.blade.php"],
      "options": {
        "parser": "blade",
        "tabWidth": 4
      }
    }
  ]
}
Enter fullscreen mode Exit fullscreen mode

它甚至可以使用该选项对 Blade 文件中的 Tailwind CSS 类进行排序。更多设置sortTailwindcssClasses请查看GitHub 代码库。

要将 Prettier 设置为各种文件类型的默认格式化程序，请在 VSCode 中使用以下设置：



{
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "editor.formatOnSave": true
  },
  "[javascriptreact]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "editor.formatOnSave": true
  },
  "[typescript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "editor.formatOnSave": true
  },
  "[typescriptreact]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "editor.formatOnSave": true
  },
  "[svelte]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "editor.formatOnSave": true
  },
  "[vue]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "editor.formatOnSave": true
  },
  "[blade]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "editor.formatOnSave": true
  }
}
Enter fullscreen mode Exit fullscreen mode

Laravel IDE 助手

虽然这不是 VSCode 的扩展，但 Laravel IDE Helper 可以极大地提升编辑器中的开发体验。它为 Laravel 应用生成辅助文件，从而更好地支持 Intellephense 无法解析的各种 Laravel 魔法方法的自动补全。它还可以分析模型、迁移、外观等等。使用 Composer 安装即可。



composer require --dev barryvdh/laravel-ide-helper
Enter fullscreen mode Exit fullscreen mode

安装完成后，即可使用新的 Artisan 命令生成辅助文件。以下是最常用的命令。



php artisan ide-helper:generate # Generate PHPDocs for facades
php artisan ide-helper:meta # Generate meta file to add support for the factory pattern
php artisan ide-helper:models # Generate PHPDocs for models
Enter fullscreen mode Exit fullscreen mode

对于模型生成，可以直接在模型文件中添加 PHPDocs，也可以使用外部文件。前者通常更准确，但会在文件中添加大量注释。后者更简洁，但有时跳转到定义页面会指向生成的文件而不是实际的模型。请根据项目的具体情况选择最合适的方法。

运行这些命令后，VSCode 现在可以自动完成模型中的字段，例如下面模型email中的字段User。

模型属性自动补全

通过在文件中添加一些脚本，可以进一步简化操作composer.json。首先，创建一个ide-helper脚本来运行各种命令。下面的脚本会将 PHPDocs 写入外部模型，而不是直接写入模型本身。



"ide-helper": [
    "@php artisan ide-helper:generate",
    "@php artisan ide-helper:meta",
    "@php artisan ide-helper:models -N --reset"
]
Enter fullscreen mode Exit fullscreen mode

接下来，更新脚本。这样，运行时脚本post-update-cmd就会自动运行。ide-helpercomposer update



"post-update-cmd": [
    "@php artisan vendor:publish --tag=laravel-assets --ansi --force",
    "Illuminate\\Foundation\\ComposerScripts::postUpdate",
    "@composer ide-helper"
]
Enter fullscreen mode Exit fullscreen mode

更进一步，可以将 VSCode 任务配置为从 VSCode 内部运行此命令，甚至可以将其分配给快捷方式。

要创建该tasks.json文件，请使用 `Ctrl+C`cmd+shift+p打开命令面板，搜索 `Ctrl+C` Tasks: Configure Task。在菜单中选择 `Ctrl+C` Create tasks.json file from template，然后选择 `Ctrl+C` Others。这将在项目目录tasks.json中创建一个文件。在该文件中，添加以下内容：.vscodetasks.json



"tasks": [
    {
        "label": "Laravel IDE Helper",
        "type": "shell",
        "command": "composer ide-helper"
    }
]
Enter fullscreen mode Exit fullscreen mode

现在可以通过转到命令面板来运行此命令Tasks: Run Task。

最后，要为这些任务添加键盘快捷键，请将以下内容添加到keybindings.json：



{
    "key": "cmd+shift+.",
    "command": "workbench.action.tasks.runTask",
    "args": "Laravel IDE Helper"
}
Enter fullscreen mode Exit fullscreen mode

现在点击cmd+shift+.即可快速运行IDE助手。

其他实用扩展程序

结论

我希望本指南能帮助你成为更高效的 Laravel 开发者。Visual Studio Code 是一款功能强大的编辑器，配合合适的扩展和配置，它也是 PHP 和 Laravel 开发的优秀编辑器。 

它不如 PhpStorm 强大（尤其是在搭配 Laravel Idea 包之后），而且配置起来也更麻烦。不过，作为一款免费编辑器，它几乎无可匹敌。虽然我强烈推荐 PhpStorm，但我知道很多开发者都有 VSCode 的使用经验，而且他们可能不仅仅从事 PHP 开发，所以对他们来说，切换到 VSCode 并不值得。

如果您希望我介绍或扩展其他内容，例如 Laravel Sail 支持或其他工具（如 Phpstan/Larastan），请在评论区留言。此外，如果您知道我可能遗漏的其他实用扩展或配置，也请告诉我。

最后，下面我提供了一个我在 VSCode 中使用的设置示例。

设置

以下是我在 VSCode 中用于 PHP 和 Laravel 开发的设置示例。我还大量使用工作区特定的设置，以便针对各个项目进一步定制我的配置。



{
    "files.autoSave": "onFocusChange",
    "files.defaultLanguage": "markdown",
    "files.encoding": "utf8",
    "files.eol": "\n",
    "files.insertFinalNewline": true,
    "files.trimFinalNewlines": true,
    "files.trimTrailingWhitespace": true,


    // ********************
    // Formatting
    // ********************
    "prettier.endOfLine": "lf",


    // ********************
    // Language Settings
    // ********************

    // JavaScript/TypeScript
    "javascript.preferences.quoteStyle": "single",
    "typescript.preferences.quoteStyle": "single",
    "typescript.updateImportsOnFileMove.enabled": "always",
    "javascript.updateImportsOnFileMove.enabled": "always",
    "javascript.preferences.importModuleSpecifier": "relative",
    "typescript.preferences.importModuleSpecifier": "relative",
    "[javascript]": {
      "editor.defaultFormatter": "esbenp.prettier-vscode",
      "editor.formatOnSave": true
    },
    "[javascriptreact]": {
      "editor.defaultFormatter": "esbenp.prettier-vscode",
      "editor.formatOnSave": true
    },
    "[typescript]": {
      "editor.defaultFormatter": "esbenp.prettier-vscode",
      "editor.formatOnSave": true
    },
    "[typescriptreact]": {
      "editor.defaultFormatter": "esbenp.prettier-vscode",
      "editor.formatOnSave": true
    },
    "[svelte]": {
      "editor.defaultFormatter": "esbenp.prettier-vscode",
      "editor.formatOnSave": true
    },
    "[vue]": {
      "editor.defaultFormatter": "esbenp.prettier-vscode",
      "editor.formatOnSave": true
    },

    // CSS
    "tailwindCSS.emmetCompletions": true,
    "tailwindCSS.includeLanguages": {
      "Typescript": "typescriptreact"
    },

    // PHP
    "php.validate.enable": false,
    "php.suggest.basic": false,
    "[php]": {
      "editor.defaultFormatter": "bmewburn.vscode-intelephense-client"
    },
    "[blade]": {
      "editor.autoClosingBrackets": "always",
      "editor.defaultFormatter": "esbenp.prettier-vscode",
      "editor.formatOnSave": true
    },
    "intelephense.telemetry.enabled": false,

    // JSON
    "[json]": {
      "editor.defaultFormatter": "esbenp.prettier-vscode",
      "editor.formatOnSave": true
    },
    "[jsonc]": {
      "editor.defaultFormatter": "esbenp.prettier-vscode"
    }
}
Enter fullscreen mode Exit fullscreen mode
文章来源：https://dev.to/sean_kegel/vscode-for-php-and-laravel-lnk
考虑使用 Vue Composit...
2021 年 Web 开发：快速入...