前端必学：VScode创建用户代码片段最高效快捷的方式！五分钟搞定！

最新推荐文章于 2024-04-27 21:31:54 发布
最新推荐文章于 2024-04-27 21:31:54 发布
阅读量1.4k 收藏 5
点赞数 1
文章标签： vscode javascript vue.js vue 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/kexueyangzhu/article/details/128236780
版权

Step1：写好你想重复使用的代码；

例如：

<!DOCTYPE html><html lang="en">  <head>    <meta charset="UTF-8" />    <meta http-equiv="X-UA-Compatible" content="IE=edge" />    <meta name="viewport" content="width=device-width, initial-scale=1.0" />    <title>${TM_FILENAME_BASE}</title>    <script src="../js/vue.js"></script>  </head>  <body>    <div id="root">$0</div>    <script>      Vue.config.productionTip = false;      const vm = new Vue({        el: '#root',        data: {               },      });</script>  </body></html>

Step2：打开下面这个网址：vsCode 代码片段 自动生成格式

Step3:   将你Step1中写好的代码复制到Step2网页的左侧白色输入框中，网页将自动把你输入的代码转换为代码片段格式（见右侧黑色框）,注意此处左侧的“名字”是你新代码片段的名字，“简写”是你召唤这段代码片段的快捷键，我设置了“vb”，但也可以设置别的；

 Step4: 在VScode中点击左下角的设置图标，选择“配置用户代码片段”的选项；

 Step5: 选择“新建全局代码片段文件...”，也就是图片中的第5个；

 Step6: 输入Step3中新代码片段的名字，敲回车键；

 Step7: 将Step3中在黑色框中获得的代码复制粘贴到下图第18行代码的位置（!!!!!注意不要复制到Step3黑色框的第一个逗号）：

 

提示：不要复制到第一行的逗号哦！！！

 Step8：对新的代码片段按下“Ctrl+S”进行保存

 Step9：现在就可以在写代码的时候按下“vb”召唤我们的代码片段啦！

 

