让你玩转代码的编辑神器phpstorm功能详解

phpstorm的好功能有很多很多，为我们快速有效地完成项目提供了很多的方便之处，下面我们就一窥它的神奇之处吧。

先从捣鼓编辑器外观让我们看着顺眼些开始吧。

1.修改整个软件的外观

打开“File”-“Settings”-“Appearance”（注意路径，这里有两个Appearance，一个是软件的外观，一个是编辑器的外观），然后在右边找到theme（主题），可以选择软件外观的不同主题。比如你想选择比较能够唬人的黑色外观就可以选择Darcula，如图；

然后点“Apply”就会弹出一个让你重启软件的按钮，重启以后就能看见修改的修改了（下同）。

 

下面的Override default fonts by(not recommended)，意思是推翻默认字体（不推荐），虽然写着不推荐，但是我们偏喜欢逆天而行怎么样，打上勾，字体选“微软雅黑”，字号14，当然这个随你喜欢就行。

 

2.修改编辑器外观

打开“File”-“Settings”-“Editor”-“Appearance”里点中“Colors & Fonts”，右边会有一些已有的风格，它们是编辑器的整体风格，如图：

 

如果你想局部修改编辑器字体，可以点开“Colors & Fonts”前面的小标记，下面有个“Font”，点中它，右边出现一些选项，注意：这时候这些参数是不能修改的，所以第一步我们就是要先Save As...保存成自己的风格，然后取一个名字如mydefault，然后我们就可以为所欲为了，哈哈。

最好选择“Show only monosoaced fonts”，这个是等宽字体，等宽字体是方便我们写代码时可以进行列操作的。Size为14，Line spacing为1.1，当然这随你喜欢，在下面字体里选一个喜欢的字体，左边框里是available fonts可用字体，右边框里是Selected fonts已选择的字体，可用字体和已选字体可以点中间的左右三角按钮互换，已选字体可以用右边的上下三角按钮移动来调整上下位置。

 

3.支持z-coding功能

z-coding是一个让你写html可以事半功倍的东西，比如你在html文件里输入ul.nav>li*5>a然后按Tab键，马上能出来一大段代码，如下所示：

这只是z-coding的冰山一角，更多详情感兴趣的朋友可以找一下这方面的资料。 

 

4.Live Templates代码片断

A)我们先介绍一个代码片段最基本的功能，我们要实现的目标是在html文件或者php文件里打入“quan”这4个字符，就能出现站长圈的网址“http:/ /wwwquan .com”。怎么实现呢？

1).打开“File”-“Settings”，找到并点中“Live Templates”，

2).点右边的+号（7.0版本有两个选择，选择Live Templates），

3).Abbreviation是你将来要输出代码片断代码的缩写，现在输入“quan”，

4).Description是代码片断的描述，这是方便我们自己知道这段代码是什么东西，我们输入“站长圈网址”，

5).Template text是代码片断的内容，我们输入“http://wwwquan.com”。

6).下面有一行红色的字很重要，No applicable contexts yet，Define是让你选你的代码片断是在哪种类型的文件里起作用的，这个一定要选择一下，没有选择时如下图绿框所示，它被分在一个user类别下面。现在我们要让它在html和php文件里起作用，所以在弹出框的html和php两个前面打勾（选择以后下面的字就不是红色的了），如图所示。

提示：Expand with是设置用什么快捷键来显示设置的代码片断，我们用默认的Tab键不改。

保存重启以后，打开一个html或者php文件测试一下吧。

 
 
B)下面介绍一个代码片断的复杂一点的用法。

假设我们是一个懂很多cms的高手，什么phpcms v9、帝国、织梦等等全部不在话下，但是每个cms都有自己的标签，除非你都一一记住，不然你就只能打开它默认模板或者手册去复制粘贴。现在我们就用phpstorm的代码片断来设置一个快捷输入的方法，举例说明如何快速输入phpcms v9的关键字标签和帝国的关键字标签。

