|
1 | 1 | --- |
2 | | -title: Ionic VS Code Extension |
| 2 | +title: VS Code Extension |
3 | 3 | --- |
4 | 4 |
|
5 | 5 | <head> |
6 | | - <title>Using the Ionic Visual Studio Code Extension</title> |
7 | | - <meta |
8 | | - name="description" |
9 | | - content="The Ionic Visual Studio Code extension helps you perform various functions that are common to developing an Ionic app" |
10 | | - /> |
| 6 | + <title>VS Code Extension</title> |
| 7 | + <meta name="description" content="Using the Ionic/Ionic-Framework VS Code Extension" /> |
11 | 8 | </head> |
12 | 9 |
|
13 | | -The Ionic Visual Studio Code extension helps you perform various functions that are common to developing an Ionic app, all without leaving your VS Code window. You can install the [extension on the Visual Studio Marketplace](https://marketplace.visualstudio.com/items?itemName=ionic.ionic). Once you have the extension installed, you'll see the Ionic logo in the activity bar. |
14 | | - |
15 | | -## Create a New Project |
16 | | - |
17 | | -From an empty directory, you can create a new Angular, React, or Vue project by clicking one of the template options and providing an app name. |
18 | | - |
19 | | -<img |
20 | | - src="https://user-images.githubusercontent.com/84595830/159510276-6766a5b8-132d-4284-a3fa-cd6374d64891.gif" |
21 | | - alt="Video of creating a project" |
22 | | -/> |
23 | | - |
24 | | -With the new project created, the extension will provide access to all of the common tasks in your `package.json`. |
25 | | - |
26 | | -## Adding Capacitor |
27 | | - |
28 | | -You can also add [Capacitor](https://capacitorjs.com/) to your application by choosing "Integrate Capacitor". |
29 | | - |
30 | | -<img |
31 | | - src="https://user-images.githubusercontent.com/84595830/159510570-b5a151bb-2e17-42c8-8cab-bffbaa849576.gif" |
32 | | - alt="Video of adding Capacitor" |
33 | | -/> |
34 | | - |
35 | | -With Capacitor integrated, you can now run your app on web, Android, and iOS with the "Run On Web", "Run On Android", and "Run On iOS" options. |
36 | | - |
37 | | -## Doing More |
38 | | - |
39 | | -There is so much the Ionic VS Code extension can help with, including migrations, debugging, monorepo support, and more. For the full list of all of the extension's capabilities, checkout the [extension overview on the VS Code Marketplace](https://marketplace.visualstudio.com/items?itemName=ionic.ionic). |
| 10 | +The [WebNative Visual Studio Code extension](https://marketplace.visualstudio.com/items?itemName=webnative.webnative) is a community-maintained plugin that helps you perform common Capacitor development tasks without needing to remember CLI commands. |
| 11 | + |
| 12 | +If you have VS Code on this computer click Install below. You can also find the extension by searching for "WebNative". |
| 13 | + |
| 14 | +<a href="vscode:extension/webnative.webnative" target="_self"> |
| 15 | + <button |
| 16 | + style={{ |
| 17 | + color: 'var(--ifm-color-content-inverse)', |
| 18 | + cursor: 'pointer', |
| 19 | + fontWeight: 'bold', |
| 20 | + padding: 16, |
| 21 | + paddingLeft: 32, |
| 22 | + paddingRight: 32, |
| 23 | + border: 0, |
| 24 | + borderRadius: 100, |
| 25 | + backgroundColor: 'var(--ifm-font-color-base)', |
| 26 | + }} |
| 27 | + > |
| 28 | + Install |
| 29 | + </button> |
| 30 | +</a> |
| 31 | +<a href="https://webnative.dev/introduction/getting-started/" target="_self"> |
| 32 | + <button |
| 33 | + style={{ |
| 34 | + color: 'var(--ifm-font-color-base)', |
| 35 | + cursor: 'pointer', |
| 36 | + fontWeight: 'bold', |
| 37 | + padding: 16, |
| 38 | + paddingLeft: 32, |
| 39 | + paddingRight: 32, |
| 40 | + borderRadius: 100, |
| 41 | + backgroundColor: 'var(--c-admonition-info-bg)', |
| 42 | + }} |
| 43 | + > |
| 44 | + Docs |
| 45 | + </button> |
| 46 | +</a> |
| 47 | + |
| 48 | +## Additional Documentation |
| 49 | + |
| 50 | +Full documentation of the WebNative extension can be found at [webnative.dev](https://webnative.dev/introduction/getting-started/) covering topics like: |
| 51 | + |
| 52 | +- Building, debugging and running your Capacitor application. |
| 53 | +- Bundle analysis, dependency upgrades. |
| 54 | +- Migration from Cordova. |
| 55 | +- Changing native settings. |
| 56 | +- Splash Screens & Icons. |
| 57 | +- Developing without a Mac using the WebNative app. |
0 commit comments