Vscode中快速生成代码的方式

目录

快速生成React代码

快速生成vue代码


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

快速生成React代码

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

Vscode中快速生成代码的方式_第1张图片

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

Vscode中快速生成代码的方式_第2张图片

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

Vscode中快速生成代码的方式_第3张图片

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

 左侧的输入框中,如下图所示:

Vscode中快速生成代码的方式_第4张图片

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

Vscode中快速生成代码的方式_第5张图片

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

Vscode中快速生成代码的方式_第6张图片 

快速生成vue代码

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

Vscode中快速生成代码的方式_第7张图片

 如果没有vue.json,就点击

Vscode中快速生成代码的方式_第8张图片

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

Vscode中快速生成代码的方式_第9张图片 

Vscode中快速生成代码的方式_第10张图片 

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

Vscode中快速生成代码的方式_第11张图片 接着将右侧生成的json文件复制到vue.json.code-snippets文件中。

Vscode中快速生成代码的方式_第12张图片 

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

Vscode中快速生成代码的方式_第13张图片

 

 

你可能感兴趣的:(React,Vue,web,vscode,javascript,前端)