vscode - 代码模板
<h1 id="vscode---代码模板">vscode - 代码模板</h1><p><img src="https://img2022.cnblogs.com/blog/2237537/202203/2237537-20220304135524124-543088307.gif" alt="" loading="lazy"></p>
<p>程序编写时，一段代码或说明会重复出现，使用模板有利于提高我们的工作效率。</p>
<p>VSCode 作为一种轻量级的代码编辑器，业界内颇受欢迎；下面就介绍一下如何利用VSCode snippet 制作代码模板。</p>
<h2 id="创建一个snippets">创建一个snippets</h2>
<ul>
<li>菜单栏选择File</li>
<li>下拉菜单中选择 Preferences</li>
<li>再选择User snippets，出现下图情况，选择对应的语言即可；如果没有你需要的语言，你需要安装对应的语言插件。</li>
</ul>
<p><img src="https://img2022.cnblogs.com/blog/2237537/202203/2237537-20220304135039700-2074625858.png" alt="" loading="lazy"></p>
<p>Snippets内容使用JSON格式进行定义。<br>
一个JavaScript例子</p>
<pre><code class="language-json">{
"For_Loop": {
"prefix": "for",
"body": [
"for (const ${2:element} of ${1:array}) {",
"\t$0",
"}"
],
"description": "For Loop"
}
}
</code></pre>
<ul>
<li>For_Loop: 当前snippet名字。</li>
<li>prefix: 前缀，代码块使用快捷方式；键入前缀，按tab键，代码块就会被使用。</li>
<li>body: 代码块内容；换行使用\r\n。</li>
<li>description: 键入前缀，vscode 感知到前缀，显示的说明内容。</li>
<li>$1,$2,$0: 指定代码模块生成后，编辑光标出现位置; 使用Tab键进行切换(编辑光标按$1,$2,$3...$0的顺序跳转)，$0是光标最后可切换位置。</li>
</ul>
<h2 id="snippet语法">Snippet语法</h2>
<h3 id="tabstops">Tabstops</h3>
<p><code>$1</code>，<code>$2</code>指定代码块生成后，光标出现的位置；不同位置的相同$1位置同时出现光标。</p>
<h3 id="placeholders">Placeholders</h3>
<p>给光标出现位置加上默认值；例如，<code>${1:another ${2:placeholder}}</code>；<code>$1</code>处位置默认值是<code>another</code>。</p>
<h3 id="choice">Choice</h3>
<p>光标位置设置多个值可供选择; 例如，<code>${1|one,two,three|}</code>；<code>$1</code>位置处可以选择<code>one</code>,<code>two</code>,<code>three</code>中一个词填充在此处。</p>
<h3 id="variables">Variables</h3>
<h4 id="常用变量">常用变量</h4>
<ul>
<li><code>TM_SELECTED_TEXT</code> 当前选中内容或空字符串</li>
<li><code>TM_CURRENT_LINE</code> 当前行内容</li>
<li><code>TM_CURRENT_WORD</code> 光标处字符或空字符串</li>
<li><code>TM_LINE_INDEX</code> 从0开始的行号</li>
<li><code>TM_LINE_NUMBER</code> 从1开始的行号</li>
<li><code>TM_FILENAME</code> 当前被编辑文档名</li>
<li><code>TM_FILENAME_BASE</code> 当前被编辑文档名，没有后缀</li>
<li><code>TM_DIRECTORY</code> 当前被编辑文档目录</li>
<li><code>TM_FILEPATH</code> 当前被编辑文档全路径</li>
<li><code>CLIPBOARD</code> 当前剪切板内容</li>
</ul>
<h4 id="日期和时间相关变量">日期和时间相关变量</h4>
<ul>
<li><code>CURRENT_YEAR</code> 当前年</li>
<li><code>CURRENT_YEAR_SHORT</code> 当前年后两位</li>
<li><code>CURRENT_MONTH</code> 月份，两位数字表示，例如02</li>
<li><code>CURRENT_MONTH_NAME</code> 月份全称，例如 'July'</li>
<li><code>CURRENT_MONTH_NAME_SHORT</code> 月份简写 ，例如'Jul</li>
<li><code>CURRENT_DATE</code> 某天</li>
<li><code>CURRENT_DAY_NAME</code> 星期几， 例如'Monday')</li>
<li><code>CURRENT_DAY_NAME_SHORT</code> 星期几的简写， 'Mon'</li>
<li><code>CURRENT_HOUR</code> 小时，24小时制</li>
<li><code>CURRENT_MINUTE</code> 分钟</li>
<li><code>CURRENT_SECOND</code> 秒数</li>
</ul>
<h4 id="变量格式化">变量格式化</h4>
<pre><code class="language-json">${TM_FILENAME/(.*)\\..+$/$1/}
| | ||
| | ||-> no options
| | |
| | |-> references the contents of the first
| | capture group
| |
| |-> regex to capture everything before
| the final `.suffix`
|
|-> resolves to the filename
</code></pre>
<h2 id="一个python-snippet">一个python snippet</h2>
<pre><code class="language-json">"python template": {
"prefix": "pyHeader",
"body": [
"#!user/bin/python"
"# _*_ coding: utf-8 _*_"
" "
"# @File : $TM_FILENAME"
"# @Version : 1.0"
"# @Author: xxxxxxx"
"# @Email : xxxxxxx"
"# @Time : $CURRENT_YEAR/$CURRENT_MONTH/$CURRENT_DATE $CURRENT_HOUR:$CURRENT_MINUTE:$CURRENT_SECOND"
"#Description:"
" "
"import datetime"
"start_time = datetime.datetime.now()"
"end_time = datetime.datetime.now()"
"print(end_time-start_time)"
],
"description": "my vue python template",
}
</code></pre>
<h2 id="config">config</h2>
<pre><code class="language-json">// javascript.json
{
// Place your snippets for javascript here. Each snippet is defined under a snippet name and has a prefix, body and
// description. The prefix is what is used to trigger the snippet and the body will be expanded and inserted. Possible variables are:
// $1, $2 for tab stops, $0 for the final cursor position, and ${1:label}, ${2:another} for placeholders. Placeholders with the
// same ids are connected.
// Example:
"Print to console": {
"prefix": "log|console",
"body": [
"console.log('$1')",
"$2"
],
"description": "Log output to console"
},
"For_Loop": {
"prefix": "for",
"body": [
"for (const ${2:element} of ${1:array}) {",
"\t$0",
"}"
],
"description": "For Loop"
},
"console.log": {
"prefix": "cl",
"body": [
"console.log($1)"
],
"description": "console.log"
},
"notes": {
"prefix": "/*",
"body": [
"/**",
" * @method $1",
" * @description $2",
" * @param $2",
" * @return $2",
" */",
],
"description": "notes 方法注释"
},
"todo": {
"prefix": "todo|TODO",
"body": [
"// !!!TODO $1"
],
"description": "TODO: // !!!TODO $1"
},
}
</code></pre>
<h2 id="参考">参考</h2>
<p>简书</p>
</div>
<div id="MySignature" role="contentinfo">
Lee2<br><br>
来源：https://www.cnblogs.com/zc-lee/p/15964013.html
頁:
[1]