Vscode中快速生成代码的方式

最新推荐文章于 2024-09-06 15:17:09 发布
最新推荐文章于 2024-09-06 15:17:09 发布
阅读量7.3k 收藏 29
点赞数 4
分类专栏： React Vue web 文章标签： vscode javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Celester_best/article/details/125629806
版权
Vue 同时被 3 个专栏收录
15 篇文章 0 订阅
订阅专栏
web
14 篇文章 1 订阅
订阅专栏
React
9 篇文章 0 订阅
订阅专栏

目录

快速生成React代码

快速生成vue代码

在看视频时，发现大佬使用快捷键快速生成模板代码很方便，所以就学习了下，现记录步骤。

快速生成React代码

首先在vscode中找到“配置用户代码片段”按钮，点击进去

 在显示的输入框中输入Javascript。

 选中Javascript.json，会弹出一个Javascript.json文件

 紧接着，在一个js文件中输入一段模板代码，然后复制到snippet generator:https://snippet-generator.app

 左侧的输入框中，如下图所示：

将右侧生成的json文件直接复制到Javascript.json文件中

然后，在js文件中输入imR，点击弹出的提示框或者是按tab键可以快速生成一段代码了。

 

快速生成vue代码

依然点击“配置用户代码片段”按钮，然后输入vue.json

 如果没有vue.json，就点击

新建全局代码片段文件或者新建 “xxx” 文件夹的代码片段文件，然后再输入vue.json，按enter键之后就可以生成一个json文件。

 

 

接着在vue文件中输入一段模板代码，然后复制到snippet generator左侧的输入框中，如下图所示：

 接着将右侧生成的json文件复制到vue.json.code-snippets文件中。

 

之后，只要我们在.vue文件中输入ted，然后点击弹出的提示框，就可以生成一段模板代码

 

 