1).打开“File”-“Settings”，找到并点中“Live Templates”，

2).点右边的+号（7.0版本有两个选择，选择Live Templates），

3).Abbreviation是你将来要输出代码片断代码的缩写，现在输入“cmskeywords”，

4).Description是代码片断的描述，这是方便我们自己知道这段代码是什么东西，我们输入“cms的关键字”，

5).Template text是代码片断的内容，这次和前面有所不同，我们要输入一个变量“$var$”，输入以后会发现右边那个本来灰色的按钮“Edit variables”变成可点状态了，如下图红框所示，等一下我们设置这个。


6).还是别忘了下面的红色字“Define”点一下，设置html和php打勾，这是因为有些cms的模板是html有的是php类型的，这个懂cms的朋友你懂的。

7)然后点开刚才已经可点的按钮“Edit variables”

可以看见“Derfault value”是默认值，我们输入“"页面关键字"”，注意这是一个字符串类型，外面要加英文的双引号，前面一个“Expression”里有很多函数，我们要介绍的是“enum()”枚举函数，我们输入“enum("帝国关键字","phpcms关键字")”，括号里是参数，参数用英文双引号括起来，参数中间用英文逗号相隔。

8)下面重复2--6步，点右边的+号，选择Live Templates，Abbreviation里输入“帝国关键字”（这个与你在枚举函数里输入的参数是一样的），Description 随便你写不写，你也可以写上“帝国关键字”，这个无所谓；Template text 里输入帝国的关键字标签“[!--pagekey--]”，“Define”点一下，设置html和php打勾


9)再重复2--6步，设置“phpcms关键字”是“{$SEO[‘keyword‘]}”

OK，见证奇迹的时刻到啦，我们来测试一下我们的成果吧。打开一个html或者php的文件，为什么？因为我们刚才设置了只在这两种类型的文件里才能用我们设置的代码片断啊。然后在需要的地方输入“cmskeywords”，按Tab键，是不是有个下拉菜单，里面的内容就是刚才在枚举函数里设置的，用上下键选择任意一个按回车，然后再按Tab，大功告成了。

每做一步都想想刚才是在哪里设置了才会出现这样的结果，试想一下，如果你懂N种cms，这样设置了你能省下多少时间，而且你要输出的代码可能很长，你都可以一下子输出，你也可以举一反三，用这个方法创造更多的奇迹。

5.配置的导入和导出

打开“File”-“Export Setting”,可以把我们辛辛苦苦配置的东西导出来。阿Q温馨小贴士：你可以修改这个配置文件的存放路径，把它放在一个如新浪微盘等等可以和网络同步的文件夹里，修改配置路径的文件在你软件的安装目录下面的JetBrains\PhpStorm 7.0\bin\idea.properties，用记事本打开，复制第8行，把前面的#去掉，后面放你同步文件夹的路径，如

插件地址也可以放在你的同步文件夹，如图：

这样你在公司和家里就能比较快捷地同步使用这个配置文件了。
 

6.项目收藏夹

“File”-“Add to Favorites”
 

7.设置文件编码

“File”-“File Encoding”
 

8.新建本地项目

打开 “File”-“New Project”，弹出如下图的一个框：

“Project name”是项目名称，不要被“项目”这两个字吓到了，它其实就是你要放文件的一个文件夹名字，“Location” 就是你文件夹要放的路径，“Project type”是项目的类型，这也是phpstorm的一个特别功能，如果你要建的是一个空项目，可以选默认的“Empty project”，空项目里会默认有一个.idea文件夹。同时，phpstorm也为你准备好了一些其他项目，比如我们建一个“Twitter Bootstrap”,它是一款微博的先驱Twitter推出的前端框架利器，步骤如下：

然后你就会看见这个框架里已经有了很多文件，你就可以不费吹灰之力使用它们了。

9.新建远程项目

