IntelliJ IDEA 使用 LiveEdit 插件实现实时可视化前端开发

之前因为公司很多都是C#后台项目,所以一直用的Visual Studio开发。而在VS里会自带实时刷新功能,即:在IDE中修改的CSS代码会同步反映在页面上,而不用我们手动F5刷新。

先在因为在考虑做自己的个站,所以打算转JSP模式,IDE选择了Jet Brains的IntelliJ IDEA,内置同步发布、数据库管理等等,功能确实很强大,但发现每次修改页面代码都得刷新才能看到效果,着实很麻烦。所以安装了LiveEdit插件来实现实时可视化开发,接下来分享一下安装步骤,非常简单。

第一步:下载LiveEdit插件



在IDE中进入“文件(File)→设置(Settings)→插件(Plugins)”中查找LiveEdit。如果你用的IDE版本没有内置这一插件,可以点击,会自动加载插件列表,这个过程可能会等待一段时间,请保持耐心。然后找到插件,点击下载即可。随后根据提示重启IDE。

第二步:在Chrome中安装JetBrains IDE Support扩展程序



仅仅是在IDE中安装好插件还不行,我们还需要得到浏览器的支持。可以点击这里下载。下载文件为一个100多K的crx文件,随后点击“更多工具→扩展程序”,如图。

将下载的crx文件拖入窗口中即可安装。

时间: 2024-10-17 18:42:33

IntelliJ IDEA 使用 LiveEdit 插件实现实时可视化前端开发的相关文章

转:精美jQuery插件及源码 前端开发福利

原文来自于:http://www.html5tricks.com/pretty-jquery-plugin.html jQuery是一个非常不错的javascript框架,很多前端开发者喜欢的原因不仅是因为jQuery使用起来方便,更重要的是因为它的插件很多,我们可以将这些插件应用到自己的项目中去.下面这些精美的jQuery插件提供源代码下载,希望对你有所帮助. 1.jQuery自定义下拉框选择列表 5款炫酷样式 这是一款基于jQuery的自定义下拉框选择列表插件,利用这款jQuery插件我们可

精美jQuery插件及源码 前端开发福利

jQuery是一个非常不错的javascript框架,很多前端开发者喜欢的原因不仅是因为jQuery使用起来方便,更重要的是因为它的插件很多,我们可以将这些插件应用到自己的项目中去.下面这些精美的jQuery插件提供源代码下载,希望对你有所帮助. 1.jQuery自定义下拉框选择列表 5款炫酷样式 这是一款基于jQuery的自定义下拉框选择列表插件,利用这款jQuery插件我们可以非常方便的让浏览器默认的select下拉框变的非常华丽,并且同时拥有select下拉框原有的功能.这款jQuery下

Vim常用插件——前端开发工具系列

作为一名开发者,应该对编辑器之神Vim与神之编辑器Emacs有所耳闻吧.编辑器之战的具体细节有兴趣的童鞋可以google之. Vim最大的特点是打开速度快,功能强大,一旦掌握了其中的命令,编程过程双手就不需要离开键盘了. 用习惯了Vim的另一个好处是在linux下可以很轻松地用vi来处理文件,当然emacs也可以做默认编辑器,但是不是每台机器都有安装Emacs. 今天主要给大家介绍Vim在前端领域的一些常用插件: 1.mark.vim mark.vim主要的功能是变量的高亮. 选中要高亮的词,使

前端实时可视化开发工具

什么是前端实时可视化?其实就是你在编辑器里改变代码,浏览器自动更改,不用你f5刷新:我这里推荐2款: 1.livestyle--只限于改外部css文件的工具: 用法: 首先安装谷歌插件livestyle,建议挂vpn,到谷歌商店里搜 然后安装sublime插件,方法如下:进入Sublime txt:  shift+ctrl+p   输入"pcl"    选择:Install Package(安装插件): 稍等会就会出现选择框,输入你要安装的插件名称:等待安装完成:安装完成后重启Subl

intellij idea 13&14 插件推荐及快速上手建议 (已更新!)

原文:intellij idea 13&14 插件推荐及快速上手建议 (已更新!) 早些年 在外企的时候,公司用的是intellij idea ,当时也是从eclipse.MyEclipse转过去的很是不习惯. 用了一周明显感觉爱上它了.因为它很智能,而且能纠正你很多不好的习惯. 后来跳巢到一家上市公司.因为大家都在用MyEclipse,要求开发工具统一.没办法只能转回MyEclipse.不过个人倒是一直关注intellij idea版本的发布和新的功能. 最近开始使用intellij idea

用IntelliJ实现android gradle插件

用IntelliJ实现android gradle插件 android的gradle插件用了不少了,比如说官方的应用构建插件(com.android.application),lib构建插件(com.android.library),还有第三方的比如辅助multidex的DexKnifePlugin.但是怎么自己创建一个gradle插件一直不明白,今天就试一试自己撸一个android gradle插件,毕竟实践出真知. 基础知识 首先得知道一个gradle插件有需要哪些元素. 我们以androi

监控开发之用python扩展dstat插件自定义实时监控

dstat是一个python开源的实时监控工具,一般是用来做系统性能监控的.咱们这里只是提他的自定义插件开发,用来打造自己的dstat. 有朋友可能还没清楚是啥意思, 咱们查看系统的状体状态有人喜欢用vmstat,也有人喜欢用dstat.相比来说dstat的功能模块更全一点是,这里还只是说查看系统性能方面的 !   如果想一边查看,系统的各方面性能指标,还想看你应用的一些个负载相关,比如某个程序的负载,mongodb的锁lock百分比,mysql连接数...   懂了吧 ! 下面是dstat的插

IntelliJ IDEA中Maven插件无法更新索引之解决办法

IT草根 WangXu's 代码馆 BLOG Home Archives Resume Links About IntelliJ IDEA中Maven插件无法更新索引之解决办法 By Wang Xu 发表于 2015-12-09 文章目录 1. Maven的仓库.索引 2. IntelliJ IDEA利用索引实现自动补全 3. IntelliJ IDEA中Maven插件配置 4. IntelliJ14.1更新索引失败原因 5. 使用国内Maven仓库的镜像 6. 下载Maven仓库的索引 7. 

Erlang 开发者的福音:IntelliJ IDEA 的 Erlang 插件

IntelliJ IDEA 的 Erlang 插件,主要特性: 智能编辑器:  Erlang 代码补全.语法和错误高亮.代码检查 代码导航:项目和文件结构视图.在文件.模型.函数和用例之间快速跳转 工具和框架集成 :支持  Eunit 和  Rebar 版本控制系统:支持 Subversion.Git 和 Mercurial 跨平台:支持 Windows,.Mac OS X 和 Linux 如何安装? 下载 并安装最新的 IntelliJ IDEA: 配置最新的 Erlang 插件:Config