Working with Vue in Eclipse
Vue.js is a progressive framework for building user interfaces. The core Vue library focuses on the view layer only, but it’s easy to integrate it with other libraries or existing projects; Vue is also great for powering single-page applications in the modern web space. If you’d like to develop using Vue in Eclipse, look no further than CodeMix!
CodeMix is an Eclipse plugin that lets you add Code OSS extensions directly into Eclipse—just install the Vetur extension for first-class Vue development support. CodeMix is compatible with Eclipse-based IDEs and tools—like MyEclipse, Spring Tools Suite, and JBoss Tools—so you can continue working in the environment you are accustomed to.
Vue Highlights
IntelliSense
A single .vue file with the HTML markup, CSS style, and JavaScript code makes developing Vue components convenient. You get the expected syntax highlighting, snippets, and content assist for each section. IntelliSense is aware of your component’s model (data, properties, etc.) and suggestions include these entities where appropriate, plus Vue specific attribute completion in the markup too.
Eclipse Oxygen + CodeMix + Vetur extension
Extensions
The Vetur extension is the only extension required for Vue support; however, for the best experience we recommend installing the Vue extension pack. From the Extension Manager, browse for the Vue pack to easily install everything you need for the most productive programming experience with Vue.
CodeMix Extensions Manager
Navigation
The importance of efficient code navigation can never be overstated. Use Quick Open (Ctrl+P), and then type @ to effortlessly jump to different sections of your code—JavaScript methods and fields, CSS styles, and HTML elements. You can also jump to related Vue components.
Eclipse Oxygen + CodeMix + DevStyle + Vetur & Vue Peek extensions
New Vue Project Wizard
Go to File>New>Project>CodeMix and select Vue Project to create a new Vue template project. The wizard makes it easy to start a new project, and even installs any missing Vue extensions.
New CodeMix Vue Project wizard
Validation and Linting
Beyond catching syntax errors in your code, with the ESLint extension installed, a few of them can be automatically corrected as well. From things as simple as the wrong quotes or indentation, to pitfalls like missing key attributes, functions with side effects, or even an incorrectly defined component, ESLint helps you catch errors early in the development lifecycle.
Eclipse Oxygen + CodeMix + Vetur & ESLint extensions
Build & Debug
Building your application for development or production is easy with integrated npm commands. With the development build running, changes to your code are immediately synchronized with the running application, without restarting the build.
It’s simple to step through your code, and inspect variables in vue or .js files.
Eclipse Oxygen + CodeMix + Vetur, npm and Debugger for Chrome extensions