Search docs/

Code Overview

Ionic Studio offers a full code editor for diving deep into the non-visual aspects of Ionic apps.

Introduction

Code mode features include:

  • Multi-language support
  • Collapsible file tree
  • Search/replace
  • Go-to definition and find all references for TypeScript
  • Autocompletion and TypeScript intellisense
  • Visualized compile errors inside the editor
Code Mode

File Tree Panel

The file tree panel on the left contains a list of all the files and directories in the app.

Right click on a file or directory to rename it, delete it, etc. Drag and drop to move files and directories is also supported.

Search Project

App files can be searched using the search bar at the top of the file tree panel.

Search Bar

Search and Replace

Search and replace functionality is available by using the dropdown arrow when searching.

Search and Replace

Editor

The code editor itself behaves similar to other modern editors.

  • Right click on symbols to Go to Definition or Find all References in TypeScript files
  • Find in File with Ctrl+F (or Cmd+F for macOS)
  • Enjoy intelligent autocompletion of TypeScript code
  • See TypeScript compile errors right inside the editor
  • Bracket matching when the cursor is near bracket characters