Celester_best
关注
专栏目录
vsCode 快速生成VUE模板代码
weixin_45102071的博客
08-21 3691
使用 vscode 快速生成 vue 模板代码方法 1、打开 vscode ，快捷键 ctrl + shift + p，弹出输入框后，输入 snippets 2、选择 “ 首选项：配置用户代码片段 ” 一项，输入 vue（或者vue.json），选择 vue.json 选项； 3、打开 vue.json 文件，更改里面的代码 3-1、源代码： 3-2：更改后代码：改成自定义代码 4、更改后，新建vue文件，输入 vue 按下 enter 键，快速生成自定义代码模块 ...
vscode中快速生成vue骨架
m18697787579的博客
02-24 635
创建vue文件输入vue回车得到vue骨架，建议收藏0.0 1.安装Vetur，识别vue文件 2.配置设置——用户代码片段-——找到vue.json 3.复制代码如下： "Print to console": { "prefix": "vue", "body": [ "<!-- $1 -->", "<template>", "<div>", "", "</div>", "</template&
在VSCode中轻松生成代码片段
08-12
在VS Code中轻松生成代码片段
VSCODE快速生成代码tips
天天的博客
01-12 3770
VSCODE快速生成代码
使用vscode的codecode插件实现快捷指令生成代码块，提高效率
weixin_62377955的博客
08-02 237
2、选择要生成的代码块，然后右击 codecode-保存代码。3、输入v3，按下enter即可。
Vscode 快捷键生成代码片段
weixin_46873254的博客
08-24 1250
32. Vscode 快捷键生成代码片段
vscode 代码片段 快速生成代码
TGODS
09-19 8606
1、文件 —> 首选项 —> 用户代码片段 2、在输入框中 输入 vue.json，点击进入 如果没有这个文件，就点击 新建全局代码片段文件或者新建 “xxx” 文件夹的代码片段文件，在输入 vue.json 3、输入想要的代码格式，命名自取，就可以 直接在vue文件中输入名字就可以快速生成代码了 { "Print to console": {//less 快捷 "prefix": "vueless",//vueless 是名称，生成代码就输入这个名称就可以了
vscode 快捷键生成代码汇总
憬淮的博客
11-24 7584
vscode html快捷键汇总
VSCode如何快速生成注释.doc
07-19
VSCode 快速生成注释 ...在 VSCode 中快速生成注释非常简单，只需要配置用户代码片段，然后使用配置好的模板即可快速生成注释。这个方法不仅可以提高编码效率，还可以帮助其他开发者快速理解代码的逻辑和意图。
vscode快速生成vue模板
08-12
在开发Vue项目时，Visual Studio Code (VSCode) 提供了一种高效的方式来创建Vue模板，通过自定义用户代码片段。这种功能使得开发者可以快速输入预设的Vue组件结构，节省了手动编写模板的时间，提高了开发效率。下面...
前端开发工具vscode如何快速生成代码片段
versionli的博客
06-26 8023
下面以设置React代码片段为例： 1， 打开vscode工具 ： 文件->首选项->用户片段 2，搜索 javascript.jon 3，点击打开，如图： 4，复制一段react的代码（你喜欢的模板） 我以下面这模板为例子 import React, { Component } from 'react'; import ReactDOM from 'react-dom'; class App extends React.Component { .
vscode快捷键快速生成代码片段
FOR_HOU的博客
11-14 451
vscode快捷键快速生成代码片段（snippet generator在vscode中的使用）
vscode 配置自定义code snippets 来快速生成你的常用代码
crispto的博客
10-07 1989
一、功能介绍展开就是这样的代码有一个小窍门是通过。例子：在做一些简单的配置之后，就可以通过输入inc + Tab生成下面这一个常用的代码。
vscode怎么快速生成代码片段
m0_47199370的博客
10-24 3153
这种类型的代码块跟全局作用域的文件路径是一致的，都是创建在了vscode中，会一直存在。比如：如果你创建的是JavaScript类型，那这个代码块就不能再vue文件中使用。这种类型的代码块是创建在某个文件下.vscode这个隐藏文件夹中的，这个代码块只适用于当前文件夹，出了这个文件夹就不能使用这个代码块了。这种类型的代码块是创建在vscode软件内部的文件。是跟随这当前安装的vscode这个软件的，不会随着项目的关闭而失效，会一直存在。有些代码片段是我们在开发过程中需要经常写的，这样我们就可以在。
vscode如何快速生成标准的html代码
Ch_2018的博客
10-07 597
步骤： 一、先输入一个英文状态下的 ! 二、点击 tab 键 三、自动生成标准的html代码（见图） ...
VScode快速生成代码片段
最新发布
Ariel_tilamisu的博客
09-06 203
文件-首选项-配置代码片段-新建全局代码片段文件（如果配置过，可以在配置的文件里继续配置），给文件取个自己喜欢的名字。4.使用验证：在你需要快速生成代码片段的地方，写入快捷键 - vh。3.复制到VScode的代码片段配置文件中。”生成想要的代码片段。
新版本VScode中快捷键自动生成代码
dd2016124的博客
09-12 382
新版本VScode中快捷键自动生成代码
VScode代码快速生成+快捷键
m0_65535014的博客
10-21 352
！（英文状态）+tab 生成HTML框架； emmet快捷键：快速生成代码结构 ul.ul-list>li.li-$(li_$)*5; 快捷键
vscode中使用代码片段（Snippets）来快速生成常用的代码模板
不才的专栏
06-07 1405
在 VS Code 中进行 C++ 编程时，可以使用代码片段（Snippets）来快速生成常用的代码模板。下面是一个简单的例子，演示如何使用代码片段在 C++ 文件中生成一个简单的类定义。
vscode怎么快速生成类图
07-27
在VSCode中快速生成类图的方法如下： 1. 首先，在VSCode中安装插件"PlantUML"。 2. 在Java项目目录下创建一个.sh文件，比如命名为aa.sh。 3. 在aa.sh文件中，使用以下命令生成aa.puml文件： ``` find . -name '*.java' | xargs cat | \ awk -vRS='{' 'match($0,/public\s+((class|interface).+(extends|implements).+$)/,a){print a\[1\] "#" }' | \ awk -vRS="" '{gsub("\n"," ");print}'| awk -vRS="" '{gsub("#","\n");print}' > aa.puml ``` 这个命令会找到项目中的所有Java文件，并将其内容合并为一个字符串。然后，使用正则表达式匹配类名或接口名，并输出到aa.puml文件中。 4. 编辑aa.puml文件，在开头和结尾各添加一行： ``` @startuml uml @enduml ``` 其中，"uml"是生成的图片名称。 5. 在命令行中运行以下代码，生成类图图片： ``` java -DPLANTUML_LIMIT_SIZE=25000 -jar path_to_plantuml\plantuml.jar java_proj_dir\aa.puml ``` 这个命令会使用PlantUML生成一个长为25000像素的uml.png图片。你可以根据需要调整图片大小，直到完全包含类图。 请注意，如果在执行第4步时出现错误，提示某个行中有文字错误，你可以尝试删除aa.puml文件中的`<>`及其内的内容，然后再次执行命令。 希望这些步骤能帮助你在VSCode中快速生成类图。 #### 引用[.reference_title] - *1* [在vscode中生成java类图](https://blog.csdn.net/xuex_chen/article/details/129301724)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control_2,239^v3^insert_chatgpt"}} ] [.reference_item] - *2* [VSCode使用plantuml插件快速生成java项目uml类图【从springboot项目快速绘制UML类图】](https://blog.csdn.net/qq_37746855/article/details/124798124)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control_2,239^v3^insert_chatgpt"}} ] [.reference_item] - *3* [前端提升开发效率之vsCode 快速生成自定义模板](https://blog.csdn.net/Sanzhutech/article/details/117991302)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control_2,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值