Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit e14e61c

Browse files
initial release
0 parents commit e14e61c

File tree

9 files changed

+375
-0
lines changed

9 files changed

+375
-0
lines changed

‎.vscode/launch.json

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
// A launch configuration that launches the extension inside a new window
2+
// Use IntelliSense to learn about possible attributes.
3+
// Hover to view descriptions of existing attributes.
4+
// For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
5+
{
6+
"version": "0.2.0",
7+
"configurations": [
8+
{
9+
"name": "Extension",
10+
"type": "extensionHost",
11+
"request": "launch",
12+
"args": [
13+
"--extensionDevelopmentPath=${workspaceFolder}"
14+
]
15+
}
16+
]
17+
}

‎.vscodeignore

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
.vscode/**
2+
.vscode-test/**
3+
.gitignore
4+
vsc-extension-quickstart.md

‎CHANGELOG.md

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
# Change Log
2+
3+
All notable changes to the "bs4snippets" extension will be documented in this file.
4+
5+
Check [Keep a Changelog](http://keepachangelog.com/) for recommendations on how to structure this file.
6+
7+
## [Unreleased]
8+
9+
- Initial release

‎README.md

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
# Ionic Vue VSCode Snippets
2+
3+
This extension adds ionic-vue snippets. Quickly add ionic-vue component code by simply typing `iv`. The `iv` prefix will show a rage of snippets to choose from. For example, `ivlabel` will add the label component code, `ivlist` will show the ionic vue list component code.
4+
5+
## Supported components
6+
All snippets are sourced from [ionic website](https://ionicframework.com/docs/components).
7+
8+
- Badge
9+
- Button
10+
- Ripple
11+
- Card
12+
- Checkbox
13+
- Chip
14+
- Datetime
15+
- FAB
16+
- Grid
17+
- Icon
18+
- Input
19+
- Textarea
20+
- Item
21+
- Item Divider
22+
- Item Group
23+
- Label
24+
- List
25+
- List Header
26+
- Avatar
27+
- Image
28+
- Thumbnail
29+
- Menu
30+
31+
![Using extension](/example.gif)
32+
33+
## Known Issues
34+
35+
- To use snippets effectively you will have to mannually import each ionic component used in the snippet `import { componetName } from @ionic/vue`. We are working on solving this issue.
36+
37+
- Snippets only when added on the top level and not working when added inside a `template` or `div` tag. [See stackoverflow post](https://stackoverflow.com/questions/65297548/how-to-add-vs-code-snippet-inside-a-template)
38+
39+
## Release Notes
40+
41+
### 0.1.0
42+
43+
Initial release.

‎example.gif

829 KB
Loading[フレーム]

‎icon.jpg

19.3 KB
Loading[フレーム]

‎package.json

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
{
2+
"name": "ionicvuesnippets",
3+
"displayName": "Ionic-Vue Snippets",
4+
"description": "Ionic-Vue Snippets",
5+
"version": "0.1.0",
6+
"author": "Simo Mafuxwana",
7+
"publisher": "dlodeprojuicer",
8+
"repository": {
9+
"type": "git",
10+
"url": "https://github.com/dlodeprojuicer/vscode-ionic-vue"
11+
},
12+
"icon": "icon.jpg",
13+
"engines": {
14+
"vscode": "^1.52.0"
15+
},
16+
"categories": [
17+
"Snippets"
18+
],
19+
"contributes": {
20+
"snippets": [
21+
{
22+
"language": "html",
23+
"path": "./snippets/snippets.code-snippets"
24+
},
25+
{
26+
"language": "javascript",
27+
"path": "./snippets/snippets.code-snippets"
28+
},
29+
{
30+
"language": "vue",
31+
"path": "./snippets/snippets.code-snippets"
32+
}
33+
]
34+
}
35+
}

‎snippets/snippets.code-snippets

Lines changed: 244 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,244 @@
1+
{
2+
"ionic-vue Badge": {
3+
"prefix": "ivbadge",
4+
"body": [
5+
"<ion-badge>${1:99}</ion-badge>"
6+
],
7+
"description": "Creates ionc-vue badge"
8+
},
9+
"ionic-vue Button": {
10+
"prefix": "ivbutton",
11+
"body": [
12+
"<ion-button>${1:Click}</ion-button>"
13+
],
14+
"description": "Creates ionc-vue button"
15+
},
16+
"ionic-vue Ripple": {
17+
"prefix": "ivripple",
18+
"body": [
19+
"<div class=\"ion-activatable ripple-parent\">",
20+
"\t${1:A plain div with a bounded ripple effect}",
21+
"\t<ion-ripple-effect></ion-ripple-effect>",
22+
"</div>"
23+
],
24+
"description": "Creates ionc-vue ripple effect"
25+
},
26+
"ionic-vue Card": {
27+
"prefix": "ivcard",
28+
"body": [
29+
"<ion-card>",
30+
"\t<ion-card-header>",
31+
"\t\t<ion-card-subtitle>Card Subtitle</ion-card-subtitle>",
32+
"\t\t<ion-card-title>Card Title</ion-card-title>",
33+
"\t</ion-card-header>",
34+
"\t<ion-card-content>",
35+
"\t\tKeep close to Nature's heart... and break clear away, once in awhile,",
36+
"\t\tand climb a mountain or spend a week in the woods. Wash your spirit clean.",
37+
"\t</ion-card-content>",
38+
"</ion-card>",
39+
],
40+
"description": "Creates ionc-vue card"
41+
},
42+
"ionic-vue Checkbox": {
43+
"prefix": "ivcheckbox",
44+
"body": [
45+
"<ion-checkbox></ion-checkbox>"
46+
],
47+
"description": "Creates ionc-vue checkbox"
48+
},
49+
"ionic-vue Chip": {
50+
"prefix": "ivchip",
51+
"body": [
52+
"<ion-chip>",
53+
"\t<ion-label>Default</ion-label>",
54+
"</ion-chip>"
55+
],
56+
"description": "Creates ionc-vue chip"
57+
},
58+
"ionic-vue Datetime": {
59+
"prefix": "ivdatetime",
60+
"body": [
61+
"<ion-item>",
62+
"\t<ion-label>MMMM</ion-label>",
63+
"\t<ion-datetime display-format=\"MMMM\" value=\"2012年12月15日T13:47:20.789\"></ion-datetime>",
64+
"</ion-item>"
65+
],
66+
"description": "Creates ionc-vue datetime"
67+
},
68+
"ionic-vue FAB": {
69+
"prefix": "ivfab",
70+
"body": [
71+
"<ion-fab vertical=\"bottom\" horizontal=\"start\" slot=\"fixed\">",
72+
"\t<ion-fab-button>",
73+
"\t\t<ion-icon name=\"arrow-up-circle\"></ion-icon>",
74+
"\t</ion-fab-button>",
75+
"</ion-fab>"
76+
],
77+
"description": "Creates ionc-vue fab"
78+
},
79+
"ionic-vue Grid": {
80+
"prefix": "ivgrid",
81+
"body": [
82+
"<ion-grid>",
83+
"\t<ion-row>",
84+
"\t\t<ion-col>",
85+
"\t\t\tion-col",
86+
"\t</ion-col>",
87+
"\t\t<ion-col>",
88+
"\t\t\tion-col",
89+
"\t</ion-col>",
90+
"\t\t<ion-col>",
91+
"\t\t\tion-col",
92+
"\t</ion-col>",
93+
"\t\t<ion-col>",
94+
"\t\t\tion-col",
95+
"\t</ion-col>",
96+
"\t</ion-row>",
97+
"</ion-grid>"
98+
],
99+
"description": "Creates ionc-vue grid"
100+
},
101+
"ionic-vue Icon": {
102+
"prefix": "ivicon",
103+
"body": [
104+
"<ion-icon name=\"add-circle-outline\"></ion-icon>"
105+
],
106+
"description": "Creates ionc-vue icon"
107+
},
108+
"ionic-vue Input": {
109+
"prefix": "ivinput",
110+
"body": [
111+
"<ion-input></ion-input>"
112+
],
113+
"description": "Creates ionc-vue input"
114+
},
115+
"ionic-vue Textarea": {
116+
"prefix": "ivtextarea",
117+
"body": [
118+
"<ion-textarea></ion-textarea>"
119+
],
120+
"description": "Creates ionc-vue textarea"
121+
},
122+
"ionic-vue Item": {
123+
"prefix": "ivitem",
124+
"body": [
125+
"<ion-item>",
126+
"\t<ion-label>",
127+
"\t\t${1:Item}",
128+
"\t</ion-label>",
129+
"</ion-item>"
130+
],
131+
"description": "Creates ionc-vue item"
132+
},
133+
"ionic-vue Item Divider": {
134+
"prefix": "ivitemdivider",
135+
"body": [
136+
"<ion-item-divider>",
137+
"\t<ion-label>",
138+
"\t\t${1:Basic Item Divider}",
139+
"\t</ion-label>",
140+
"</ion-item-divider>"
141+
],
142+
"description": "Creates ionc-vue item divider"
143+
},
144+
"ionic-vue Item Group": {
145+
"prefix": "ivitemgroup",
146+
"body": [
147+
"<ion-item-group>",
148+
"\t<ion-item>",
149+
"\t\t<ion-label>Angola</ion-label>",
150+
"\t</ion-item>",
151+
"\t<ion-item>",
152+
"\t\t<ion-label>Argentina</ion-label>",
153+
"\t</ion-item>",
154+
"\t<ion-item>",
155+
"\t\t<ion-label>Armenia</ion-label>",
156+
"\t</ion-item>",
157+
"\t</ion-item-group>",
158+
],
159+
"description": "Creates ionc-vue item group"
160+
},
161+
"ionic-vue Label": {
162+
"prefix": "ivlabel",
163+
"body": [
164+
"<ion-label>Label</ion-label>"
165+
],
166+
"description": "Creates ionc-vue label"
167+
},
168+
"ionic-vue List": {
169+
"prefix": "ivlist",
170+
"body": [
171+
"<ion-list>",
172+
"\t<ion-item>",
173+
"\t\t<ion-label>Pokémon Yellow</ion-label>",
174+
"\t</ion-item>",
175+
"\t<ion-item>",
176+
"\t\t<ion-label>Mega Man X</ion-label>",
177+
"\t</ion-item>",
178+
"\t<ion-item>",
179+
"\t\t<ion-label>The Legend of Zelda</ion-label>",
180+
"\t</ion-item>",
181+
"\t<ion-item>",
182+
"\t\t<ion-label>Pac-Man</ion-label>",
183+
"\t</ion-item>",
184+
"</ion-list>"
185+
],
186+
"description": "Creates ionc-vue list"
187+
},
188+
"ionic-vue List Header": {
189+
"prefix": "ivlistheader",
190+
"body": [
191+
"<ion-list-header>",
192+
"\t<ion-label>List Header</ion-label>",
193+
"</ion-list-header>"
194+
],
195+
"description": "Creates ionc-vue list header"
196+
},
197+
"ionic-vue Avatar": {
198+
"prefix": "ivavatar",
199+
"body": [
200+
"<ion-avatar>",
201+
"\t<img src=\"https://gravatar.com/avatar/dba6bae8c566f9d4041fb9cd9ada7741?d=identicon&f=y\">",
202+
"</ion-avatar>"
203+
],
204+
"description": "Creates ionc-vue avatar"
205+
},
206+
"ionic-vue Image": {
207+
"prefix": "ivimage",
208+
"body": [
209+
"<ion-img :src=\"item.src\"></ion-img>",
210+
],
211+
"description": "Creates ionc-vue image"
212+
},
213+
"ionic-vue Thumbnail": {
214+
"prefix": "ivthumbnail",
215+
"body": [
216+
"<ion-thumbnail slot=\"start\">",
217+
"\t<img :src=\"item.src\"></img>",
218+
"</ion-thumbnail>",
219+
],
220+
"description": "Creates ionc-vue thumbnail"
221+
},
222+
"ionic-vue Menu": {
223+
"prefix": "ivmenu",
224+
"body": [
225+
"<ion-menu side=\"start\" menu-id=\"first\" content-id=\"main\">",
226+
"\t<ion-header>",
227+
"\t\t<ion-toolbar color=\"primary\">",
228+
"\t\t\t<ion-title>Start Menu</ion-title>",
229+
"\t\t</ion-toolbar>",
230+
"\t</ion-header>",
231+
"\t<ion-content>",
232+
"\t\t<ion-list>",
233+
"\t\t\t<ion-item>Menu Item</ion-item>",
234+
"\t\t\t<ion-item>Menu Item</ion-item>",
235+
"\t\t\t<ion-item>Menu Item</ion-item>",
236+
"\t\t\t<ion-item>Menu Item</ion-item>",
237+
"\t\t\t<ion-item>Menu Item</ion-item>",
238+
"\t\t</ion-list>",
239+
"\t</ion-content>",
240+
"</ion-menu>",
241+
],
242+
"description": "Creates ionc-vue menu"
243+
}
244+
}

‎vsc-extension-quickstart.md

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
# Welcome to your VS Code Extension
2+
3+
## What's in the folder
4+
5+
* This folder contains all of the files necessary for your extension.
6+
* `package.json` - this is the manifest file that defines the location of the snippet file and specifies the language of the snippets.
7+
* `snippets/snippets.json` - the file containing all snippets.
8+
9+
## Get up and running straight away
10+
11+
* Press `F5` to open a new window with your extension loaded.
12+
* Create a new file with a file name suffix matching your language.
13+
* Verify that your snippets are proposed on intellisense.
14+
15+
## Make changes
16+
17+
* You can relaunch the extension from the debug toolbar after making changes to the files listed above.
18+
* You can also reload (`Ctrl+R` or `Cmd+R` on Mac) the VS Code window with your extension to load your changes.
19+
20+
## Install your extension
21+
22+
* To start using your extension with Visual Studio Code copy it into the `<user home>/.vscode/extensions` folder and restart Code.
23+
* To share your extension with the world, read on https://code.visualstudio.com/docs about publishing an extension.

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /