标签：片段 console log VSCode 代码 snippets 附带 光标 Snippets
VSCode 利用 Snippets 设置代码块
一、起步
1.如何设置
Windows系统: 文件 > 首选项 > 用户代码片段
Mac系统: Code > 首选项 > 用户片段
2. 选择已有代码片段或创建代码片段（可以对现有的进行修改，也可以新建代码片段）
代码片段分两种：
- 全局代码片段（每种语言环境下都能触发代码块）。
- 对应语言的局部代码片段（只能在对应语言环境下才能触发），新建全局代码片段会在
snippets目录下生成.code-snippets为后缀的配置文件，而新建对应语言的代码片段会生成对应语言 + .json的配置文件。 - 点击新建全局代码片段，可以新建所有文件都可使用的代码块，输入拓展名可以打开已有的拓展名文件，或者创建新的代码块文件
下图是创建代码块的开始界面：
如：我们新建一个叫 my-snippets 的代码片段文件
新建完之后会出现默认的示例，看起来是个类似 json 的配置文件。
接下来我们可以在开心的在新建的 my-snippets.code-snippets 文件中设置我们的代码片段了。
二、Snippet 语法
// Example:
"Print to console": {
"prefix": "log",
"body": [
"console.log('$1');",
"$2"
],
"description": "Log output to console"
}
复制代码
Example下面的Print to console对应代码片段名称（触发代码片段的时候会展示匹配到的代码片段名称）。prefix对应触发代码片段的字符。body对应代码片段内容，可以是字符串，也可以为数组，若为数组每个元素都做为单独的一行插入。description对应代码片段描述。
1.占位符 $
log 方法中 $ 后面紧跟数字可指定代码片段触发落入编辑器之后的光标位置，光标位置按照从小到大排序。 log 方法中当你输入 log + TAB 之后光标会默认落到 log() 的括号中（$1 的位置），如果此时没有手动移动光标位置，再次按 TAB 则光标会落到 console.log() 的第二行（ $2 的位置），当然，你也可以设置 $3、$4 … 等等。
需要注意的是：
$0 用于设置最终光标的位置，设置了 $0 之后，再往后设置其他占位符则不会生效， $0 终止了 TAB键 的光标跳转操作。
-
小技巧
我们可以在代码片段的最后加上
$0的占位符，方便我们跳出当前代码段，快速开始新的代码编写
2.网站推荐
https://snippet-generator.app/
帮你生成代码块文件
标签：片段,console,log,VSCode,代码,snippets,附带,光标,Snippets 来源： https://blog.csdn.net/li520_fei/article/details/122781673
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。