vscode自定义emmet快速生成代码

最新推荐文章于 2024-08-01 08:11:56 发布

林子曰

最新推荐文章于 2024-08-01 08:11:56 发布

阅读量621

点赞数

CC 4.0 BY-SA版权

分类专栏：其他

本文链接：https://blog.youkuaiyun.com/qq_21019419/article/details/89844589

其他专栏收录该内容

8 篇文章

订阅专栏

本文介绍了如何在VSCode中通过自定义Emmet快速生成Vue模板代码。只需创建一个配置文件，添加特定格式的代码，保存并重启VSCode，之后输入temp并按Tab键，即可快捷生成Vue模板。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

快速添加代码快捷方式，使用emmet，直接tab生成代码
在这里插入图片描述
创建一个自己的文件，添加如下格式的代码：

{
  "add!": {
    "prefix": "!!",// 双叹号快速添加注释
    "body": ["<!-- $1 -->"],//添加完毕，光标在$1位置
    "description": "快速添加注释"
  },
  "eslint-disable-enable": {
    "prefix": "ed",
    "body": ["<!-- eslint-disable-next-line vue/max-attributes-per-line -->\r\n$1\r\n<!-- eslint-enable -->"],
    "description": "在vue template中 快速添加 eslint-disable"
  },
  "console": {
    "prefix": "con",
    "body": ["console.log('',$1)"],
    "description": "快速添加console.log打印"
  },
  "vue-template": {
    "prefix": "temp",
    "body": [
      "<template><!-- eslint-disable -->\r\n<div></div>\r\n<!-- eslint-enable --></template>\r\n<script>\r\nexport default {\r\n}\r\n</script>\r\n<style scoped>\r\n</style>"
    ],
    "description": "vue模板"
  }
}