Web framework updates in Rider 2017.3 – Angular, Vue.js, …
--watch in Jest and Mocha test runners.
This post is part of a series:
- General web development updates in Rider 2017.3
- Web framework updates in Rider 2017.3 – Angular, Vue.js, …
- Live Edit and Spy-JS in Rider 2017.3
- Web developer tools in Rider 2017.3: HTTP client and SVG editing
After installing the Angular plugin (via Rider settings, under Plugins), Rider 2017.3 comes with code completion updates for Angular. We have added completion for property bindings in Angular templates.
We also fixed several bugs. Noteworthy is WEB-25652: code completion is now available for components that extend a base class which has event attributes created using the
Vue.js is a popular framework for creating user interfaces, which Rider now supports as well! From the settings under Plugins, find and install the Vue.js plugin. Once installed, a whole set of Vue.js features opens up in Rider!
Rider comes with templates for Vue components. In solution explorer, we can use the context menu to create a new wile (or press Alt+Insert on a folder) and make use of the Vue component file template. Once added, we can use various live templates by typing
vdata + Tab. A full list of available templates can be found in Rider settings under Editor | Live Templates – Vue.
Of course, navigation from usage of a component to its definition (and vice-versa) is possible as well. Do check the WebStorm blog for a full overview of available Vue.js features, including debugging, styling, …!
Jest and Mocha support –watch in runner
--watch command line switch to quickly re-run tests when needed.
We can now run our test configuration and start working on code. Whenever we save, Jest (or Mocha) will re-run tests and provide us with immediate feedback:
Tests can now also be run with test coverage. After a test run, we can explore the Coverage tool window and explore the various files in our project. When opening them in the editor, the left-hand gutter will display a green or red bar depending on whether the line was executed.
What else is there?
In this post, we focused on improvements in our Angular and Vue.js support, as well as added support for
--watch in Jest and Mocha test runners. In our next post, we’ll cover two awesome tools: LiveEdit and Spy-JS.
Download Rider 2017.3 and give it a go! We’d love to hear your feedback!