php和laravel的VScode-DEV365 开发者社区

这篇文章应帮助您设置Visual Studio代码，以用于PHP和Laravel开发。它是可靠的基本配置，可以在使用其他工作区特定配置时扩展。我将介绍最佳使用的扩展名以及一些有用的配置设置和外部工具。

让我们开始使用最重要的扩展！

intlephense

这是安装PHP支持的最重要的扩展名。它提供了一个快速的语言服务器，该服务器添加代码完成，转到定义，格式化等。您也可以在Intelephense上购买许可证，我强烈建议您购买许可证。它添加了一些其他功能，例如重命名符号和其他代码操作。

安装后，禁用内置的PHP功能，因此使用Intlephense：

如果购买了许可证，请使用cmd+shift+p来提出命令调色板并搜索输入许可证键。

在大多数情况下，默认设置对于intephense来说都是可以的。在工作区级别上，如果从事多个PHP项目和框架，设置文档路径和PHP版本可能会有所帮助。

最后，如果将Intephense用于格式化（与PHP CS Fixer或Pint这样的外部工具），则将其设置为PHP文件的默认格式。这是通过提取设置的JSON版本来完成的。

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

Phpactor

这既是外部工具又是扩展名。但是，该扩展名在Vscode扩展市场中不可用，需要手动安装。该扩展程序提供了更多有用的代码操作，例如用导入替换资格和添加返回类型。

首先，使用instructions安装Phpactor或遵循以下步骤：

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

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

# Check the installation
phpactor status

系统上安装了Phpactor，接下来是安装插件。下载最新的release（phpactor.vsix）。然后通过导入插件或使用CLI来安装VSCODE。

code --install-extension /path/to/phpactor.vsix

使用插件安装，PhPactor将索引工作区，然后添加新的代码操作。下面的屏幕截图显示，用命名空间代替资格仪并添加返回类型。

laravel额外的智力

Laravel Extra Intellisense - Visual Studio Marketplace

此插件为视图和路线等内容添加了其他自动完成。例如，在routes/web.php文件中，自动完成弹出中显示的可用视图列表：

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

Laravel Goto

Laravel Goto - Visual Studio Marketplace

此插件用于快速导航到Laravel应用程序中的查看，配置和其他文件，只是在字符串上徘徊。例如，在routes/web.php文件中，当悬停在欢迎和弹出窗口时，似乎直接导航到welcome.blade.php文件。 opt+;快捷方式也可用于导航到文件。

Laravel刀片片段

Laravel Blade Snippets - Visual Studio Marketplace

此插件添加了.blade.php文件的语法亮点以及有用的片段。如果需要，它甚至可以用于格式化刀片文件。但是，在这篇文章的后面，将设置为格式化刀片文件。

更好的害虫 /更好的phpunit

这些插件为运行测试提供了简单的关键框架。如果项目使用害虫，请使用更好的害虫扩展名，否则，请使用更好的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"
}

请参阅文档以获取使用Docker或其他更高级配置设置的其他设置。

更漂亮

Prettier - Code formatter - Visual Studio Marketplace

Prettier是格式化JavaScript/Typescript文件的自信框架。强烈建议使用像惯性之类的东西格式化react和vue文件。它还可以格式化其他Filetypes，例如JSON和MARKDOWN。安装扩展程序后，还将更漂亮的安装在项目中：

npm install --save-dev --save-exact prettier

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

可以添加其他插件，以支持更多的功能和语言，以使其更漂亮，例如刀片支持。安装shufo/prettier-plugin-blade插件并将其添加到配置文件：

npm install --save-dev @shufo/prettier-plugin-blade prettier

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

它甚至可以使用sortTailwindcssClasses选项在刀片文件中对Tailwind CSS类排序。查看Github repo以获取其他设置。

要将更漂亮的各种文件类型设置为默认格式，请在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
  }
}

Laravel IDE助手

barryvdh/laravel-ide-helper: IDE Helper for Laravel

尽管这不是VSCODE的扩展，但Laravel IDE助手助理极大地改善了编辑中的发展体验。它为Laravel应用程序生成了辅助文件，以更好地支持Intephense无法解决的Laravel中的各种魔术方法。它可以分析模型，迁移，立面等。与作曲家一起安装。

composer require --dev barryvdh/laravel-ide-helper

安装后，可以使用新的工匠命令来生成助手文件。以下是最有用的。

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

对于模型生成，可以将PHPDOC直接添加到模型文件或使用外部文件。前者往往更准确，但在文件中添加了很多评论。后者更干净，但有时可以定义用于生成的文件与实际模型。确定最适合该项目的方法。

运行命令时，VSCODE现在可以在模型上自动完成字段，例如下面的email上的email字段。

通过将一些脚本添加到composer.json文件中，可以更简单。首先，创建一个ide-helper脚本以运行各种命令。下面的脚本在模型本身上与模型与模型的外部写入PHPDOC。

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

接下来，更新post-update-cmd脚本。运行composer update时，这将自动运行ide-helper脚本。

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

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

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

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

现在可以通过转到Tasks: Run Task从命令调色板运行此命令。

最后，要为任务添加键盘快捷键，请在keybindings.json中添加以下内容：

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

现在单击cmd+shift+.将迅速运行IDE助手。

其他有用的扩展

Tailwind CSS IntelliSense - Visual Studio Marketplace 为尾风CSS课程提供更好的自动完成和预览。
GitLens — Git supercharged - Visual Studio Marketplace 像当前的责备一样，在编辑器中提供有用的GIT信息。
Laravel Docs - Visual Studio Marketplace 从命令调色板搜索并打开Laravel文档。
Laravel Artisan - Visual Studio Marketplace 从命令调色板运行工匠命令。
PHP Debug - Visual Studio Marketplace 从VSCODE内部使用Xdebug的扩展名。
Composer - Visual Studio Marketplace 从VSCODE内部运行作曲家命令和代码操作。
php cs fixer - Visual Studio Marketplace 将PHP CS Fixer添加为PHP文件的可用格式。

结论

我希望本指南能够帮助您成为更有效的Laravel开发人员。 Visual Studio Code是一个强大的编辑器，具有正确的扩展名，配置是PHP和Laravel开发的出色编辑。

它不如PHPSTORM（尤其是在Laravel Idea软件包中）强大，并且需要更多的工作才能配置。但是，对于免费使用编辑器，很难击败。尽管我强烈建议PHPSTORM，但我知道很多开发人员都有VSCODE的经验，甚至不仅要做PHP开发，因此不值得进行更改。

如果您希望我要掩盖或扩展任何其他内容，例如Laravel Sail支持或其他工具，例如Phpstan/Larastan，请让我知道。另外，让我知道我是否还有其他有用的扩展或配置。

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

设置

这是我在PHP和Laravel开发的VSCODE中使用的设置的一个示例。我还大量使用工作区特定的设置来进一步自定义我的单个项目的设置。

{
    "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"
    }
}