## Live Templates

Live Templates 将我们平常出现率非常高的代码片段收集起来，再通过缩写

将其输出到编辑器中，是一个非常有用的功能。

![](https://xingxing-blog.oss-cn-shanghai.aliyuncs.com/markdown/20191109-224607-401.gif)

可以通过打开设置窗口，选择 Editor > Live Templates ,查看相关Live Templates的缩写。

在大致了解了PhpStorm自带的一些Live Templates缩写后，你有三种方式来使用它：

- 输入缩写，然后按下`Tab`键；

- 按下``⌘J` 快捷键显示Live Templates的下拉选择框，插入代码片段；

- 按下`⌥⌘J`快捷键，使用Live Template环绕选中的代码；

### 自定义Live Templates

PhpStorm还允许添加自己的Live Templates,具体设置步骤如下：

1. 打开设置窗口，选择 Editor > Live Templates
  2. 点击`+`添加Live Templates
  3. 填写相应的缩写名称，描述，和代码片段。注意：必须填写代码片段的作用范围

下面是一些代码片段的样例：

### 1.LARAVEL 生成 FORM 表单

```html
  // fo
  <form action="$ACTION$" method="post">
    { csrf_field() }
    $CONTENT$
  </form>  
  ```

### 2.生成 TEXT 类型 INPUT 表单

```html
  // ftext
  <div class="form-group">
      <label for="$NAME$" class="control-label">$VALUE$:</label> 
      <input id="$NAME$" name="$NAME$" type="text" class="form-control">
  </div>
  ```

### 3.生成 EMAIL 类型 INPUT 表单

```html
  // femail
  <div class="form-group">
      <label for="$NAME$" class="control-label">$VALUE$:</label> 
      <input id="$NAME$" name="$NAME$" type="email" class="form-control">
  </div>
  ```

### 4.生成 PASSWORD 类型 INPUT 表单

```html
  // fpass
  <div class="form-group">
    <label for="$NAME$" class="control-label">$VALUE$:</label> 
    <input id="$NAME$" name="$NAME$" type="password" class="form-control">
  </div>
  ```

星星的博客

评论