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!
Subscribe to Blog updates
Thanks, we've got you!
Eager, Lazy and Explicit Loading with Entity Framework Core
Entity Framework Core (EF Core) supports a number of ways to load related data. There’s eager loading, lazy loading, and explicit loading. Each of these approaches have their own advantages and drawbacks. In this post, let’s have a quick look at each of these ways to load data for navigational prope…
OSS Power-Ups: bUnit – Webinar Recording
The recording of our webinar, OSS Power-Ups: bUnit, with Egil Hansen and Steven Giesel, is available. This was the twelfth episode of our OSS Power-Ups series, where we put a spotlight on open-source .NET projects. Subscribe to our community newsletter to receive notifications about future webi…
Accelerating Your Testing Workflow with Unit Test Creation and Navigation
Unit tests play an important role in our daily development workflow. They help us ensure our codebase's correctness when writing new functionality or performing refactorings to improve readability and maintainability. In the process, we often create new test files that accompany the p…
Introducing Predictive Debugging: A Game-Changing Look into the Future
With the introduction of debugging tools, software developers were empowered to interactively investigate the control flow of software programs to find bugs in live environments. At JetBrains, we've always strived to improve the art of debugging. Besides the more standard things you expect from a de…