概述
此文章用来记录jetbrain系列工具使用的小技巧。如果没有特别说明的话,这些技巧在webstorm、phpstorm、idea中是通用且是跨平台的。
live edit功能与浏览器实现同步实现步骤
live edit是一个免刷新的功能,能捕捉到页面的改动(css、html、js改动),然后浏览器自动刷新,这样提高了开发的效率。很赞的一个功能,唯一不足的是,要安装JB插件到浏览器中,对于不能安装该插件的浏览器来说,该功能就鸡肋了。
打开WebStore的设置对话框,找到live edit选项,选中Enable live editing。
打开Chrome浏览器,进入Chrome网上商店,搜索JetBrains IDE Suport扩展程序。点击“添加至Chrome“按钮,安装该扩展程序到Chrome。这时候,Chrome浏览器工具栏上就会出现一个JB图标。注(有时可能在网上商店里搜索不到,我这里提供了一个地址: )
在WebStorm中新建一个html文件,然后在页面内单击鼠标右键,选择debug选项。
这时,webStorm会启动默认浏览器,并且激活JB浏览器插件。
返回到Webstorm编辑器,尝试修改页面中的内容,然后打开浏览器,看看页面是否自动刷新了没。如果配置正确的话,一改动代码,浏览器会立刻刷新的,这简直就是重构开发的圣器呀。
webstorm内置服务器失效的问题
默认情况下,我们可以直接运行本地的html页面,它内部会开启64432端口来运行我们的页面,这样我们不要配置烦杂的后台环境,也可以简单测试一些需要服务器配合的页面了。启动服务的方式如下:
如图我们可以有三种方式或者通过快捷键的方式来启动内置服务器了。这时会在浏览器打开http://localhost:63342/projectName/*.html
这样的页面。可是有一次配置了sftp导致了启动不了内置服务。原因是webstom会把项目当作sftp中的项目发布出去。而发布的url是web server root url指定的。如图所示:
所以每次我们运行的项目中的页面的时候,我们希望是通过内置服务器运行的,但是浏览器中打开的连接是图中红线指定的URL。所以我们可以将其置空,告诉浏览器不要使用sftp指定的URL,而是使用内置服务器生成的URL。(完美搞定)
webstorm中设置nodejs使它能智能提示。
这是我在SF问题社区中的提的问题,问题可见。默认情况下。我们写的NodeJS脚本是不会智能提示的,如图所示:
第一步,File→setting→language and frameworks→javascript→libraries→勾选要用到的库,即(Node.js v0.10.24 Core Modules)
File→setting→language and frameworks->Node.js and NPM
! 在第二个箭头指向的地方,即sources of Node.js Core Modules
指向的地方,有可能出现两种情况,第一种就是上面图上显示的那样,显示Core Module已经安装了。另外一种是提问中显示的情况,sources of Node.js Core Modules
下面的选项不为空,但是源码又没下载,这时就得靠自己手动下载,下载后得到的是一个归档压缩包,解压它并建议放在NodeJS安装的目录下。准备就绪后,重复第一步和第二步的操作。单击图中箭头指向的按钮。
运用并且保存更改的配置后,不出意外的话,在项目的External Libraries
会出现我们刚才添加的库。
如何快速比较两个文件的不同
这也是一个很常用的功能吧,有时候想比较两个文件的异同,但是又不想使用svn或者其他的diff工具的话,这时webstorm就派上了用场了。使用方法也很简单,选中两个文件,然后按下CTRL+D
快捷键,这时webstorm的diff工具就被调用了。
webstorm配置sftp
在配置sftp之前,需要确认的是你的linux已经配置了ssh,至于ssh的配置可以参考我的这篇文章:
如果已经安装好了,可以直接配置了,配置的流程如下:Tools->Deployment->Configuration
,之后就会弹出一个配置的对话框。如图所示:
配置的时候有个要注意的地方。如果设置了Web server root URL就会导致上面说的那样。导致webstorm静态服务器的指向会一直指到这个URL地址。
填写完毕后,单击测试按钮,即Test SFTP connection
,第一次会要求你确认验证一些信息。如果不粗意外的话,那么上都能正确连接上。
测试测功后,我们就可以,把服务器上的项目导入的本地来了,这样本地不需要配置一些复杂的环境,而只是安静的提供编码环境了。