概述
此文章用来记录jetbrain系列工具使用的小技巧。如果没有特别说明的话,这些技巧在webstorm、phpstorm、idea中是通用且是跨平台的。
live edit功能与浏览器实现同步实现步骤
live edit是一个免刷新的功能,能捕捉到页面的改动(css、html、js改动),然后浏览器自动刷新,这样提高了开发的效率。很赞的一个功能,唯一不足的是,要安装JB插件到浏览器中,对于不能安装该插件的浏览器来说,该功能就鸡肋了。
1. 打开WebStore的设置对话框,到live edit选项,选中Enable live editing。
2. 打开Chrome浏览器,进入Chrome网上商店,搜索JetBrains IDE Suport扩展程序。点击“添加至
Chrome“按钮,安装该扩展程序到Chrome。这时候,Chrome浏览器工具栏上就会出现一个JB图标。
注(有时可能在网上商店里搜索不到,我这里提供了一个地
址:le/webstore/detail/jetbrainside
support/hmhgeddbohgjknpmjagkdomcpobmllji )
3. 在WebStorm中新建一个html文件,然后在页面内单击鼠标右键,选择debug选项。
idea debug
4. 这时,webStorm会启动默认浏览器,并且激活JB浏览器插件。
5. 返回到Webstorm编辑器,尝试修改页面中的内容,然后打开浏览器,看看页面是否自动刷新了没。如
果配置正确的话,一改动代码,浏览器会立刻刷新的,这简直就是重构开发的圣器呀。webstorm内置服务器失效的问题
默认情况下,我们可以直接运行本地的html页面,它内部会开启64432端口来运行我们的页面,这样我们不要配置烦杂的后台环境,也可以简单测试一些需要服务器配合的页面了。启动服务的方式如下:
如图我们可以有三种方式或者通过快捷键的方式来启动内置服务器了。这时会在浏览器打
开localhost:63342/projectName/*.html这样的页面。可是有一次配置了sftp导致了启动不了内置服务。原因是webstom会把项目当作sftp中的项目发布出去。而发布的url是web server root url指定的。如图所示:
所以每次我们运行的项目中的页面的时候,我们希望是通过内置服务器运行的,但是浏览器中打开的连接是图中红线指定的URL。所以我们可以将其置空,告诉浏览器不要使用sftp指定的URL,而是使用内置服务器生成的URL。(完美搞定)
webstorm中设置nodejs使它能智能提示。
这是我在SF问题社区中的提的问题,问题可见segmentfault/q/1010000002447282。默认情况下。我们写的NodeJS脚本是不会智能提示的,如图所示:
图中是一个NodeJS的服务器程序,我们让服务器监听端口时,下面显示的只能提示都来自ECMASript。那么如何开启呢?
第一步,File→setting→language and frameworks→javascript→libraries→勾选要用到的库,即(Node.js v0.10.24 Core Modules)
第二步,编辑刚才勾选的项目。选中该项目并且单击右则的Edit按钮,IDE会弹窗一个窗口,如下所示:
如果先前箭头指向的部分已经自动存在,那么我们无需配置其他的选项,退出编辑窗口,保存配置就行了,如果不出意外的话,智能提示就能使用了。如果箭头指向的部分显示为空的话,那怎么办呢?别急,我们接着配置就行了。同样按下面的顺序打开File→setting→language and frameworks‐>Node.js and NPM!
图片描述
在第二个箭头指向的地方,即sources of Node.js Core Modules指向的地方,有可能出现两种情况,第一种就是上面图上显示的那样,显示Core Module已经安装了。另外一种
是segmentfault/q/1010000002447282提问中显示的情况,
如果是这种情况的话,单击Configure按钮下载源码即可,下载完成后,不做其他的修改,保存配置,退出即可。 如果是第一种情况的话,即sources of Node.js Core Modules下面的选项不为空,但是源码又没下载,这时就得靠自己手动下载NodeJS的源码,下载后得到的是一个归档压缩包,解压它并建议放在NodeJS安装的目录下。
准备就绪后,重复第一步和第二步的操作。单击图中箭头指向的按钮。
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。
发表评论