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.

Sign up for GitHub

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

Merged
merged 18 commits into from
Jul 23, 2025
Merged

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
18 commits
Select commit Hold shift + click to select a range
53b3503
Fixed broken link to @awesome-cordova-plugins/ionic-webview
gnbm Jul 21, 2025
c9f4b98
Added support to run release notes using Windows
gnbm Jul 21, 2025
4d42fcf
Update cspell-wordlist.txt
gnbm Jul 21, 2025
dd45aac
Update vscode-extension.md
gnbm Jul 21, 2025
7e29f79
Fix buttons height
gnbm Jul 22, 2025
5150b3b
Update vscode-extension.md
gnbm Jul 22, 2025
f94208c
Update docs/intro/vscode-extension.md
gnbm Jul 22, 2025
1c33ded
Merge branch 'gm-change-vs-extension' of https://github.com/ionic-tea…
gnbm Jul 22, 2025
581b375
Added custom styling
gnbm Jul 22, 2025
2d3ece4
Update versioned_docs/version-v5/native/ionic-webview.md
gnbm Jul 22, 2025
d88a84c
Update src/styles/custom.scss
gnbm Jul 22, 2025
434cb99
Update docs/intro/vscode-extension.md
gnbm Jul 22, 2025
27cfda5
Update vscode-extension.md
gnbm Jul 22, 2025
9eaadcf
Update custom.scss
gnbm Jul 23, 2025
bcd6ce3
Update vscode-extension.md
gnbm Jul 23, 2025
57bd722
Fix styles broken and semantics
gnbm Jul 23, 2025
bde9d0f
Merge branch 'main' into gm-change-vs-extension
gnbm Jul 23, 2025
e6c06a9
Update src/styles/custom.scss
gnbm Jul 23, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
165 changes: 83 additions & 82 deletions cspell-wordlist.txt
View file
Open in desktop
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
View file
Open in desktop
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
View file
Open in desktop
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>
Copy link

Copilot AI Jul 23, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The vscode: protocol link may not work reliably across all browsers and environments. Consider adding fallback text or instructions for manual installation from the VS Code marketplace.

Suggested change
</a>
</a>
<p>If the "Install" button does not work, you can manually install the extension by opening VS Code, navigating to the Extensions view (<kbd>Ctrl</kbd>+<kbd>Shift</kbd>+<kbd>X</kbd>), and searching for "WebNative".</p>

Copilot uses AI. Check for mistakes.
<a href="https://webnative.dev/introduction/getting-started/" target="_self">
Comment on lines +14 to +17
Copy link

Copilot AI Jul 23, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

[nitpick] Using target="_self" is redundant as it's the default behavior for links. Consider removing it or using target="_blank" if you want the documentation to open in a new tab.

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

Copilot uses AI. Check for mistakes.
<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 Ionic Framework 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
View file
Open in desktop
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
26 changes: 26 additions & 0 deletions src/styles/custom.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -61,6 +61,7 @@ html[data-theme='light'] {

--ifm-code-background: var(--c-indigo-10);
--ifm-font-color-base: var(--c-carbon-90);
--ifm-info-color-bg: var(--c-carbon-90);
}

html[data-theme='dark'] {
Expand All @@ -82,6 +83,7 @@ html[data-theme='dark'] {
--ifm-font-color-base: var(--c-carbon-10);
--ifm-background-color: var(--token-primary-bg-c);
--ifm-dropdown-background-color: var(--token-secondary-bg-c);
--ifm-info-color-bg: var(--c-carbon-10);

--ifm-menu-link-sublist-icon-filter: invert(100%);
}
Expand Down Expand Up @@ -225,3 +227,27 @@ iframe {
}
}
}

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

.docs-button {
background-color: transparent;
border: 2px solid var(--ifm-font-color-base);
border-radius: 100px;
color: var(--ifm-font-color-base);
cursor: pointer;
font-weight: bold;
padding: 16px;
padding-left: 32px;
padding-right: 32px;
}
3 changes: 2 additions & 1 deletion versioned_docs/version-v5/native/ionic-webview.md
View file
Open in desktop
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
View file
Open in desktop
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
View file
Open in desktop
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