Skip to content

docs(vscode): update VS Code Extension page to reflect the deprecation of the previous version #4207

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 13 commits into
base: main
Choose a base branch
from
Open
165 changes: 83 additions & 82 deletions cspell-wordlist.txt
Original file line number Diff line number Diff line change
@@ -1,82 +1,83 @@
Appflow
Codepen
Firestore
Genymotion
Hygen
Ionicon
Ionicons
Logcat
Maskito
Pluralsight
Swiper
Udemy
Vetur
Wistia
WCAG

actionsheet
fabs
datetime
datetimes
datetimepicker
infinitescroll
searchbar
searchbars
sidemenu
textarea
textareas

appstore
authed
autogrow
automations
autoplay
Callout
comparewith
composables
engageable
flexbox
frontmatter
fullscreen
geolocation
interactives
isopen
jank
janky
jarsigner
jsdelivr
keyframes
keytool
lifecycles
localstorage
mobileweb
phablet
playstore
preconfigured
preflighted
proxying
quickstart
retargeted
runtimes
scroller
subcomponent
subcomponents
swipeable
templating
transpiling
treeshaking
triaging
typeahead
unminified
unsanitized
viewports
webapps
webviews
xlarge
xsmall

allowtransparency
mozallowfullscreen
msallowfullscreen
oallowfullscreen
webkitallowfullscreen
Appflow
Codepen
Firestore
Genymotion
Hygen
Ionicon
Ionicons
Logcat
Maskito
Pluralsight
Swiper
Udemy
Vetur
Wistia
WCAG

actionsheet
fabs
datetime
datetimes
datetimepicker
infinitescroll
searchbar
searchbars
sidemenu
textarea
textareas

appstore
authed
autogrow
automations
autoplay
Callout
comparewith
composables
engageable
flexbox
frontmatter
fullscreen
geolocation
interactives
isopen
jank
janky
jarsigner
jsdelivr
keyframes
keytool
lifecycles
localstorage
mobileweb
phablet
playstore
preconfigured
preflighted
proxying
quickstart
retargeted
runtimes
scroller
subcomponent
subcomponents
swipeable
templating
transpiling
treeshaking
triaging
typeahead
unminified
unsanitized
viewports
webapps
webviews
xlarge
xsmall

