days
-6
-8
hours
-2
-2
minutes
-3
-5
seconds
-2
-9
search
2.0 release is right around the corner

CodeMix plugin: VS Code smarts in the Eclipse IDE you love!

Brian Fernandes
Eclipse IDE
© Shutterstock / VectorsMarket

As an Eclipse developer, do you find support for your favorite framework lacking, outdated, or just plain MIA? Do you envy the blazing speed at which new technologies are supported in VS Code? If the answer is yes, then the CodeMix plugin for Eclipse is exactly what you need.

The CodeMix plugin brings core VS Code technology to Eclipse. This allows most Code OSS extensions to work in Eclipse too, and we’re talking about over seven thousand extensions here. These extensions run the gamut of developer requirements, from advanced support for your favorite web framework to handy tools that make everyday coding efficient.

This is awesome because you can continue using Eclipse for its strong enterprise toolset – Java, Spring, Maven, etc., and have access to all the cool technologies and capabilities that VS Code brings to the table.

CodeMix features

Powerful editors with IntelliSense

Out of the box, CodeMix has editors that provide basic support for dozens of languages – you’ll get syntax highlighting and autocompletion for everything from Rust to TypeScript. If you need more robust support, you can install an extension – more on that later.

IntelliSense provides content assist suggestions as you type, with suggestions based on project-wide analysis of your code. You also get documentation where available, as well as parameter hints as you key in arguments. This project model feeds into validation, quick fix, and refactoring capabilities as well.

If you want to save time typing, parameterized snippets are available for almost every language and framework. The integrated Emmet support for intelligent abbreviation expansion is immensely useful too.

Keyboard power with commands

When you’re knee-deep in code, reaching for the mouse is an unnecessary distraction – the command palette in CodeMix is highly capable and you can use it to jump between files or within them, refactor code, and initiate builds or even debugging sessions. With CodeMix installed, press Ctrl/Cmd + Shift + P, to bring up the palette and just start typing to see for yourself what it can do.

SEE ALSO: Spring tools for Eclipse IDE

Debugging

CodeMix adds the ability to debug a number of languages within the Eclipse debugging framework and UI you are already familiar with.

One example is support for the Chrome debugger protocol, so you can debug web applications running on Chrome – it includes source map support, so you can follow along even if your code was written in TypeScript.

Especially useful is the Debug console which you can use to inspect and modify values while the project is running.

Extensions and coexistence

As we said earlier, there are thousands of extensions for you to pick from, some provide support for different languages and technologies, while others contribute handy tools, like the ability to deploy Docker images, or update all your Node dependencies. To make things easier for you get started with common technologies like Angular, Vue, React, Python, etc., we’ve created a few extension packs which you can easily install from within CodeMix. These packs will install a number of related extensions for you, and they’ll be automatically updated as new versions are released. Of course, you’re not limited to these, you’re free to install any extension you desire.

Most extensions will even be functional immediately, without you having to reload Eclipse. At most, you will get a prompt to restart CodeMix, which only takes a few seconds.

CodeMix works well with other Eclipse plugins which might provide overlapping functionality. For example, if you want to use Eclipse’s PDT for PHP development, but still use CodeMix for HTML and JavaScript, that’s not a problem. CodeMix intelligently detects other installed Eclipse plugins and will ensure editors and validators are configured to point to the best tools at your disposal. In the case of PDT, it will not take over the PHP editing and validating capabilities from PDT. In some cases, CodeMix will ask you to choose which editors and validators you want activated.

Let’s do it live – A Hello World Vue.js app!

Note: You must have Node installed prior to these steps, though in the upcoming CodeMix 2.0 release, this won’t be necessary.

  1. Install CodeMix
    Simply open your Eclipse instance and drag and drop the Install button from this Marketplace entry into your workbench to install it. Restart after the install, when prompted. CodeMix requires Eclipse Neon or higher, and works great with the latest Photon release.
  2. Create a Vue project
    1. Go to File > New > Other and from the CodeMix category, choose Vue Project.
    2. Type a suitable project name.
    3. Ensure Install Vue Extension Pack is checked.
    4. Click Finish.
  3. Ensure the extension pack is installed before proceeding – when installation is complete, you may get a prompt to Reload CodeMix, do so – Eclipse will remain open.
  4. Download dependencies
    1. Press Ctrl/Cmd + Shift + P to open the Command Palette.
    2. Type npm: Install Dependencies to find and execute this command, then choose the project you just created.
    3. A Terminal view will open, executing the npm install command, downloading your project’s dependencies. While these are downloading, you can move to the next step.
  5. Optional: Edit src/App.vue
    1. The App.vue file contains HTML, JS and CSS sections – and you get the correct syntax highlighting, and content assist for each.
    2. On line #27, you can change msg to message. Come back to line #4, delete msg and invoke content assist to see the new message variable suggested.
  6. Deploy the project
      1. Come back to the Terminal view and wait for the dependencies to finish downloading, if they haven’t already.
      2. Run npm run dev to serve the project. Note that you could also execute this directly from the command palette.
      3. Navigate to http://localhost:8080/ in your browser to see your App in action!

    SEE ALSO: How well do you know your Eclipse IDE trivia?

Conclusion

For more on how CodeMix can transform your Eclipse experience, here are a few articles that cover Vue, JavaScript & HTML.

CodeMix is currently at the end of its Technical Preview phase, with the CodeMix 2.0 release right around the corner. If you’d like to learn more, please read The CodeMix Journey and consider joining the CodeMix Insider program.

Author

Brian Fernandes

Brian Fernandes is the Director of Customer Engagement at Genuitec, LLC. He lives in Pune, India, and loves helping developers stay happily productive. When not working, Brian loves to strike items off his “bikeit” list. Follow him on Twitter: @brianfernandes