配置VSCodeEmmet缩写的高级模板与自定义代码-VSCode-PHP中文网

配置VSCodeEmmet缩写的高级模板与自定义代码

狼影

发布： 2025-11-20 09:42:06

原创

162人浏览过

通过配置Emmet高级模板和自定义代码片段可大幅提升前端开发效率。在VSCode中，可修改settings.json实现includeLanguages映射非标准语言、syntaxProfiles统一代码风格、triggerExpansionOnTab启用Tab展开，并通过emmet.json定义变量与缩写如m10生成带单位的样式、header-nav快速构建导航结构，结合User Snippets创建rfcp等复杂组件模板，实现高效编码。

配置vscodeemmet缩写的高级模板与自定义代码

在 VSCode 中使用 Emmet 时，可以通过配置高级模板和自定义代码片段来大幅提升前端开发效率。Emmet 原生支持 HTML 和 CSS 的快速展开语法，但通过自定义设置，你可以扩展其行为，适配项目需求或团队规范。

启用并配置 Emmet 配置文件

VSCode 默认已集成 Emmet，但要实现高级功能，需在用户或工作区设置中调整相关选项。打开 settings.json 文件进行配置：

{
  "emmet.includeLanguages": {
    "javascript": "html",
    "vue-html": "html",
    "handlebars": "html"
  },
  "emmet.syntaxProfiles": {
    "html": {
      "attr_quotes": "double",
      "tag_case": "lower"
    },
    "jsx": {
      "self_closing_tag": true
    }
  },
  "emmet.triggerExpansionOnTab": true,
  "emmet.showExpandedAbbreviation": "inMarkupAndStylesheetFilesOnly"
}

登录后复制

说明：

includeLanguages：将非标准 HTML 语言（如 JS 中的 JSX）映射为 HTML 模式，使 Emmet 生效。
syntaxProfiles：定义输出格式，比如属性使用双引号、标签小写等，适合团队统一代码风格。
triggerExpansionOnTab：允许按 Tab 键触发缩写展开，提升输入流畅性。

创建自定义 Emmet 缩写（via snippets.json）

除了默认缩写，你可以在 VSCode 中添加专属代码模板。通过创建 emmet.json 配置文件实现：

{
  "variables": {
    "cssUnit": "rem",
    "baseClass": "btn"
  },
  "abbreviations": {
    "m10": "margin: 10${cssUnit};",
    "pwa": "div[role='button'].${baseClass}.is-active>",
    "header-nav": "header>nav>ul>li*3>a[href='#']{Link $}*3"
  },
  "snippets": {
    "html": {
      "abbreviations": {
        "section-main": "main>.container>(section.box*2)",
        "form-login": "form:post>.field>input:text+label+input:password+label+input:submit"
      }
    },
    "css": {
      "abbreviations": {
        "flex-center": "d:f; jc:c; ai:c; ",
        "hide": "overflow:hidden; text-indent:-999px;"
      }
    }
  }
}

登录后复制

将上述内容保存为 emmet.json，并在 settings.json 中引用：

NovelAI

AI 辅助写作、讲故事，基于你自己的作品创造出类似人类的写作。

236

查看详情

"emmet.extensionsPath": ["~/.vscode/emmet"]

登录后复制

注意路径根据系统实际存放位置调整。

结合 VSCode 用户代码片段增强能力

对于更复杂的结构，建议使用 VSCode 自带的 User Snippets 功能补充 Emmet 不足。例如创建一个 React 组件模板：

// react-component.json
{
  "Functional Component with Props": {
    "prefix": "rfcp",
    "body": [
      "import React from 'react';",
      "",
      "const ${1:Component} = ({ $2 }) => {",
      "  return (",
      "    <div className=\"${3:wrapper}\">",
      "      $0",
      "    </div>",
      "  );",
      "};",
      "",
      "export default $1;"
    ],
    "description": "创建带 Props 的函数组件"
  }
}

登录后复制

这样，在 .js 文件中输入 rfcp 即可生成完整组件框架，与 Emmet 协同使用，覆盖更多场景。

基本上就这些。合理配置 Emmet 加上个性化模板，能让日常编码变得更高效、更一致。关键是根据常用模式提炼缩写，避免过度复杂化。

以上就是配置VSCodeEmmet缩写的高级模板与自定义代码的详细内容，更多请关注php中文网其它相关文章！