科学养猪指南
关注
  • 1
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
前端必备vue浏览器插件贴心指南，助你成为高效前端开发者！
08-14
一招get！vue浏览器插件开发新技巧！vue浏览器插件神器，让你的开发效率翻倍提升
vscode-vba:在VSCode中使用的VBA语法突出显示和摘要
05-24
VSCode VBA 语法高亮 该软件包提供了VBA的语法突出显示和摘要。 基于从存储库中导入文件。 片段 基本代码 暗淡的声明 如果别的 对于/同时 errHandler的子功能 案件 安装 启动VS Code快速打开（Ctrl + P），粘贴以下命令，然后按Enter。 ext install vba 贡献 请分叉此存储库，并使用拉取请求回馈。 任何贡献，无论大小，主要功能，错误修正和集成测试，都受到欢迎和赞赏，但将进行彻底的审查和讨论。 联络人 您可以通过以下方式与我联系： 邮件： [email protected] Github： spences10 链接 源代码 市场 方便的链接 在对该项目进行了一年以上的任何操作之后，我一直在努力寻找如何生成令牌的方法： 要创建令牌，请转到此处： https://YOUR_USER_NAME.visua
vscode中创建代码片段
Dylan1022520的博客
03-22 1490
1.点击【文件】--【首选项】--【用户片段】 2.输入vue，选择【vue.json(Vue)】 3.粘贴下方代码（可自行修改） { "Print to console": { "prefix": "v", "body": [ "<template>", " <div>\n", " </div>", "&lt
（实用）如何在vscode设置自己的代码片段，提高开发效率
Vinca@的博客
03-08 1205
可能的变量有:$1， $2表示制表符，$0表示光标的最终位置，${1:label}， ${2:another}表示占位符,连接具有相同id的占位符。很多时候，我们新建vue文件的时，都需要把重复的代码结构重新输入或者copy过来，对开发效率照成影响。在输入框中输入 “vue” 或 “vue.json” ， 然后点击“vue.json”打开它，进行编辑。只要我们 打开过用户代码片段，vscode就会自动帮我们创建一个空白模板，存放在。前缀是用来触发代码片段的，代码体将被展开和插入。默认打开，里面附有说明。
vscode添加自定义的用户代码片段
qq_39427511的博客
08-03 2119
在vscode中添加代码片段，提高开发效率。在一个文件中可以定义多个代码片段，只要符合json格式，修改每个代码片段名称，并用连接多行有两种写法：一种需要每行用""，然后行之间用连接（如示例）另一种就是使用特殊符号\n进行分行（不推荐）VSCode 提供了一些预定义的变量，用于获取选定文本或行号等信息。
如何在 Visual Studio Code 中创建代码片段
织网的博客
10-26 827
在 VSCode 中创建自定义代码片段的方法其实很简单。 点击菜单 “查看”-“命令面板” 或者按 command + shift + P 快捷键打开命令选项板。搜索 “Preferences: Configure User Snippets” 或者 “首选项:配置用户代码片段”。 你可以选择现有的代码片段文件或者创建代码片段文件，其中创建代码片段文件有两个选项：全局可用和当前项目目录可。 我们这里以新建全局代码段文件为例，单击“新建全局代码片段文件…”。 创建 .code-snippets 后缀的..
【VSCode】VSCode 创建自定义代码段
姜太小白的博客
02-17 1063
文章目录代码片段简介代码片段配置流程基本语法说明 代码片段简介 snippet[ˈsnɪpɪt]，或者说「code snippet」，也即代码片，指的是能够帮助输入重复代码模式，比如循环或条件语句，的模板。通过 snippet ，我们仅仅输入一小段字符串，就可以在代码片引擎的帮助下，生成预定义的模板代码，接着我们还可以通过在预定义的光标位置之间跳转，来快速补全模板。 当然，看图更易懂。下图将 aj...
VSCode建立属于自己的代码片段/代码模板
wherelse的博客
08-07 3298
VSCode支持丰富的自定义功能，很多功能都支持自定义，使用自定义代码片段，可以加速我们的编程速度，减少一些不必要的重复劳动，或者引导我们养成良好的编程习惯。通过代码片段，可以快速的按照指定格式添加注释，并通过TAB键调用位置索引自动跳转到需要填写内容的地方。定义了代码片段的触发文本。CURRENT_DAY_NAME_SHORT: 当前日期的名字缩写 (例如 ‘Mon’),CURRENT_DAY_NAME: 当前日期的名字 (例如 ‘Monday’),占位符的内容是默认被选中的，所以可以很容易的修改。...
vscode怎么快速生成代码片段
m0_47199370的博客
10-24 3070
这种类型的代码块跟全局作用域的文件路径是一致的，都是创建在了vscode中，会一直存在。比如：如果你创建的是JavaScript类型，那这个代码块就不能再vue文件中使用。这种类型的代码块是创建在某个文件下.vscode这个隐藏文件夹中的，这个代码块只适用于当前文件夹，出了这个文件夹就不能使用这个代码块了。这种类型的代码块是创建在vscode软件内部的文件。是跟随这当前安装的vscode这个软件的，不会随着项目的关闭而失效，会一直存在。有些代码片段是我们在开发过程中需要经常写的，这样我们就可以在。
vscode 新建代码片段snippets（vue模板为例）
weixin_42454941的博客
08-03 1082
1.文件-->首选项-->用户代码片段-->新建全局代码片段 vue.json 2.用以下内容替换vue.json.code-sinppets文件内容 { "Print to console": { "prefix": "vue", "body": [ "<template>", "\t<div cl...
开发中这样提高效率，在vscode中创建用户代码片段
eternal的博客
10-07 812
配置用户代码片段，可以极大提高开发效率！
js闪电跟随鼠标运动特效，css+js+html实现web炫酷效果，必学前端源代码！
02-19
js闪电跟随鼠标运动特效，css+js+html实现web炫酷效果，必学前端源代码！ js闪电跟随鼠标运动特效，css+js+html实现web炫酷效果，必学前端源代码！ js闪电跟随鼠标运动特效，css+js+html实现web炫酷效果，必学前端源...
前端小白必看！如何高效快速编写html+css代码？emmet语法、快速格式化代码！
01-20
在编写代码时，掌握emmet语法是非常有必要的，他可以帮助我们大幅提高编写效率！ 1.快速生成html语法 1.1 生成标签，直接输入标签名，然后按tab即可。比如输入“div”，然后按tab，就可以自动生成 。 1.2 如果想要...
git-commit-lint-vscode:vscode一款git 规范化提交插件
05-17
在日常的开发中,目前主流的代码管理工具就是 git 了,当我们对代码进行改动了,首先得git commit提交到本地仓库,git 规定了提交时必须填写提交信息作为改动说明,保存 commit 历史中,可以找到历史代码,也方便他人 ...
SpringBoot：为您的Spring Boot项目创建仅编写Java代码的前端Web应用程序！
02-06
GazeUI允许您使用所选的服务器端语言来创建前端Web应用程序！ 没有HTML，没有CSS，没有客户端JavaScript。 这是允许您将GazeUI插入项目的模块。 入门 将GazeUI库添加到您的项目类路径中； 在项目上启用GazeUI，...
typescript：vscode的settings配置文件配置ts语法提示
最新发布
a232884c的博客
04-27 210
vscode的settings配置文件，配置ts语法提示打开或者关闭。
vscode使用EditorConfig进行项目配置
死牛胖子的技术随笔
04-27 201
vscode项目配置
vscode 、eslint、prettier 的孽缘
qq_42881675的博客
04-27 451
今天在配置一个新项目的时候，被一个新项目搞得头痛。我准备配置 prettier 来格式代码，然后把 prettier 添加到 eslint 规则中，这样控制台就能很好的展示那些代码格式有问题。可是控制台的错误和 vscode 显示的错误一直不一样，无论我怎么格式化代码，不是控制台报错，就是 vscode 显示代码标红。最后捋清楚了，原来是 vscode 的 eslint 插件，热更本地配置时没有完全加载成功。vscode 才能让代码视图和控制台一致。
【vscode】2024最新！vscode设置默认终端为git bash
qq_43816375的博客
04-27 285
小tian最近电脑系统重装，刚好可以重新配置一下前端环境和工具，以此专栏记录一下前端工具配置和环境相关内容。vscode如何设置默认终端为git bash？
前端vscode常见的代码片段
04-30
在 VS Code 中，我们可以通过代码片段来快速生成常用的代码块。以下是一些常见的前端代码片段： 1. HTML5 基本结构 ``` <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> </body> </html> ``` 2. CSS3 基本样式 ``` * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: Arial, sans-serif; font-size: 16px; line-height: 1.4; } ``` 3. JavaScript 调试工具 ``` console.log('$1'); ``` 4. Vue.js 基本模板 ``` <template> <div> $1 </div> </template> <script> export default { name: '', data() { return { $2 }; }, methods: { $3 } }; </script> <style scoped> $4 </style> ``` 5. React 基本模板 ``` import React from 'react'; function $1() { return ( <div> $2 </div> ); } export default $1; ``` 以上是一些常见的前端代码片段，你也可以根据自己的需求自定义代码片段。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值