allowtransparency
mozallowfullscreen
msallowfullscreen
oallowfullscreen
webkitallowfullscreen
webnative
2 changes: 1 addition & 1 deletion docs/core-concepts/webview.md
Original file line number Diff line number Diff line change
Expand Up @@ -42,7 +42,7 @@ import { Capacitor } from '@capacitor/core';
Capacitor.convertFileSrc(filePath);
```

For Cordova apps, the [Ionic Web View plugin](https://github.com/ionic-team/cordova-plugin-ionic-webview) provides a utility function for converting File URIs: `window.Ionic.WebView.convertFileSrc()`. There is also a corresponding Ionic Native plugin: [`@awesome-cordova-plugins/ionic-webview`](../native/ionic-webview.md).
For Cordova apps, the [Ionic Web View plugin](https://github.com/ionic-team/cordova-plugin-ionic-webview) provides a utility function for converting File URIs: `window.Ionic.WebView.convertFileSrc()`. There is also a corresponding Ionic Native plugin: [`@awesome-cordova-plugins/ionic-webview`](https://danielsogl.gitbook.io/awesome-cordova-plugins/ionic-webview).

### Implementations

Expand Down
47 changes: 19 additions & 28 deletions docs/intro/vscode-extension.md
Original file line number Diff line number Diff line change
@@ -1,39 +1,30 @@
---
title: Ionic VS Code Extension
title: VS Code Extension
---

<head>
<title>Using the Ionic Visual Studio Code Extension</title>
<meta
name="description"
content="The Ionic Visual Studio Code extension helps you perform various functions that are common to developing an Ionic app"
/>
<title>VS Code Extension</title>
<meta name="description" content="Using the Ionic/Ionic-Framework VS Code Extension" />
</head>

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.
The [WebNative Visual Studio Code extension](https://marketplace.visualstudio.com/items?itemName=webnative.webnative) is a community-maintained plugin that helps you perform common Ionic Framework development tasks without needing to remember CLI commands.

## Create a New Project
If you have VS Code on this computer click Install below. You can also find the extension by searching for "WebNative".

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.
<a href="vscode:extension/webnative.webnative" target="_self">
<button className="install-button">Install</button>
</a>
<a href="https://webnative.dev/introduction/getting-started/" target="_self">
<button className="docs-button">Docs</button>
</a>

<img
src="https://user-images.githubusercontent.com/84595830/159510276-6766a5b8-132d-4284-a3fa-cd6374d64891.gif"
alt="Video of creating a project"
/>
## Additional Documentation

With the new project created, the extension will provide access to all of the common tasks in your `package.json`.
Full documentation of the WebNative extension can be found at [webnative.dev](https://webnative.dev/introduction/getting-started/) covering topics like:

## Adding Capacitor

You can also add [Capacitor](https://capacitorjs.com/) to your application by choosing "Integrate Capacitor".

<img
src="https://user-images.githubusercontent.com/84595830/159510570-b5a151bb-2e17-42c8-8cab-bffbaa849576.gif"
alt="Video of adding Capacitor"
/>

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.

## Doing More

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).
- Building, debugging and running your Capacitor application.
- Bundle analysis, dependency upgrades.
- Migration from Cordova.
- Changing native settings.
- Splash Screens & Icons.
- Developing without a Mac using the WebNative app.
7 changes: 4 additions & 3 deletions scripts/release-notes.mjs
Original file line number Diff line number Diff line change
@@ -1,12 +1,13 @@
import pkg from 'fs-extra';
import fetch from 'node-fetch';
import { resolve } from 'path';
import { resolve, dirname } from 'path';
import { compare } from 'semver';
import { URL } from 'url';
import { URL, fileURLToPath } from 'url';

import { renderMarkdown } from './utils.mjs';

const __dirname = new URL('.', import.meta.url).pathname;
const __filename = fileURLToPath(import.meta.url);
const __dirname = dirname(__filename);
const OUTPUT_PATH = resolve(__dirname, '../src/components/page/reference/ReleaseNotes/release-notes.json');

// export default {
Expand Down
25 changes: 24 additions & 1 deletion src/styles/custom.scss
Original file line number Diff line number Diff line change
Expand Up @@ -35,7 +35,7 @@
'Segoe UI emoji';
--ifm-font-family-monospace: 'SFMono-Regular', 'Roboto Mono', Consolas, 'Liberation Mono', Menlo, Courier, monospace;

--ifm-menu-link-sublist-icon: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAiIGhlaWdodD0iNiIgdmlld0JveD0iMCAwIDEwIDYiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGQ9Ik04Ljk5OTg4IDVMNC45OTk4OCAxTDAuOTk5ODc4IDUiIHN0cm9rZT0iIzAzMDYwQiIgc3Ryb2tlLXdpZHRoPSIxLjUiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPgo8L3N2Zz4K');
--ifm-menu-link-sublist-icon: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAiIGhlaWdodD0iNiIgdmlld0JveD0iMCAwIDEwIDYiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGQ9Ik08Ljk5OTg4IDVMNC45OTk4OCAxTDAuOTk5ODc4IDUiIHN0cm9rZT0iIzAzMDYwQiIgc3Ryb2tlLXdpZHRoPSIxLjUiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPgo8L3N2Zz4K');

//#region ----------- Z Indices ------------
--z-sidebar: 2000;
Expand Down Expand Up @@ -225,3 +225,26 @@ iframe {
}
}
}

.install-button {
color: var(--admonition-info-c-bg);
cursor: pointer;
font-weight: bold;
padding: 16px;
padding-left: 32px;
padding-right: 32px;
border: 0;
border-radius: 100px;
background-color: var(--ifm-font-color-base);
}

.docs-button {
color: var(--ifm-font-color-base);
cursor: pointer;
font-weight: bold;
padding: 16px;
padding-left: 32px;
padding-right: 32px;
border-radius: 100px;
background-color: var(--admonition-info-c-bg);
}
3 changes: 2 additions & 1 deletion versioned_docs/version-v5/native/ionic-webview.md
Original file line number Diff line number Diff line change
Expand Up @@ -53,8 +53,9 @@ Requires the Cordova plugin: `cordova-plugin-ionic-webview` > 2.0. For more info
</TabItem>
<TabItem value="Cordova">
<CodeBlock className="language-shell">
$ ionic cordova plugin add cordova-plugin-ionic-webview {'\n'}$ npm install @awesome-cordova-plugins/ionic-webview{' '}
$ ionic cordova plugin add cordova-plugin-ionic-webview {'\n'}$ npm install @awesome-cordova-plugins/ionic-webview
{'\n'}
# For more information, visit: [Awesome Cordova Plugins - Ionic WebView](https://danielsogl.gitbook.io/awesome-cordova-plugins/ionic-webview)
</CodeBlock>
</TabItem>
<TabItem value="Enterprise">
Expand Down
2 changes: 1 addition & 1 deletion versioned_docs/version-v6/core-concepts/webview.md
Original file line number Diff line number Diff line change
Expand Up @@ -42,7 +42,7 @@ import { Capacitor } from '@capacitor/core';
Capacitor.convertFileSrc(filePath);
```

For Cordova apps, the [Ionic Web View plugin](https://github.com/ionic-team/cordova-plugin-ionic-webview) provides a utility function for converting File URIs: `window.Ionic.WebView.convertFileSrc()`. There is also a corresponding Ionic Native plugin: [`@awesome-cordova-plugins/ionic-webview`](../native/ionic-webview.md).
For Cordova apps, the [Ionic Web View plugin](https://github.com/ionic-team/cordova-plugin-ionic-webview) provides a utility function for converting File URIs: `window.Ionic.WebView.convertFileSrc()`. There is also a corresponding Ionic Native plugin: [`@awesome-cordova-plugins/ionic-webview`](https://danielsogl.gitbook.io/awesome-cordova-plugins/ionic-webview).

### Implementations

Expand Down
2 changes: 1 addition & 1 deletion versioned_docs/version-v7/core-concepts/webview.md
Original file line number Diff line number Diff line change
Expand Up @@ -42,7 +42,7 @@ import { Capacitor } from '@capacitor/core';
Capacitor.convertFileSrc(filePath);
```

For Cordova apps, the [Ionic Web View plugin](https://github.com/ionic-team/cordova-plugin-ionic-webview) provides a utility function for converting File URIs: `window.Ionic.WebView.convertFileSrc()`. There is also a corresponding Ionic Native plugin: [`@awesome-cordova-plugins/ionic-webview`](../native/ionic-webview.md).
For Cordova apps, the [Ionic Web View plugin](https://github.com/ionic-team/cordova-plugin-ionic-webview) provides a utility function for converting File URIs: `window.Ionic.WebView.convertFileSrc()`. There is also a corresponding Ionic Native plugin: [`@awesome-cordova-plugins/ionic-webview`](https://danielsogl.gitbook.io/awesome-cordova-plugins/ionic-webview).

### Implementations

Expand Down
Loading