Configuring VS Code for Ionic Development

I've been doing a lot of Ionic 2 development lately, and Visual Studio Code has been my editor of choice during all that time. It has great out-of-the-box support for TypeScript, HTML and CSS editing, which is only getting better with monthly new releases. On top of that, there's a lively ecosystem for extensions, which can improve the development experience even further.

In this post I'm going to describe my current configuration and the selection of extensions that I'm using when doing Ionic 2 work.

Writing TypeScript

Ionic 2 comes preconfigured for writing code in TypeScript, just like Angular. My first suggestion is that you set VS Code TypeScript version to the local one, as specified in package.json file. This will ensure that the editor will be using the same version as the build tools. You can do that by following these steps:

  • Open a TypeScript file in your project.
  • Click on the version number in status bar.

TypeScript version in status bar

  • Select workspace version from the menu.

TypeScript version selection

By default, CodeLens for TypeScript references and implementations is disabled, but you can enable it for all TypeScript projects by adding the following settings to your user settings file:

"typescript.referencesCodeLens.enabled": true,
"typescript.implementationsCodeLens.enabled": true

TypeScript CodeLens in editor

Since Angular code highly depends on modules, you will want to install Auto Import extension, which provides quick fixes for missing imports.

Auto import quick fix

With Ionic 2 projects already configured for TSLint, you should also install the TSLint extension to display linting errors in the code editor and the Problems window.

Linting errors in Problems window

Editing HTML Templates

My primary recommendation for editing the HTML templates is the Angular Language Service extension. It provides code completion for Angular attributes, class properties and methods, pipes, etc. You can also navigate to definitions of Angular components and class members. It will even provide limited diagnostics for expressions.

Angular code completion

Another very useful extension is Auto Rename Tag, which provides synchronous editing of matching opening and closing HTML tag.

Debugging

With only two additional extensions you can debug Ionic applications both in the browser and on the device (emulated or real one):

I already described the configuration process for both in previous posts:

To build and launch the application I now always use VS Code's integrated shell. It is the most flexible and requires minimum hassle. I could even switch it to PowerShell with the following setting:

"terminal.integrated.shell.windows": "C:\\Windows\\system32\\WindowsPowerShell\\v1.0\\powershell.exe"

General Productivity

To ensure consistent builds of the application, I strongly recommend specifying fixed versions of NPM packages in package.json. Recently, Ionic's templates also started doing that. To quickly see what new versions of packages are available, I am using Version Lens extension.

Version Lens

I like using TODO comments to indicate where there is still work to be done in the code. TODO Highlight is a great extension for increasing visibility of such comments. It highlights the comments in the editor and provides a TODO-Highlight: List highlighted annotations command to list all comments in the project.

TODO-Highlight output

The extension has sensible defaults for files to exclude from scanning for TODO comments, however I found it necessary to add platforms and plugins folders to the exclusion list for Ionic projects. There's a setting available for that. Just make sure that you keep the default exclusion paths (as listed in the documentation).

"todohighlight.exclude": "{platforms/**,plugins/**,**/node_modules/**,**/bower_components/**,**/dist/**,**/build/**,**/.vscode/**,**/_output/**,**/*.min.*,**/*.map}"

Ionic projects also come with a default .editorconfig configuration. If you want to enforce it, you can install the EditorConfig for VS Code extension.

Nicer Appearance

I like my editor to look nice since I spend most of the day looking at it. For me this means the following changes to the default configuration:

  • Install vscode-icons extension and select its VSCode icons theme. I like the huge selection of different icons it provides.

    VSCode Icons theme

  • I got used to programming font ligatures and it now feels weird when looking at code without ligatures. I've written a separate blog post on setting up ligatures in VS Code and other editors.

    Ligatures in VS Code

I realize that the described configuration is subjective in some aspects and you might not want to use all of it. Still, there's very likely new information for you there that will make you more productive. If you want to learn even more about VS Code (not specific to Ionic development), you can also check my article in DNC magazine.

What is your VS Code configuration like? Which extension do you depend on? Share your thoughts in the comments.

Copyright
Creative Commons License