本文针对 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.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
配置步骤
- 进入设置界面
- 搜索
Live Templates
结果页面就是实时模板的编辑界面 - 点开
javascript，点击右侧的+号，选择live template - 或者你可以选择
template group, 用来建立一个新的组
比如nodejs
- 点开
- 点击新建
live template后，在新弹出的输入框中，
填入相应的数据abbreviation-
description描述这个快捷模块的功能 -
Template text模板代码
- 输入框的下面有一个 蓝色的
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$
}
}
网友评论