Tuesday, June 26, 2012

Rich Visualforce Editor

Hi Guys, I started learning Force.com platform in November 2011, After few days I got frustrated with force.com eclipse IDE. Reasons we all know well, no auto complete, no context sensitive help, no versioning support,  no active development for this plugin.

Being a Java guy I decided to write a new eclipse plugin to fill this gape so started an open source project on github with name “Rich Visualforce Editor”. After some research and development & little hard work I released alpha version of that plugin, later I couldn’t keep this progress continue and released only one more update with couple of more features and bug fixes. But now I decided to start working on this again with some new features list.

My friend Abhinav Gupta, he motivated me to write this plugin for force.com community, I am very thankful of him. He published couple of posts on his blogs to introduce this plugin to force.com community, you can read following posts from his blog.


Rich Visualforce Editor Plugin for Force.com IDE

features list supported by this version 
  • Context sensitive help for visualforce tags, i.e. click on tag or attribute name and press “ALT + 1”
  • Toolbar icons to quickly launch visualforce and apex developer guide right inside eclipse.
  • Contextual icons in content assist box for tags and attributes.
  • Update site support. Now updating the plugin is super easy.
lets discuss these features in detail

Open visualforce page with Rich Visualforce Editor!

To launch this editor first you need to install this plugin. Later in this blog you will find ‘how to install’ section which will explain installation steps. now lets talk about how to open visualforce with this plugin.

OpenRichVisualforceEditor After installation right click on visualforce page, select “Open With” then select “Rich Visualforce Editor” from sub menu.

Content assist for tags & attributes!
for content assist this plugin needs at least one root element which can be any tag apex or html tag, inside that you can start writing tag and press ‘CTRL + SPACE’, content assist supports tags and attributes as shown in images.
ContentAssist1 ContentAssist2

Context sensitive help for Visualforce tags !

Next important feature is context sensitive help, we generally need help while doing development so If you are working in visualforce page and you want to know more about the visualforce tag or attribute then just click on the tag or attribute and press “ALT + 1” to launch instant help. as soon as you press shortcut key, it will open a new tab in eclipse itself with relevant help. 
ContextSensitiveHelp ContextSensitiveHelp2

Toolbar icons for Visualforce & apex developer guide!

You will find a toolbar with two quick launch buttons to launch apex and visualforce developer guide inside the eclipse.
quicklaunchtoolbar DeveloperGuides

How to install

Current version is build and tested on Eclipse 3.6(Helios) so it will work with 3.6 or higher version of eclipse.

Download link

You can download plugin from here. After download please move plugin jar to Plugin folder inside eclipse installation folder and restart eclipse to reflect the changes.

Update site

if you are already familiar with installing eclipse plugin then you can use Rich Visualforce Editor update site url to install this plugin. You can follow Google Plugin for Eclipse 3.6 (Helios) Installation Instructions post, just remember to change update site url.

to verify installation you can check toolbar icons or right click on visualforce file and open file in “Rich Visualforce Editor” as said early in this post.


  • GIT versioning support. (working on this)
  • HTML5 tag support. (working in this)
  • Only applicable tags will be visible inside tags like apex:param will only be visible for applicable parent tags
  • Display validation errors for apex and html tags .
  • Used attributes will be removed from the suggestion box.
  • Proper Tag, Attribute, Text, Comment color scheme.
  • Support for dynamic update of tags and attributes, as per new Salesforce releases.

GitHub Repository

GitHub repository location : https://github.com/ajayhada/Rich-VisualForce-Editor

Your thoughts, views, feedback
Looking forward for these.