您当前的位置: 站长圈 > 技术文章 > 后端教程 > 让你玩转代码的编辑神器phpstorm功能详解(3)

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

来源:站长圈 作者:adminroy 点击: 0

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”:

26.jpg

3),稍等一会儿,下面会有如图所示的提示,点击链接:
 
27.jpg

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

28.jpg

29.jpg

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



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

31.jpg

 

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

 火狐浏览器也有一个差不多的插件叫做“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”,点击图中的链接安装该插件:


\
39.jpg

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




 

3.IdeaVim

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

43.jpg

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

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

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

44.jpg

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



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





更多详细操作,请看视频教程《站长圈阿Q讲PHP基础第六课 phpstorm的使用_02