Working with Lightning Components on Eclipse

Eclipse IDE is a powerful desktop tool suite for building Salesforce applications. The IDE helps you build together with your team, creating Salesforce applications fast, with powerful industry-standard tooling. Here are the steps to install Eclipse IDE Install the IDE Plug-In.

I have been working with Lightning components for some time now. Earlier, without much support for lightning components, people (like me !) using Eclipse were limited to using the developer console to write Lightning components. Then came support for Lightning Components on the IDE.

Now that I had a way to import AuraDefinitionBundle’s into my eclipse workspace, I was able to edit components and back up a local copy, I could just start work in Eclipse, right ?

Not exactly.

Problem 1 – How do i create a new Lightning Bundle in Eclipse ?

This screenshot should tell you what the problem is:

Screen Shot 2017-09-06 at 12.25.28 AM

Hmm, where’d those lightning components go ?

The Docs say:

Screen Shot 2017-09-06 at 12.28.31 AM


After looking around a little bit, turns out they are available under File | New | Other

You should be seeing this under

Screen Shot 2017-09-06 at 12.30.42 AM.png

And that’s where the Lightning Bundle’s get created from. From here on you can choose to create components, events, apps e.t.c. Note that all definition files are added automatically to the bundle with template code.

Problem 2- How do I add another item (say a new css) to my already existing Lightning Bundle ?

This was answered by Greg Wester (owns the IDE in the Eclipse marketplace) on this StackExchange link:

This excerpt from the Metadata API Dev Guide tells you how lightning bundles are constructed:

A Lightning bundle is a folder that contains definition files. Unlike other metadata components, an AuraDefinitionBundle component isn’t represented by a single component file but instead by a collection of component definition files. Each definition file represents a resource in a bundle, such as markup, applications, code files (including controllers and helpers), events, documentation, and interfaces.

Now, this means adding a new CSS definition to my existing Lightning Component can be done by adding a new .css file to the Lightning Bundle in Eclipse. Similar approach for any other definition file.

Now we know how to add a new definition file to our bundle. That’s great, but there are potentially huge pitfalls here. We have to add definition files manually and that implies scope for human errors. Some things that could end up corrupting your component on the Org:

  • Not following naming conventions for the definition files.

The name of each definition file must start with the bundle name.

  • Creating more than 1 definition file of the same type or grouping unrelated definition files (like adding a .evt file to a Component Bundle)

Each bundle can have only one file each with a suffix of, or .tokens.

Probably best to read through this page :

The all-new Lightning Code Editor gives you the following features:

  • Edit an entire Lightning bundle as one logical unit
  • Autocomplete and code hinting for Lightning
  • Property lookups in the documentation view

You can check the details here New Lightning Support in the IDE





Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s