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$
    }
}

更多模板

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

推荐阅读更多精彩内容

  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 89,041评论 13 123
  • 19年6月更新:该篇翻译已经被移到 TangYefei's Blog,相较于简书阅读体验会更好,如果喜欢请点个 ❤...
    tangyefei阅读 31,668评论 23 257
  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 139,742评论 20 593
  • 好俗气的名字哦,不过我喜欢。 一早起来,腿疼减轻许多,顿感无比安慰。收拾好自己,准备好小礼物,十点半多一点出门了。...
    青蛇君阅读 34评论 0 0
  • 昨天是周日,初中几个同学叫我带着逛了深大一圈,不止一圈,冥冥中好像有点天意,认识了很多人,终于会在某些人的身上找到...
    三川巨富阅读 78评论 0 1