html phpstorm 生成_[转载]让你玩转代码的编辑神器phpstorm功能详解

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里：