The Ionic Book does a great job walking you through the process of building your first Ionic based application. I thought it would be interesting to see how Visual Studio Code can make a great companion for writing Ionic based applications.
I’ll assume you’ve followed the tutorial and have the canonical "ToDo" application running on your Mac. If not, you can clone a version of the application that has all of the VS Code tweaks that we will discuss in this blog from here: https://github.com/chrisdias/ionic-todo-vscode.
Rich Code Authoring and Navigation
Let’s navigate to bower.json using Quick Open, either by clicking on it in the Explorer or through Quick Open (Cmd+E or Cmd+P) and then typing in the first few characters of the file name. Press Enter to open the file.
The first thing to notice is the warning on line 3.
If you hover over the warning or press F8, you will see that the expected type is boolean and not a string.
Tip! The status bar will show the total number of errors and warnings it currently knows about. Here we can see that I have zero errors and one warning.
Clicking on the status will bring up the command palette with a full list of those errors and warnings, along with the offending file, line, and column, which you can select and quickly navigate to.
Not only can we validate the JSON, we can provide IntelliSense with rich descriptions for all of the properties and values that are valid based on the schema for this type of JSON file. Simply press Ctrl+Space to bring up the list.
The set of JSON schemas that VS Code understands are found in the user settings file. Open the settings by pressing Cmd+, and then search (Cmd+F) for "json.schemas".
Tip! Another way to quickly scan a file is by looking at an outline for the file. Press Cmd+P to bring up Quick Open, then type in “@:” to outline the contents of the file. The ":" will group the symbols by type.
If you need to add additional dependencies to your project you can either go to the terminal or run “npm install <package> –save-dev” or you can use VS Code to edit the “dependencies” section of bower.json or package.json directly. Let’s open package.json using Quick Open (Cmd+E). We will add a new dependency, but instead of manually typing it in, press Ctrl+Space to bring up IntelliSense. VS Code will show you a list of the popular Node packages. Start typing and if necessary the tool will query the Node Package Manager service, helping you find the package you are interested in.
Press Ctrl+Space on the version and we will prompt you with the current information from NPM.
When I first created this Ionic application, I configured it to use SASS for Style Sheets instead of plain CSS using the command “ionic setup sass”. Among other things, this command updated the index.html file to point to /css/ionic.app.css” which is derived from ./scss/ionic.app.scss.
This file is not too exciting right now. You can add your own SASS here and know that it will be compiled into the proper CSS file and location (more on that in below). What is interesting in this file is the reference to _variables.scss, so use Quick Open (Cmd+E) to navigate to that file.
The first thing to note are the inline colors. When you enter in a color either by name, hex, rgb, or through IntelliSense on a color, VS Code will provide you a nice preview. (Yes, having a color picker is on the backlog!)
What is more interesting is that the language services for CSS, SASS, and LESS understand the structure of the files. That means we understand that “$dark” is a variable and can be referenced elsewhere in the file. Right click on a variable and choose “Peek Definition”. This will bring up an in place view of all of the places where the variable is being used throughout the file. You can make edits in place and navigate by double clicking on the line or the file.
When I ran the “ionic setup sass” command in this workspace not only did it update our HTML file it also created a gulpfile.js with a set of tasks to watch changes to any .SCSS files and compile them to .CSS files.
At the top of our file we see a “triple slash reference” to “typings/tsd.d.ts”. We use /// references to give the editor hints to the shape of libraries we are programming against. In our gulp file, we’re using gulp, gulp-util, shelljs, and more. The tsd.d.ts file has references to all of the TypeScript definition files for these libraries so we only need to make one reference from our sources.
With this meta-data in hand, we can provide rich IntelliSense and validation for the libraries you are programming against.
A large number of TypeScript definition files exist for the popular frameworks in use today. A project called DefinitelyTyped curates these on GitHub along with the TypeScript Definition Manager. To download a new definition, run the following command:
tsd query <projectname> –action install –save
This will query the repository for the <projectname> TypeScript definition, download it, and install it to the path specified in the “tsd.json” found in the root of our workspace. The tsd.json also tracks the installed definitions so they can be restored later (see “tsd help” for details). The –save option tells tsd to add the /// reference to tsd.d.ts.
The Ionic Framework embraces the AngularJS framework and VS Code makes writing Angular applications even easier. Angular directives are markers on DOM elements that tell Angular to attach behavior to or transform the elements.
VS Code has built in support for Angular directives in IntelliSense within HTML tags. For example, open index.html and press Ctrl+Space on the button tag, and search for “ng ”.
In our Angular code we can take advantage of the Angular TypeScript definition file for IntelliSense against the Angular module.
We also get IntelliSense for Angular’s built in Services such as $http, $controller, $window, and more.
Looking forward, we are investigating support for user defined Angular services as well as markup within HTML.
Visual Studio Code provides a lightweight service that makes it easy to integrate your existing task running framework (gulp for example) into the tool. Code does not try to replace your task runner. Instead, it strives to provide keyboard access to your build and test tasks and to surface errors and warnings in the editor, where they originated.
If a gulp file is detected in the root of the workspace, VS Code will automatically surface the tasks found within the file to the Command Palette. In our project we have a gulpfile.js that was created when we initialized SASS. By default, the Ionic CLI creates a handful of tasks for watching files and compiling SASS to CSS. I’ve added a few more tasks to call the Ionic CLI directly to launch the application in the browser (serve), the emulator (run), and as well as a task to build (build) the application.
Press Shift+Cmd+P to bring up the Command Palette and search for and select “Tasks: Run Task”. All of the tasks from the gulp file are now available to you from directly within VS Code.
I can attach key bindings for Build and Test by configuring the task runner. Open the Command Palette (Shift+Cmd+P) and search for “Tasks: Configure Task Runner” which will open ./.settings/tasks.json with the following content.
This tells Code that our task runner is gulp. I’ve “overridden” the “build ios” task to say that it is our default Build command, meaning it is attached to the key combination Shift+Cmd+B. Because “showOutput” is “true, when I execute the command the Output pane opens with the Tasks channel selected. File references are automatically detected and shown as links, so I can quickly navigate to that file directly from the editor.
Visual Studio Code has its roots in browser based tools where AutoSave is common, as you are never sure when the user will navigate away from the tool. When developing web applications, having a fast “edit-refresh” cycle is very productive, and AutoSave enables that when running locally. Make changes and reload the browser, or better yet use browsersync to reload the browser automatically.
You can enable AutoSave in VS Code on the File Menu.
By combining AutoSave with Ionic’s “live reload”, which is on by default when you run the “serve” or “run” tasks, whenever you make changes those changes will automatically be reflected in the running application. Let’s run the “Run” task and make some changes to /www/index.html. We will change the style of the bar from “bar-dark” to “bar-royal” and after a moment, we will see our app updated right in the emulator.
In the status bar, between the git status and the errors and warnings status, you will see a spinning line. This indicates that a task is running. To stop the “Run” task, simply press Shift+Cmd+X.
In this post, we’ve seen all of the ways that you can use Visual Studio Code to create mobile hybrid applications using the Ionic Framework and Cordova. You can find more documentation on VS Code at http://code.visualstudio.com. Let us know what you think!