程序编写时,一段代码或说明会重复出现,使用模板有利于提高我们的工作效率。
VSCode 作为一种轻量级的代码编辑器,业界内颇受欢迎;下面就介绍一下如何利用VSCode snippet 制作代码模板。
创建一个snippets
菜单栏选择File, 下拉菜单中选择 Preferences
再选择User snippets,出现下图情况,选择对应的语言即可;如果没有你需要的语言,你需要安装对应的语言插件。
Snippets内容使用JSON格式进行定义。一个HTML例子
{
"For_Html": {
"prefix": "html",
"body": [
"<!DOCTYPE html>",
"<html>",
"<head>",
"\t<meta charset=\"UTF-8\" />",
"\t<title>Hello React!</title>",
"\t<script crossorigin src=\"https://unpkg.com/react@16/umd/react.production.min.js\"></script>",
"\t<script crossorigin src=\"https://unpkg.com/react-dom@16/umd/react-dom.production.min.js\"></script>",
"\t<script src=\"https://unpkg.com/babel-standalone@6/babel.min.js\"></script>",
"</head>",
"<body>",
"\t<div id=\"root\"></div>",
"\t<script type=\"text/babel\">",
"\t\t$0"
"\t \tclass $1 extends React.Component {",
"\t\t\tconstructor(props) {",
"\t\t\t\tsuper(props);",
"\t\t\t}",
"\t\t}",
"\t\tReactDOM.render(",
"\t\t\t<$1 >$2</$1>,",
"\t\t\tdocument.getElementById('root')",
"\t\t);",
"\t</script>",
"</body>",
"</html>",
],
"description": "For htmp template"
}
}
For_Loop: 当前snippet名字。
prefix: 前缀,代码块使用快捷方式;键入前缀,按tab键,代码块就会被使用。
body: 代码块内容;换行使用\r\n。
description: 键入前缀,vscode 感知到前缀,显示的说明内容。
$1,$2,$0: 指定代码模块生成后,编辑光标出现位置; 使用Tab键进行切换(编辑光标按$1,$2,$3…$0的顺序跳转),$0是光标最后可切换位置。