WebStrom Live Template

本文针对 webstrom 用户,非该用户请绕道。本文旨在提高阁下的编程效率。

在编程开发中,有两种 template (模板),文件模板和代码模板。文件模板指在你新建目录时,就为你创建好文件需要的基本结构,比如:html文件,需要生成好 如下的结构:

<!DOCTYPE html>
<html lang="en">
  <head>   
       <meta charset="UTF-8">   
       <title>Title</title>
  </head>
 <body>
  </body>
</html>

文件模板,你需要改动的内容很少,一般编辑器做好的几种模板就够你使用。另外 一种是代码模板,软件开发时,你经常要输入重复性的繁琐的代码,比如 requiremodelu.exports ,或者 new SomeClass() 等等,重复的劳动意味着浪费时间。

有没有更加快捷的方式,让我们输入这些代码呢?
** 以下文字,以 javascript 为例,其他的编程语言 html、css、php 也是一样的道理。**

有!

re.gif

在笔者的开发环境中,只需要输入 re ,再按tab键,可以输出

module.exports = {
    //光标位置
}

DEMO

re.gif

光标位置又到可以编辑的位置,开发效率提升多少,可想而知了吧。

最快的安装办法

为了安装这些模板,你需要拷贝 XML 文件到相应的 webStrom 或者 phpStrom 目录

  • Windows: [your home directory].[product name][version number]\config\templates

    Example: C:\Users\Windows-User\.WebStorm6\config\templates\

  • Linux: ~.[product name][version number]\config\templates

  • MacOS: ~/Library/Preferences/[product name][version number]/templates

你需要拷贝的是这个文件 https://github.com/shanelau/live-template/blob/master/JavaScript.xml


配置步骤

  1. 进入设置界面
  2. 搜索 Live Templates
    结果页面就是实时模板的编辑界面
    • 点开 javascript ,点击右侧的 + 号,选择live template
    • 或者你可以选择 template group , 用来建立一个新的组
      比如 nodejs
  3. 点击新建live template后,在新弹出的输入框中,
    填入相应的数据
    • abbreviation
    • description 描述这个快捷模块的功能
    • Template text 模板代码
  4. 输入框的下面有一个 蓝色的 define 选择,表示选择该模板的作用范围,将会在哪些文件中生效
setting.png

语法说明

  • $VAR$ 可以定义一个变量
  • $ARRAY$ 可输入一个数组
  • $PARAM$ 可变长度参数
  • $END$ 光标结束符号

更多模板

javascript 或者 nodejs

ce

输出错误信息

console.error($err$);

cl

输出log信息

console.log($END$);

if

if ($PARAM$) {
  $END$
}

me

模块导出

module.exports = {
    $END$
}

re

引入模块

$name$ = require('$name$')$END$

th

then 函数

then(function($PARAM$){
  $END$
});

ca

捕获异常

catch(function(err){
  $END$
})

f

function $NAME$($PARAM$) {
  $END$
}

fn

function ($PARAMETERS$) {
    var me = this;
    $END$
}

ife

if ($CONDITION$) {
    $END$
} else {

}

?

Conditional operator that assigns a value to a variable based on some condition


$VAR$ = ($CONDITION$) ? $VAL1$ : $VAL2$

switch

'switch' statement


switch ($EXPRESSION$) {
case $EXPVALUE1$:
    $END$
    break;
case $EXPVALUE2$:

    break;
default:

}

try


try {
    $END$
} catch (err) {

}

for


len = $ARRAY$.length;
for ($INDEX$ = 0; $INDEX$ < len; $INDEX$++) {
    $VAR$ = $ARRAY$[$INDEX$];
    $END$    
}

forin


for (prop in $OBJ$) {
    if ($OBJ$.hasOwnProperty(prop)) {
        $END$
    }
}

更多模板

_ 欢迎共享代码模板,提高开发效率

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 202,980评论 5 476
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,178评论 2 380
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 149,868评论 0 336
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,498评论 1 273
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,492评论 5 364
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,521评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,910评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,569评论 0 256
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,793评论 1 296
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,559评论 2 319
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,639评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,342评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,931评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,904评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,144评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,833评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,350评论 2 342

推荐阅读更多精彩内容

  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 134,580评论 18 139
  • 22年12月更新:个人网站关停,如果仍旧对旧教程有兴趣参考 Github 的markdown内容[https://...
    tangyefei阅读 35,159评论 22 257
  • Spring Boot 参考指南 介绍 转载自:https://www.gitbook.com/book/qbgb...
    毛宇鹏阅读 46,717评论 6 342
  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 171,378评论 25 707
  • 好俗气的名字哦,不过我喜欢。 一早起来,腿疼减轻许多,顿感无比安慰。收拾好自己,准备好小礼物,十点半多一点出门了。...
    青蛇君阅读 222评论 0 0