-
Notifications
You must be signed in to change notification settings - Fork 3.2k
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
docs(vscode): update VS Code Extension page to reflect the deprecation of the previous version #4207
Changes from all commits
53b3503
c9f4b98
4d42fcf
dd45aac
7e29f79
5150b3b
f94208c
1c33ded
581b375
2d3ece4
d88a84c
434cb99
27cfda5
9eaadcf
bcd6ce3
57bd722
bde9d0f
e6c06a9
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
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 |
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"> | ||||||||||||||||||
gnbm marked this conversation as resolved.
Show resolved
Hide resolved
|
||||||||||||||||||
<button className="install-button">Install</button> | ||||||||||||||||||
</a> | ||||||||||||||||||
There was a problem hiding this comment. Choose a reason for hiding this commentThe 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
Copilot uses AI. Check for mistakes. Positive FeedbackNegative Feedback |
||||||||||||||||||
<a href="https://webnative.dev/introduction/getting-started/" target="_self"> | ||||||||||||||||||
Comment on lines
+14
to
+17
There was a problem hiding this comment. Choose a reason for hiding this commentThe 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
Copilot uses AI. Check for mistakes. Positive FeedbackNegative Feedback |
||||||||||||||||||
<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. |
Uh oh!
There was an error while loading. Please reload this page.