1. 打开 “Tools”-“Deployment”-“Brower Remote Host”，


2.在窗口右侧可以看见一个“Remote Host”区域，点开三个小点点的按钮，新建一个服务



3.填好你的FTP的信息，填完可以点“Test FTP Connection”测试一下连接是否成功，如图：




4.点开前面图中的“Advanced options”按钮，弹出如下对话框，勾选“Passive mode”被动模式：


5.还要点开“Mappings”，选择你下载服务器文件时缓存映射的地方"：


6.然后你就可以在右侧看见你连接的远程服务器了，点开小加号，就看可以看见你空间里的东西了：


7.当你第一次编辑某个文件的时候，可以在那个文件的名字上右键选择“Upload here”下载到本地，它会下载到你映射的地方，


8. 你编辑完成后可以在文件编辑区右键鼠标，选择“Upload to”把编辑好的文件上传到服务器，如果你嫌这样做麻烦，也可以设置一个快捷键，比如“ctrl+s”。
 

有人怕“ctrl+s”和本地保存有冲突，不用怕，因为phpstorm的强大之处在于它本地不需要你保存，它会自动保存，而且它还有一个本地版本库。

那我们顺便来看看这个本地版本库是个啥东西吧。打开菜单栏上“VCS”-“Local History”-“Show History”，你会看见，本地版本库不但帮你保存了最后的修改，而且你对文件做的每一步修改它都有记录，左侧栏显示的是修改时间，中间是显示的修改的地方，右侧是当前的文件样子，这样你再也不怕修改错了不能返回以前的步骤了，也再也不怕突然停电没有保存辛苦编辑的文件等等了，哇，真想三呼万岁啊。

10.代码提示

例如，现在我们要输入“var a=document.getElementById(‘a‘);”，然后我们输入了“var a=doc”以后出现如下提示：

这时候可以按回车或者tab键确定选择当前高亮的代码，也可以用按键盘的上下键选择。

phpstorm的代码提示功能有别于其它编辑器的地方是它是模糊查询的，比如我们 要打“getElementById()”这个代码，但是我们又具体不记得怎么拼了，只记得有个什么byid，然后我们可以输入byid，或者这样输入gbyid（如下图所示）也能搜索到我们想要的代码，它不需要你从第一个字母开始输，也不需要必须连着输入正确才会提示。而一般的代码编辑器，一定要连着输入才能出现相应提示，如输入g就出现g开头的代码，输入ge就出现ge开头的代码，一旦跳过了哪个字母就找不到我们想要的代码了。这么一比较，你是不是就感觉到phpstorm这款神器为我们打代码省下多少时间和精力啊，赞吧？

 
 

