Nodejs：emmet可以为json写扩展语法么？

Nodejs：emmet可以为json写扩展语法么？

这样可以自定义补全，经常要使用某结构，如果能设置补全，那是很好的，呵呵

2 回复

Node.js: Emmet 可以为 JSON 写扩展语法吗？

Emmet 是一个流行的前端开发工具，主要用于 HTML 和 CSS 的快速编码。它通过缩写词展开成完整的代码片段，极大地提高了编写代码的效率。然而，Emmet 主要设计用于处理 HTML、CSS 和相关的标记语言，对于 JSON 文件的支持非常有限。

Emmet 是否支持 JSON 扩展语法？

目前，Emmet 并不直接支持为 JSON 编写扩展语法。Emmet 主要针对 HTML 和 CSS 进行优化，虽然有一些插件或编辑器可以为 JSON 提供一些基本的自动完成功能，但这些功能远不如 Emmet 在 HTML 和 CSS 中的功能强大。

如何实现类似 Emmet 的功能？

尽管 Emmet 本身不支持 JSON 的扩展语法，但你可以通过其他方式实现类似的功能。例如，可以使用 VSCode 的自定义代码片段功能来创建 JSON 片段。

示例：

假设你经常需要编写以下 JSON 结构：

{
    "name": "",
    "age": 0,
    "address": {
        "street": "",
        "city": "",
        "state": ""
    }
}

你可以在 VSCode 中创建一个自定义的 JSON 代码片段：

  1. 打开命令面板（Ctrl+Shift+P 或 Cmd+Shift+P）。
  2. 输入并选择 Preferences: Configure User Snippets。
  3. 选择 JSON（如果你没有 JSON 代码片段文件，VSCode 会为你创建一个新的）。
  4. 添加以下代码片段配置：
{
    "Person Object": {
        "prefix": "person",
        "body": [
            "{",
            "\t\"name\": \"$1\",",
            "\t\"age\": $2,",
            "\t\"address\": {",
            "\t\t\"street\": \"$3\",",
            "\t\t\"city\": \"$4\",",
            "\t\t\"state\": \"$5\"",
            "\t}",
            "}"
        ],
        "description": "A person object with name, age, and address"
    }
}

上述配置中：

  • "prefix" 定义了触发代码片段的缩写词。
  • "body" 包含了实际的代码片段内容。
  • $1, $2, $3, $4, $5 是占位符，用户可以在输入时跳转到相应位置进行编辑。

通过这种方式，你可以创建类似于 Emmet 的 JSON 片段，从而提高你的工作效率。

总结来说，Emmet 本身并不直接支持 JSON 的扩展语法，但你可以通过 VSCode 等编辑器的自定义代码片段功能来实现类似的效果。


Emmet 在 Node.js 中主要用于 HTML 和 CSS 的快速编写和扩展，但目前 Emmet 并不直接支持 JSON 文件中的扩展语法。不过，你可以通过一些额外的配置和工具来实现类似的功能。

例如，你可以使用 Visual Studio Code 编辑器的 JSON 配置功能来自定义 JSON 文件的自动补全。以下是一个简单的示例：

  1. 打开 VS Code 的设置（Ctrl + , 或 Cmd + ,）。
  2. 搜索 JSON 相关的设置，找到 JSON: Schemas。
  3. 添加你的自定义 JSON 模式和补全规则。例如：
{
    "json.schemas": [
        {
            "fileMatch": ["app.json"],
            "url": "https://raw.githubusercontent.com/yourrepo/schema/main/app.schema.json"
        }
    ]
}

这里假设你有一个 app.schema.json 文件，用于定义 JSON 文件的结构。你可以定义一个 JSON Schema 文件来描述期望的 JSON 结构，并通过上述设置将其应用于特定文件（如 app.json）。

下面是一个简单的 JSON Schema 示例：

{
    "$schema": "http://json-schema.org/draft-07/schema#",
    "type": "object",
    "properties": {
        "name": {
            "type": "string"
        },
        "version": {
            "type": "string"
        },
        "description": {
            "type": "string"
        }
    },
    "required": ["name", "version"]
}

通过这种方式，当你在 app.json 文件中编辑时，VS Code 可以提供自动补全和验证功能。

总结来说，虽然 Emmet 不直接支持 JSON 的扩展语法，但你可以通过配置 VS Code 来实现类似的自动补全功能。

回到顶部