如何在HBuilderX中自定代码块_hbuilderx自定义代码块-CSDN博客

本文链接：https://blog.csdn.net/qq_41905795/article/details/113408750

前言

我们在使用编辑器开发项目的时候，难免会要首先输入一大串固定的代码框架，这大大降低了我们的开发效率。因此，我们可以借助编辑器的功能，只需输入几个字符，就能出现一大串我们事先写好的代码块。下面我将以HBuilderX为例。

具体操作

第一步，点击HBuilder顶部菜单栏中的《工具》——>《代码块设置》——>《HTML代码块》。

在这里插入图片描述
第二步，在右侧的《自定义代码块》中输入你想要的代码块。

注意

HBuilderX使用json定义代码块的格式，所有代码块都包裹在一对大括号之中，多个代码块之间需要用逗号隔开。
示例中的“html通用代码块”是该代码块的key值，用于显示在代码助手列表中的名字。key值是不能重复的。
body中是具体的代码块内容：
<1>换行使用多个数组表示，一个数组元素代表一行，用双引号包围，并用逗号分隔。
<2>代码中出现双引号使用\"转义，或者使用单引号代替。
<3>缩进需要用\t表示，不能直接输入缩进或空格！
prefix是代码块的触发字符，就是敲什么字母可以激活这个代码块。我们这里设置的是《ht》字符。
scope中的内容就默认为"text.html.basic"，和左边的《内置代码块》中的代码保持一致。

第三步，按住ctrl + s保存代码块，并查看左下角有无报错信息。
在这里插入图片描述

实践

新建一个HTML文件，输入我们预先设置好的触发字符，发现在下方的代码助手列表中有我们刚才写的代码块相对应的key值。
点击回车，就可以出现刚才一大串的代码块了，大大提高了开发效率。

附件

简单的HTML代码块

{
	"html通用代码块": {
		"body":[
			"<!DOCTYPE html>",
			"<html>",
			"\t<head>",
			"\t\t<meta charset=\"utf-8\">",
			"\t\t<title>demo</title>",
			"\t</head>",
			"\t<body>",
			"\t",
			"\t</body>",
			"</html>"
		],
		"prefix": "ht",
		"scope": "text.html.basic"
		}
}

简单的Vue的代码块

{
	"Vuel通用代码块": {
		"body":[
			"<!DOCTYPE html>",
			"<html>",
			"\t<head>",
			"\t\t<meta charset=\"utf-8\">",
			"\t\t<title>demo</title>",
			"\t\t<script src=\"../../vue.js\"></script>",
			"\t</head>",
			"\t<body>",
			"\t\t<div id=\"app\">",
			"\t\t\t{{message}}",
			"\t\t</div>",
			"\t",
			"\t\t<script>",
			"\t\t\tconst app = new Vue({",
			"\t\t\t\tel: \"#app\",",
			"\t\t\t\tdata: {",
			"\t\t\t\t\tmessage: \"hello world\"",
			"\t\t\t\t}",
			"\t\t\t})",
			"\t\t</script>",
			"\t</body>",
			"</html>"
		],
		"prefix": "ht",
		"scope": "text.html.basic"
		}
}