再举一个例子，比如你现在打了一句css代码“.box{ color: #abcdef;}”，你记得#abcdef是什么颜色吗？一个css文件里有很多这样的颜色，你都能记得吗？如果要修改，你能快速筛选找到吗？看看神级编辑器phpstorm的显示效果吧：

首先可以看到在代码行的左边有个和颜色值同色的小方块，鼠标指上去会有颜色的十六进制表示，比如你输入的是color: red;它会提示color: #ff0000;如果你单击颜色小方块会弹出一个颜色的编辑器，你可以任意改变你需要的意思，如：

其次，如前图所见我输入的颜色值代码的背景也会以同色显示，这个默认是没有的，需要我们修改一个地方，打开“File”-“Export Setting”-“Editor”-“Appearance”，在右侧找到“Show Css color preview as background”打上勾，确定后重启一下软件就行了，如图：

 

11.扩展编辑器

有时候，你在phpstorm里编辑的时候也想用一些其他编辑器，比如要在phpstorm里修改一下图片，这时候你可以在左侧栏里面的图片文件上右击，然后在选择“Jump to External Editor”，因为这时你还没有选择默认打开的编辑器，它会弹出警告框和设置框，然后我们如图设置一下，你就可以用photoshop来编辑图片了：

 

12.默认打开的文件模板

1.html模板

我们新建一个html文件，打开“File”-“New”会弹出一个文件类型的框，如图：

选择“Html File”,输入文件名，可以看见默认的html模板是这样的：

我们要设置成我们自己平时想要的样子，例如是这样的：

你可以打开“file”-“Settings”-“File and Code Template”，如图：

选择中间栏的“html5”，在右侧栏里粘贴上我们想要的代码，确定后再去新建一个html文件看看，是不是默认新建的就是你自己创建的模板了？中间栏里显示的就是各种文件的类型，你也可以点上面的“+”按钮另外创建一个文件类型，然后编辑它的默认模板。

2.php模板

打开“File”-“New”，选择“PHP File”, 可以看见软件默认的php模板是这样的：

我们想要变成这样的：

还是打开“file”-“Settings”-“File and Code Template”，中间栏里选择“PHP File”，我们在右侧栏里看见“#parse("PHP File Header.php")”这样一句代码，这是啥意思呢？

这其实是说它包含了一个名字叫做PHP File Header的php文件，这个文件在哪里呢？，如图点开中间栏的“Includes”，可以在下面看见“PHP File Header”，选中它就可以看见右侧栏里的模板了：

默认模板里是有很多变量组成的，比如当前你新建的文件是什么编辑器创建的，是谁创建的，创建的时候是几月几日、几点几分，如果是像我们的名字这样固定不变的，你也可以直接写上，如：

 

确定以后新建一个php文件试试，是不是如你所愿了呢？

13.强大的插件

1.liveedit

这是一款让你写html和css可以即写即浏览的插件，它需要配合谷歌浏览器Chrome使用。

1）打开“file”-“Settings”-“Plugins”，点浏览库按钮“Browse repositories”，如下图：


2）在弹出界面右上角的搜索框里输入“liveedit”，会找到一个插件，然后在插件名字上点鼠标右键，点“Download and Install”下载并且安装，会弹出一个提示框问你是不是要安装，选择“Yes”如图：

3）等待安装完成，关闭当前窗口，可以在中间栏看见我们刚才新装的插件，然后重启一下软件让配置生效：


 

下面要测试它的功能，但是别着急，我们还要安装一个谷歌浏览器的插件，我们边测试边安装吧：

1）随便新建一个html文件，然后在文件编辑区点鼠标右键，选择“Debug "test.html"”，test.html是你新建文件的文件名，然后会弹出Debug的功能框，如图：



2）然后因为你是第一次使用，它会弹出一个框（如图），大概的意思就是“要运行这个实例需要去配置一下，你是否需要”巴拉巴拉，点“Stop and Rerun”：



3），稍等一会儿，下面会有如图所示的提示，点击链接：
 


4）会弹出一个谷歌浏览器，显示一个插件，点右边的按钮安装这个插件：





5）安装完成后你会在谷歌浏览器顶部看见一个插件，千万不要点关闭哦，它正是我们要用来调试网页的工具。



6）下面是见证奇迹的时刻了，为了看清楚它的效果，我们移动一下phpstorm编辑器和谷歌浏览器的位置，让我们在phpstorm编辑器里打代码的时候可以看得见谷歌浏览器中发生的变化就行（如果你的屏幕够宽，可以一半放编辑器，一半放浏览器），然后你随便输入一些html和css，一边输入一边观察谷歌浏览器发生了什么变化，如图：

 

怎么样，神奇吧，不用我们保存页面，然后切换到浏览器刷新，就马上即时的可以看见我们输入代码产生的效果，赞一个吧。

 火狐浏览器也有一个差不多的插件叫做“Auto Reload”，你在火狐里搜一下安装上就行：

不过和谷歌浏览器插件有一点点不一样的地方就是，你写完代码必须按工具栏上的保存按钮或者按快捷键“ctrl+S”保存一下才能看见修改，或者激活一下火狐浏览器，就是点一下火狐浏览器的窗口让它成为当前窗口，这3个方法最快最方便的就是按快捷键“ctrl+S”，你可以试一下。还有要友情提示一下，它不能在服务器环境下测试哦，我安装的时候就因为不懂折腾了半天。

另外提示一下，你预览页面的时候也可以把鼠标放在编辑区，这时候会浮出你安装的所有浏览器的小图标，你可以按任意浏览器浏览页面效果。

 

2.CSS-X-Fire

这是一个相关于火狐浏览器的插件，对于它的功能是什么，我们先看一个例子：

假设现在我们布局一个静态页的时候写了这样的代码：

现在的效果是这样的：

而我们要的效果是两个颜色的框要左右排列，我们又不想动脑筋算，于是我们会在火狐的firebug里，在右边的框的宽度属性值上点一下，然后按上下方向键调整这个数值，或者我们又需要改变一下颜色，又要改变它的浮动方向（如图）。总之，你在布局一个页面的时候经常会有很多地方需要一边在firebug里调整css代码一边看效果，但是我们知道，在firebug里调好的值只是让你暂时预览一下页面，只要你一刷新页面，所有调整又会恢复成之前的样子，所以我们必须记住我们刚才修改的地方，回到编辑器一个个找到相应的位置再一个个修改过来，啊，万一我们改的地方太多而忘记了，那不是白忙乎了嘛。

得了健忘症不用愁，让phpstorm来帮你忙。

1.我们如前面所说装一个CSS-X-Fire的插件，步骤和装liveedit是一样的：



2.按提示重启phpstorm后会弹出一个框问你要不要安装一个浏览器上的插件，选“yes”，然后会显示一个页面，提示你在火狐里也要安装的一个插件“cssxfire.xpi”，点击图中的链接安装该插件：





3.安装完成后，我们重新做一下前面在firebug里的修改，然后你可以同时在phpstorm窗口的下方看见一个显示css-x-fire的区域（如果没有看见，也可以在菜单栏的“View”-“Tool windows”下面打开），这个区域里显示了我们刚才修改的文件的文件路径、文件名以及修改的3个地方，这时候你值需要点击下面的“Apply all changes”应用所有改变就行了。你会看见，我们的文件编辑区里已经把刚才你在firebug里修改过的地方全部给你修改好了，免去你一一查找修改的功夫，多么神奇啊。




 

3.IdeaVim

和前面的插件安装方法一样，就是重启phpstorm的时候会弹出一个对话框，让你选择快捷键方案，你可以选择一种，建议使用“Eclipse”.

安装完成后，你会发现你的光标成了一个小黑方块形状，而且不能打字了，这是因为安装了IdeaVim以后默认打开的文件进入了命令模式，知道vim的朋友都知道，vim就是全程在命令模式下操作的编辑器，所以如果这时候我们想回到编辑模式就只要按一下“i”键，那就回到了我们平时熟悉的编辑器状态了。再想回命令模式就按“ESC”。

因为vim不是这里主要介绍的内容，所以就不详细介绍它的很多用法了，这里就介绍一个vim插件的用法，详情可以看《站长圈阿Q讲PHP基础第六课 phpstorm的使用_02》吧。

1.首先，我们假设你在布局页面写导航栏的时候，可能会把客户给你的栏目名称直接这样复制过来，然后要在栏目名称外面套上html标签。



2.这时候你可以让光标停留在那一行上，然后按“ctrl+alt+j”，弹出一个选择模板的对话框，有3个选择，第一种是用标签环绕的方法，第二种是用js里的CDATAf方法环绕，第三种是用XML Zen Coding方法环绕。经常使用的是第三种方法，选择它你可以用上下键，也可以直接敲它的第一个字母“E”：



3.然后会弹出一个对话框让你输入zen coding的缩写方法，比如我们现在要得到的结果是图示这样的，那么我们只需要键入“a.curr”就可以了，结果就会很智能的停留在href里：