Or, if you rename the component’s selector, the tags for this component in. No more Find & Replace!įor example, you can use the Rename refactoring to update the component‘s class name, and all its usages in all project files will be updated automatically. With the refactorings available for TypeScript and Angular in WebStorm, you can quickly make safe changes throughout your whole project. In template files, WebStorm will help you by suggesting the names of components defined both in Ionic and in your app. They will be highlighted in the editor and also listed in the TypeScript tool window in the IDE. When using TypeScript, you can catch many errors before you actually compile the code. Similarly, you will get suggestions in the code completion popup and auto imports for all classes, methods, and symbols defined in your application. After you select an item from the list of suggestions, the import for the symbol will be added automatically. One is to use Go to file ( Shift-Cmd-O / Ctrl+Shift+N) and them start typing the component name.Īnother is to use the Navigation bar: press Cmd-Up / Alt+Home to jump to the navigation bar, and from there find your way to the nearby files.Īnd surely you can always use Go to definition ( Cmd-Click / Ctrl+Click) to jump from a component, class, method or symbol usage to their declaration.Īs you start writing code, WebStorm will provide you with code completion suggestions.įor example, you’ll get completion for various symbols from Ionic and Angular packages. Using just the keyboard, there are two fast ways to go from a component’s *.ts file to *.html or *.css file in the same directory. Navigating around the projectĪll our components are classes, which is why you can quickly navigate from one to another using the Go to class action ( Cmd-O on macOS or Ctrl+N on Windows and Linux). Every other component is located in a separate folder. Since Ionic uses Angular, the app structure will look familiar to Angular developers. The application code is located in the src folder. Please let us know if you debug your apps that way and would like to do it in WebStorm. Thanks to source maps, the debugger will map the compiled code that runs in the browser to the source code in the editor, and the breakpoints will be hit.Īt the moment, it’s not possible to debug apps running in the emulator. Now you can put the breakpoints right in the app’s TypeScript source code, and debug the code without leaving the IDE. Once our app is running in the browser, we can start debugging it.Ĭreate a new JavaScript debug configuration in WebStorm (menu Run – Edit Configurations… – Add – JavaScript Debug) and paste the URL the app is running at (in our project it’s Save the configuration, and then click the green bug-like icon to start debugging. If there are no errors, the app will be opened in the browser automatically. You’ll see project files in the Project view, and all available npm tasks in the npm tool window on the left.ĭouble-click the task named ionic:serve to preview the app in the browser.Ĭheck the output of the command in the Run tool window. Once you’ve created a project, open a folder with it in WebStorm. You can also use one of the available templates. It creates a simple app with all the dev tools already configured. Ionic allows you to create a new project from the command line: But first, make sure that you’ve installed Cordova and Ionic and configured your environment for iOS or Android development as described here. Let’s go through the Ionic tutorial in WebStorm. Since Ionic can use Angular, WebStorm can be of a great help when working on your next Ionic application. Ionic is a framework for developing mobile apps in TypeScript.
0 Comments
Leave a Reply. |