适用于 Livewire 和 Alpine.js 的 VS Code 代码片段

VS Code 与许多代码编辑器一样，包含一项称为“代码片段”的功能。此功能允许您为经常使用的代码部分配置快捷方式。例如，您可以设置一个代码片段，以便您可以输入 fun 等一些字符，按下 tab，它将扩展到整个函数声明中。

我最近一直在优化我的 VS Code 设置，所以我再次浏览了 Caleb Porzio 的 Make VS Code Awesome 课程。它提醒了我这些代码片段是多么有用和强大，所以我开始考虑可以添加哪些新的代码片段来使我的生活更轻松。今天，我将与您分享其中的一些，您可能会从中获取一些对您的工作流程有用的代码片段。具体来说，我将分享我在开发 Livewire 和 Alpine.js 应用程序时使用的代码片段。

如何在 VS Code 中配置代码片段

首先，如何在 VS Code 中配置代码片段？如果您已经知道，可以跳过此部分，直接进入精华部分。

首先，通过按 Mac 上的cmd+shift+p或 Windows 上的ctrl+shift+p打开命令面板。开始输入“代码片段”，该面板应筛选到名为“代码片段：配置用户代码片段”的选项。选择该选项，然后将提示您选择要为其配置代码片段的语言。

以我之前提到的基本示例为例，如果您选择“javascript.json (JavaScript)”并在其中粘贴以下代码片段，您应该已经成功配置了一个“function”代码片段，当您在 JS 文件中进行编写时可以使用该片段。

{
    "Function": {
        "prefix": "fun",
        "body": [
            "function $1($2) {",
            "    $3",
            "}"
        ]
    },
}

代码片段的配置相对简单。每个代码片段都是一个 JSON 对象。对象的键是代码片段名称。其中的prefix是您用于将代码片段插入到代码中的快捷方式。body是一个数组，其中包含作为代码片段的一部分插入的行。您还可以在代码片段中使用$1、$2、$3等包括占位符。插入代码片段后，您可以继续按tab键，这让您的光标移动到每个占位符。在此示例中，占位符便于您轻松添加函数名称、参数，然后是主体。

PHP/Livewire

既然您知道如何配置代码片段，让我们来看看我最喜欢的用于 PHP 和 Livewire 类的一些代码片段。可以在命令面板中选择“php.json (PHP)”来配置这些代码片段。

类属性和方法涵盖了基础知识，但最近添加的代码片段用于 Livewire 的mount方法、#[Computed]属性（包括 PHP 属性）和 #[Url] 属性。

{
    "Public Property": {
        "prefix": "pub",
        "body": [
            "public ${0};"
        ],
        "description": "PHP Public Property"
    },
    "Computed Property": {
        "prefix": "comp",
        "body": [
            "#[Computed]",
            "public function $1()",
            "{",
            "    $2",
            "}"
        ]
    },
    "Livewire Url Property": {
        "prefix": "url",
        "body": [
            "#[Url$3]",
            "public $1 = $2;",
        ]
    },
    "Livewire Mount Method": {
        "prefix": "mount",
        "body": [
            "public function mount()",
            "{",
            "    $1",
            "}"
        ]
    },
    "Method": {
        "prefix": "met",
        "body": [
            "public function $1($2)",
            "{",
            "    $3",
            "}"
        ]
    },
    "Private Method": {
        "prefix": "pmet",
        "body": [
            "private function ${1}(${2})",
            "{",
            "    ${0}",
            "}"
        ],
        "description": "PHP private function"
    },
}

Blade 和 Alpine.js

我最喜欢的用于 Blade 和 Alpine 代码片段的一些代码片段是：

用于console.log的con
用于console.log的raw，其中将值包装在Alpine.raw中（我在以下内容中提供了一个秘诀：最近一篇文章）
用于 Tailwind CDN 脚本的tailwindcdn，该脚本可用于快速设置 Tailwind 以便进行演示和测试想法

可以在命令面板中选择“blade.json (Blade)”来配置这些代码片段。

{
    "Console Log": {
        "prefix": "con",
        "body": [
            "console.log($1)"
        ]
    },
    "Console Log (Alpine.raw)": {
        "prefix": "raw",
        "body": [
            "console.log(Alpine.raw($1))"
        ]
    },
    "Tailwind Play CDN": {
        "prefix": "tailwindcdn",
        "body": [
            "<script src=\"https://cdn.tailwindcss.com\"></script>"
        ]
    },
}