前端代码模板：Emmet

Emmet 的使用

Emmet 的介绍

• Emmet 的前身叫做：Zen Coding，也许熟知旧名的人不在少数。Emmet 一般前端工程师用得比较多，具体它是做什么的，我们通过下面两张 Gif 演示图来说明：

5.gif 6.gif

IntelliJ IDEA 自带 Emmet 功能，使用的快捷键是 Tab。

Emmet 资料介绍：

• Emmet 官网：http://emmet.io
• Emmet 官网文档：http://docs.emmet.io/
• Emmet 速查表：http://docs.emmet.io/cheat-sheet/
• Emmet 项目主页：https://github.com/emmetio/emmet

Emmet 的设置

Emmet 的设置

如上图标注 1 所示，IntelliJ IDEA 支持主流四个浏览器内核的一些特别 CSS 书写。
如上图标注 2 所示，可以增加或是删除某些属性。
具体使用，如下图 Gif 演示。

7.gif
8.jpg

---

特殊代码模板

Postfix Completion 的使用

Postfix Completion 功能本质上也是代码模板，只是它比 Live Templates 来得更加便捷一点点而已。具体它是做什么的，我们通过下面一张 Gif 演示图来说明：

非空判断

如上图标注 1 所示，非空的判断在 Java 代码中应该是非常常见的一句话代码，如果用 Live Templates 当然也是可以快速生成，但是没有上图 Gif 这种 Postfix Completion 效果快。也许只是快了那么 0.01 秒，但是有如此好用的功能不用也是一种浪费。

Postfix Completion 的设置

image.png

如上图红圈所示，IntelliJ IDEA 只提供了是否启用的开关，其他的设置就没了。所以如果目前的版本中你还无法想对该功能进行自定义。IntelliJ IDEA 也对常用到的一些固定格式的代码进行了归纳，基本目前也够用了。

• 插入：Java中冒号是遍历的意思

  
  image.png

• Postfix很好用，而且大部分是很基础的功能，建议没事多看一看，节省时间。

---

插件的使用

插件的设置

• 在 IntelliJ IDEA 的安装讲解中我们其实已经知道，IntelliJ IDEA 本身很多功能也都是通过插件的方式来实现的，只是 IntelliJ IDEA 本身就是它自己的插件平台最大的开发者而已，开发了很多优秀的插件。

  
  image.png

如上图标注 1 所示，IntelliJ IDEA 对插件进行了很好的分类：

• All plugins 显示所有插件。
• Enabled 显示当前所有已经启用的插件。
• Disabled 显示当期那所有已经禁用的插件。
• Bundled 显示所有 IntelliJ IDEA 自带的插件。
• Custom 显示所有我们自行安装的插件，如果你自己装了很多次插件的话，这个选项会用得比较多。
• 如上图标注 2 所示，启用的插件是被勾选的，如果要禁用一个插件，去掉勾选即可。
• 如上图标注 3 所示，弹出 IntelliJ IDEA 公司自行开发的插件仓库列表，供下载安装。
• 如上图标注 4 所示，弹出插件仓库中所有插件列表供下载安装。
• 如上图标注 5 所示，浏览本地的插件文件进行安装，而不是从服务器上下载并安装。
• 需要严重注意的是：在国内的网络下，很经常出现显示不了插件列表，或是显示了插件列表，无法下载完成安装。这时候请自行开VPN，一般都可以得到解决。

1. IDEA自家开发的插件
2. 所有插件列表
3. 本地插件列表

如上图红圈所示，如果 IntelliJ IDEA 打开一个它可以识别并且支持的文件类型，它会提示你它有对应的插件进行支持，你可以安装对应的插件来加以兼容此类文件。

插件的安装

• 如上图 Gif 演示，在线安装 IntelliJ IDEA 插件库中的插件。

  
  
• 如上图 Gif 演示，离线安装本地插件文件。

Eclipse 的 Java Web 项目环境搭建

略 详见网站（http://wiki.jikexueyuan.com/project/intellij-idea-tutorial/eclipse-java-web-project-introduce.html）