Home - ionic-team/vscode-extension GitHub Wiki

This extension for Visual Studio Code features:

• Create a Project - Start a project for Angular, React or Vue
• Run Commands - Such as build, sync, serve and test
• Run Apps - Launch on a real or emulated iOS or Android device
• Migrate to Capacitor - Actions and recommendations to migrate from Cordova
• Find Deprecated Plugins - Identify known end of life or deprecated packages and plugins
• Native Projects Settings - Set Bundle id, display name, version number and build number of the native project
• Outdated Packages - Provides easy upgrade to the latest version androidmanifest.xml
• Configuration Issues - Recommends changes to config.xml and androidmanifest.xml
• Integrate Capacitor into web projects
• Run Scripts from package.json
• Angular Migrations - Automate Angular version migrations using ng update
• Splash Screen and Icons - Generate Splash Screen and Icons assets for iOS and Android projects
• Error Assistant - Detect errors in swift, java, typescript, eslint, jasmine and jest
• Mono Repo Support for Nx - Support for Capacitor and Ionic Angular/React with Nx and nxtend.dev

Creating Ionic Projects

• Open an Empty Folder
• Choose a starter project
• Your project will be created ready to run

Running on Android

• Choose Run On Android
• Select the chosen emulator or connected Android device
• Changes to source code are instantly updated in the app using Live Reload

Running on iOS

• Choose Run On iOS
• Select the chosen simulator or connected iOS device
• Changes to source code are instantly updated in the app using Live Reload

Adding Capacitor

• Choose Integrate Capacitor
• Required packages and setup will be applied to your web application or SPA

Upgrading Packages

• Select a package from Packages section
• Choose to Upgrade or Install
• The Info option will launch the packages home page on npm
• Select the Light Bulb icon next to a scoped package (eg @capacitor) to allow upgrading of all packages

Upgrade to a particular version

• Find the package to upgrade from the Packages section
• Click the ... icon on the right
• Choose the version from the selection of released versions

Capacitor Migration

• Migrate a Cordova project to Capacitor
• Incompatible plugins are flagged
• Equivalent Capacitor plugins are identified and replaced
• Unrequired plugins are removed
• Video of migration to Capacitor

Native Project Settings

By opening the Configuration item you can set native projects settings:

• Change Display Name, Version Number and Build Number.
• A change in settings will be applied to both the iOS and Android project.
• Handles when the iOS and Android settings are deliberately different from each other.
• Video of Changing Native Project Settings

Angular Migrations

• Open the Packages section and find @angular
• Click the Light Bulb icon
• Choose an Upgrade option of either the next or latest version
• ng update will be used to update your Angular dependencies and perform automated code migrations
• Follow up with manual steps documented at update.angular.io
• Video of Angular Migration

Ionic Angular Toolkit Migration

Performs migrations related to upgrading to v6+ of @ionic/angular-toolkit:

• Adds ionic/cordova-builders to Cordova projects using @ionic/angular-toolkit version 6+
• Removes ionic/cordova-builders from Capacitor projects (usually migrated from Cordova)
• Removes ionic-cordova-build and ionic-cordova-serve sections in angular.json in Capacitor Projects
• Video of Angular Toolkit Migration

Splash Screen and Icons

A splash screen and icon image can be set:

• The package cordova-res will be installed as a dev dependency
• Images will be generated by resizing for various iOS and Android sizes
• These images will be included as part the native projects
• Allows setting of Adaptive Icons which are used by Android

Error Assistant

Detects errors in swift, java, typescript, eslint, jasmine and jest files after operations.

• Opens the place in code where the error occurs
• Allows navigation to next and previous errors
• Re-runs the operation when you correct the problem and save the file

Nx Support

Detects a Nx workspace and provides a Nx Project selector for apps. When an Nx project is selected menu options will reflect what the project is capable of (eg running a native iOS or Android app). The scripts section will also include the common Nx commands for build, test, lint and e2e.

Note: The extension only provides support for node package upgrades at the root of your Nx workspace.

• Video of Nx Workspace

Submit Feedback

File an issue to provide feedback on bugs and feature requests.