本文针对 webstrom 用户,非该用户请绕道。本文旨在提高阁下的编程效率。
在编程开发中,有两种 template (模板),文件模板和代码模板。文件模板指在你新建目录时,就为你创建好文件需要的基本结构,比如:html文件,需要生成好 如下的结构:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
</body>
</html>
文件模板,你需要改动的内容很少,一般编辑器做好的几种模板就够你使用。另外 一种是代码模板,软件开发时,你经常要输入重复性的繁琐的代码,比如 require
、modelu.exports
,或者 new SomeClass()
等等,重复的劳动意味着浪费时间。
有没有更加快捷的方式,让我们输入这些代码呢?
** 以下文字,以 javascript 为例,其他的编程语言 html、css、php 也是一样的道理。**
有!
在笔者的开发环境中,只需要输入
re
,再按tab
键,可以输出
module.exports = {
//光标位置
}
DEMO
光标位置又到可以编辑的位置,开发效率提升多少,可想而知了吧。
最快的安装办法
为了安装这些模板,你需要拷贝 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
配置步骤
- 进入设置界面
- 搜索
Live Templates
结果页面就是实时模板的编辑界面 - 点开
javascript
,点击右侧的+
号,选择live template
- 或者你可以选择
template group
, 用来建立一个新的组
比如nodejs
- 点开
- 点击新建
live template
后,在新弹出的输入框中,
填入相应的数据abbreviation
-
description
描述这个快捷模块的功能 -
Template text
模板代码
- 输入框的下面有一个 蓝色的
define
选择,表示选择该模板的作用范围,将会在哪些文件中生效
语法说明
-
$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$
}
}