vscode自定义代码片段（新手交流）

2024-05-13 15:53:06

一、为什么要用js代码片段

运用js代码片段，能有效地帮助我们提高代码效率，减少繁琐代码的记忆过程。也是搜集过很多代码片段设置的文章，但步骤不太明确，经实际操作后整理了以下步骤，供大家学习参考，如有不当之处，还请斧正。

二、js代码片段设置的步骤

1.快捷键Ctrl+Shift+P打开命令输入 snippet :

(也可以点击文件=>首选项=>用户代码片段)

2.选择代码语言类型（这里以html为例）

3.在html.json文件中系统为我们提供了一个例子

4.按照这个例子输入所需片段即可。

以log为关键字嵌入片段为html页面的基本标签结构。

代码片段注意参数含义及设置

“Print to XX” // 代表要输入的
“prefix:” : “ log” // 触发的关键字输入log按下tab键
“body”:[ ] //中括号内放入代码片段的主体
“description” //对代码片段的描述

要注意的点：
1）每行代码之间用" “双引号包裹，每行引号后都用” , "逗号分隔；
2）如果代码片段中有双引，要将双引号改为单引号或引号前加转义字符 \

代码主体的书写规范：
每个字符串元素就代表一行，行与行之间用" , "隔开表示换行。或者使用\n换行
行内不能使用tab键缩进，只能使用空格或者\t缩进
$1使用代码块敲击回车或者tab键后光标定位的位置。$2 $3 $4…表示我们按下tab光标依次出现的位置

三、js代码片段使用的步骤

5.进入 .html 后缀的文件中按快捷键 log后按 tab 键即可实现快速输入代码段

输入后按住Tab 自动补全执行代码片段

—————————————————————————————————

四、实例：以.js后缀名文件的代码片段嵌入

1.搜索所需要嵌入代码片段的文件类型

2.添加代码片段

vscode 自定义代码片段的使用经验分享，已可满足基础新手的使用需求，后续经验更新，会在博文后继续更新…

(暂更新于2021.07.24 20:00 如有错误还请斧正…)

vscode自定义代码片段（新手交流）相关推荐

VSCode自定义代码片段1——vue主模板
VSCode自定义代码片段(vue主模板) {// vue// 1,自定义用户代码片段:VSCode =>左下角设置 =>用户代码片段 => 自定义片段名称 =>编辑用户片段 ...
VSCode自定义代码片段6——CSS选择器
CSS选择器自定义代码片段 { // CSS'selector // 6 如何自定义用户代码片段:VSCode =>左下角设置 =>用户代码片段 => 新建全局代码片段文件... = ...
VSCode自定义代码片段13——Vue的状态大管家
Vue的状态大管家 {// V'Vuex// 13 如何自定义用户代码片段:VSCode =>左下角设置 =>用户代码片段 =>新建全局代码片段文件... =>自定义片段名称 ...
VSCode自定义代码片段11——vue路由的配置
vue路由的配置 {// v'router// 11 如何自定义用户代码片段:VSCode =>左下角设置 =>用户代码片段 =>新建全局代码片段文件... =>自定义片段名称 ...
VSCode自定义代码片段15——git命令操作一个完整流程
git命令操作一个完整流程 {// git'command// 15 如何自定义用户代码片段:VSCode =>左下角设置 =>用户代码片段 => 新建全局代码片段文件... =&g ...
VSCode自定义代码片段3——url大全
url大全 {// url'// 3 如何自定义用户代码片段:VSCode =>左下角设置 =>用户代码片段 =>新建全局代码片段文件... =>自定义片段名称 =>编辑 ...
VSCode自定义代码片段5——HTML元素结构
HTML元素结构 {// HTML'element// 5 如何自定义用户代码片段:VSCode =>左下角设置 =>用户代码片段 =>新建全局代码片段文件... =>自定义片 ...
VSCode自定义代码片段7——CSS动画
CSS动画 {// CSS'animation// 7 如何自定义用户代码片段:VSCode =>左下角设置 =>用户代码片段 =>新建全局代码片段文件... =>自定义片段名 ...
VSCode自定义代码片段4——cli的终端命令大全
cli的终端命令大全 {// cli'command// 4 如何自定义用户代码片段:VSCode =>左下角设置 =>用户代码片段 =>新建全局代码片段文件... =>自定义 ...

最新文章

热门文章