webstorm如何自定义代码模板

骑猪看日落 2022-02-19 23:49 936阅读 0赞

1、在webstorm中，点击file菜单栏，进入settings设置选项

2、选中Editor中的live Templates（动态模板）  
![image.png][]

3、点开javascript，点击+添加按钮

![image.png][image.png 1]

4、填写模板

![image.png][image.png 2]

注释：

（1）Abbreviation（缩写）：填写了can，即输入can按tap键，就会自动生成代码模板

（2）description：模板介绍

（3）Templates text：模板文字内容，如：我的模板是：

(function () {     
                var canvas = document.querySelector("#canvas");    
                var context = canvas.getContext("2d");    
                canvas.height = 500;  
                canvas.width = 500;  
      
                context.beginPath();    
                context.moveTo(0,0);    
                context.closePath();    
                context.stroke();    
            }());

5、点击Define，勾选Javascript，完成自定义  
![image.png][image.png 3]

6、Apply、OK，应用、确认

7、使用模板

新建一个html，在

[image.png]: /images/20220220/64c1d0183090400f9cb54eb4c19e263a.png
[image.png 1]: /images/20220220/2d281c688ed64ff49da839c82b3c4213.png
[image.png 2]: /images/20220220/83bf4e9cd1334137868625cae1fd005f.png
[image.png 3]: /images/20220220/38d5571e6e3a4785b37df519077a799d.png

发表评论取消回复

表情：

评论列表（有 0 条评论，936人围观）

还没有评论，来说两句吧...

相关阅读

相关 VSCode自定义代码模板

1.首先选择文件-首选项-配置用户代码片段 ![25963b07239b4c3494b50aab07c16b78.png][] 2.可以选择默认的全局代码片段进行修改也可以

不念不忘少年蓝@/ 2024年04月01日 10:22/ 0 赞/ 91 阅读

相关 VisualStudio自定义代码模板

1.任选一个文件夹下，创建一个.snippet代码模板文件 ![1fc0c291571f47ab8aed2bfdbf277b2b.png][] 2.对文件进行编写，以下是代

╰+哭是因爲堅強的太久メ/ 2024年04月01日 10:20/ 0 赞/ 68 阅读

相关 WebStorm常用快捷键以及自定义模板快捷键

WebStorm常用快捷键 Ctrl+D复制一行 Ctrl+Y删除一行 Ctrl+X 剪切 Ctrl+Z 撤销 Ctrl+A 全选 C

蔚落/ 2023年10月11日 14:38/ 0 赞/ 63 阅读

相关常用的代码模板；自定义模板

【1】模板1： main方法： main 或者 psvm 【2】模板2：输出语句： sout 或者 .sout 一些变型： soutp:打印方法的形参 s

r囧r小猫/ 2023年09月30日 14:39/ 0 赞/ 1 阅读

相关 VSCode 如何操作用户自定义代码片段（模板）

文章目录（1）VSCode 如何操作用户自定义代码片段（快捷键）（2）vetur的配置（3）安装了Vetur之后settin

淩亂°似流年/ 2023年02月20日 13:46/ 0 赞/ 31 阅读

相关 redis如何自定义restTemplate模板

> redis如何自定义restTemplate模板 @Configuration public class RedisConfig {

深碍√TFBOYSˉ_/ 2022年10月29日 13:29/ 0 赞/ 178 阅读

相关 webstorm 自定义eslint格式化代码

vscode上配置eslint格式化代码使用的Prettier 插件，一键格式化。 webstorm上的配置流程如下：[https://blog.csdn.net/qq\_2

浅浅的花香味﹌/ 2022年05月12日 01:58/ 0 赞/ 341 阅读

相关 webstorm之设置代码模板

在用webstorm开发的时候，有一些简单的设置可以大大的提高我们平时开发的效率。下面介绍一下使用webstorm定义自己的模板代码，这样我们就可以把一些常用代码的骨架作

ゝ一世哀愁。/ 2022年03月11日 09:06/ 0 赞/ 396 阅读

相关 webstorm如何自定义代码模板

1、在webstorm中，点击file菜单栏，进入settings设置选项 2、选中Editor中的live Templates（动态模板） ![image.png][]

骑猪看日落/ 2022年02月19日 23:49/ 0 赞/ 937 阅读

相关 IDEA设置自定义代码模板

IDEA设置自定义代码模板 -------------------- 1. 进入IDEA界面，File–>Settings ![在这里插入图片描述][waterm

太过爱你忘了你带给我的痛/ 2022年01月31日 08:41/ 0 赞/ 473 阅读