Skip to content

Commit 9e538bd

Browse files
jedwards1211jedwards1211
committed
feat: add editor commands to insert snippets
1 parent d9c7635 commit 9e538bd

File tree

5 files changed

+538
-101
lines changed

5 files changed

+538
-101
lines changed

‎README.md‎

Lines changed: 11 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -7,9 +7,17 @@
77
[![Commitizen friendly](https://img.shields.io/badge/commitizen-friendly-brightgreen.svg)](http://commitizen.github.io/cz-cli/)
88
[![Visual Studio Marketplace Version](https://img.shields.io/visual-studio-marketplace/v/vscodeshift.material-ui-snippets)](https://marketplace.visualstudio.com/items?itemName=vscodeshift.material-ui-snippets)
99

10-
**Note:** To insert these, you have to **Trigger Suggest** (<kbd>⌃</kbd><kbd>Space</kbd> on macOS) and then type in the name; or you can
11-
enable the **Editor: Tab Completion** setting, then type the name of the
12-
snippet and press <kbd>Tab</kbd>.
10+
**Note:** There are two ways to insert these:
11+
12+
- **Trigger Suggest** (<kbd>⌃</kbd><kbd>Space</kbd> on macOS) and then type in the name; or you can
13+
enable the **Editor: Tab Completion** setting, then type the name of the
14+
snippet and press <kbd>Tab</kbd>.
15+
- Execute the corresponding **editor commands** like `Material-UI: insert <Button>` (or even better, make keybindings for them!).
16+
17+
**Performance Warning:** Currently, the suggestions can cause performance issues due to VSCode API limitations.
18+
After the API is improved in an upcoming release I can fix these performance issues. Until then, the workaround
19+
is to either disable adding automatic imports for snippets (**Settings &gt; Extensions &gt; Material-UI Snippets &gt; Add Completion Imports**)
20+
or use the commands to insert snippets instead of suggestions.
1321

1422
# Features
1523

‎package.json‎

Lines changed: 317 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -59,6 +59,323 @@
5959
}
6060
}
6161
}
62+
],
63+
"commands": [
64+
{
65+
"command": "extension.muiAppBar",
66+
"title": "Insert <AppBar>",
67+
"category": "Material-UI Snippets"
68+
},
69+
{
70+
"command": "extension.muiAppBarMenu",
71+
"title": "Insert <AppBar> with menu icon",
72+
"category": "Material-UI Snippets"
73+
},
74+
{
75+
"command": "extension.muiBottomNavigation",
76+
"title": "Insert <BottomNavigation>",
77+
"category": "Material-UI Snippets"
78+
},
79+
{
80+
"command": "extension.muiBottomNavigationAction",
81+
"title": "Insert <BottomNavigationAction>",
82+
"category": "Material-UI Snippets"
83+
},
84+
{
85+
"command": "extension.muiButton",
86+
"title": "Insert <Button>",
87+
"category": "Material-UI Snippets"
88+
},
89+
{
90+
"command": "extension.muiButtonGroup",
91+
"title": "Insert <ButtonGroup>",
92+
"category": "Material-UI Snippets"
93+
},
94+
{
95+
"command": "extension.muiButtonGroupSize",
96+
"title": "Insert <ButtonGroup> with size",
97+
"category": "Material-UI Snippets"
98+
},
99+
{
100+
"command": "extension.muiButtonGroupVertical",
101+
"title": "Insert vertical <ButtonGroup>",
102+
"category": "Material-UI Snippets"
103+
},
104+
{
105+
"command": "extension.muiButtonSize",
106+
"title": "Insert <Button> with size",
107+
"category": "Material-UI Snippets"
108+
},
109+
{
110+
"command": "extension.muiButtonText",
111+
"title": "Insert text <Button>",
112+
"category": "Material-UI Snippets"
113+
},
114+
{
115+
"command": "extension.muiButtonWithIcon",
116+
"title": "Insert <Button> with icon and label",
117+
"category": "Material-UI Snippets"
118+
},
119+
{
120+
"command": "extension.muiCardHeader",
121+
"title": "Insert <CardHeader>",
122+
"category": "Material-UI Snippets"
123+
},
124+
{
125+
"command": "extension.muiCardMedia",
126+
"title": "Insert <CardMedia>",
127+
"category": "Material-UI Snippets"
128+
},
129+
{
130+
"command": "extension.muiCheckboxLabel",
131+
"title": "Insert <Checkbox> with <FormControlLabel>",
132+
"category": "Material-UI Snippets"
133+
},
134+
{
135+
"command": "extension.muiCheckboxLabelPlacement",
136+
"title": "Insert <Checkbox> with labelPlacement",
137+
"category": "Material-UI Snippets"
138+
},
139+
{
140+
"command": "extension.muiContainer",
141+
"title": "Insert <Container>",
142+
"category": "Material-UI Snippets"
143+
},
144+
{
145+
"command": "extension.muiDialog",
146+
"title": "Insert <Dialog>",
147+
"category": "Material-UI Snippets"
148+
},
149+
{
150+
"command": "extension.muiDialogSimple",
151+
"title": "Insert <Dialog>",
152+
"category": "Material-UI Snippets"
153+
},
154+
{
155+
"command": "extension.muiDrawerPermanent",
156+
"title": "Insert permanent <Drawer>",
157+
"category": "Material-UI Snippets"
158+
},
159+
{
160+
"command": "extension.muiDrawerPersistent",
161+
"title": "Insert persistent <Drawer>",
162+
"category": "Material-UI Snippets"
163+
},
164+
{
165+
"command": "extension.muiDrawerTemporary",
166+
"title": "Insert temporary <Drawer>",
167+
"category": "Material-UI Snippets"
168+
},
169+
{
170+
"command": "extension.muiEndAdornment",
171+
"title": "Insert end <InputAdornment>",
172+
"category": "Material-UI Snippets"
173+
},
174+
{
175+
"command": "extension.muiExpansionPanel",
176+
"title": "Insert <ExpansionPanel>",
177+
"category": "Material-UI Snippets"
178+
},
179+
{
180+
"command": "extension.muiExpansionPanelControlled",
181+
"title": "Insert controlled <ExpansionPanel>",
182+
"category": "Material-UI Snippets"
183+
},
184+
{
185+
"command": "extension.muiFab",
186+
"title": "Insert <Fab>",
187+
"category": "Material-UI Snippets"
188+
},
189+
{
190+
"command": "extension.muiFabExtended",
191+
"title": "Insert <Fab variant=\"extended\">",
192+
"category": "Material-UI Snippets"
193+
},
194+
{
195+
"command": "extension.muiFormControl",
196+
"title": "Insert <FormControl>",
197+
"category": "Material-UI Snippets"
198+
},
199+
{
200+
"command": "extension.muiFormControlGroup",
201+
"title": "Insert <FormControl> with <FormGroup>",
202+
"category": "Material-UI Snippets"
203+
},
204+
{
205+
"command": "extension.muiGridContainer",
206+
"title": "Insert <Grid container>",
207+
"category": "Material-UI Snippets"
208+
},
209+
{
210+
"command": "extension.muiGridContainerCenter",
211+
"title": "Insert <Grid container> with centering",
212+
"category": "Material-UI Snippets"
213+
},
214+
{
215+
"command": "extension.muiGridContainerFull",
216+
"title": "Insert <Grid container> with all props",
217+
"category": "Material-UI Snippets"
218+
},
219+
{
220+
"command": "extension.muiGridListSubheader",
221+
"title": "Insert <GridList> subheader",
222+
"category": "Material-UI Snippets"
223+
},
224+
{
225+
"command": "extension.muiGridListTilebar",
226+
"title": "Insert <GridListTileBar>",
227+
"category": "Material-UI Snippets"
228+
},
229+
{
230+
"command": "extension.muiIconButton",
231+
"title": "Insert <IconButton>",
232+
"category": "Material-UI Snippets"
233+
},
234+
{
235+
"command": "extension.muiMenu",
236+
"title": "Insert <Menu>",
237+
"category": "Material-UI Snippets"
238+
},
239+
{
240+
"command": "extension.muiMenuItem",
241+
"title": "Insert <MenuItem>",
242+
"category": "Material-UI Snippets"
243+
},
244+
{
245+
"command": "extension.muiMenuPopupState",
246+
"title": "Insert <Menu> for material-ui-popup-state",
247+
"category": "Material-UI Snippets"
248+
},
249+
{
250+
"command": "extension.muiRadioGroup",
251+
"title": "Insert <FormControl> with <RadioGroup>",
252+
"category": "Material-UI Snippets"
253+
},
254+
{
255+
"command": "extension.muiRadioLabel",
256+
"title": "Insert <Radio> with <FormControlLabel>",
257+
"category": "Material-UI Snippets"
258+
},
259+
{
260+
"command": "extension.muiRadioLabelPlacement",
261+
"title": "Insert <Radio> with <FormControlLabel> with labelPlacement",
262+
"category": "Material-UI Snippets"
263+
},
264+
{
265+
"command": "extension.muiSelectItem",
266+
"title": "Insert <MenuItem> inside <Select>",
267+
"category": "Material-UI Snippets"
268+
},
269+
{
270+
"command": "extension.muiSliderContinuous",
271+
"title": "Insert <Slider> with continuous values",
272+
"category": "Material-UI Snippets"
273+
},
274+
{
275+
"command": "extension.muiSliderDiscrete",
276+
"title": "Insert <Slider> with discrete values",
277+
"category": "Material-UI Snippets"
278+
},
279+
{
280+
"command": "extension.muiSnackbar",
281+
"title": "Insert <Snackbar>",
282+
"category": "Material-UI Snippets"
283+
},
284+
{
285+
"command": "extension.muiSnackbarContent",
286+
"title": "Insert <SnackbarContent>",
287+
"category": "Material-UI Snippets"
288+
},
289+
{
290+
"command": "extension.muiStartAdornment",
291+
"title": "Insert start <InputAdornment>",
292+
"category": "Material-UI Snippets"
293+
},
294+
{
295+
"command": "extension.muiStep",
296+
"title": "Insert <Step>",
297+
"category": "Material-UI Snippets"
298+
},
299+
{
300+
"command": "extension.muiStepContent",
301+
"title": "Insert <Step> with <StepContent>",
302+
"category": "Material-UI Snippets"
303+
},
304+
{
305+
"command": "extension.muiStepOptional",
306+
"title": "Insert optional <Step>",
307+
"category": "Material-UI Snippets"
308+
},
309+
{
310+
"command": "extension.muiStepper",
311+
"title": "Insert <Stepper>",
312+
"category": "Material-UI Snippets"
313+
},
314+
{
315+
"command": "extension.muiSwipeableViews",
316+
"title": "Insert <SwipeableViews>",
317+
"category": "Material-UI Snippets"
318+
},
319+
{
320+
"command": "extension.muiSwitch",
321+
"title": "Insert <Switch>",
322+
"category": "Material-UI Snippets"
323+
},
324+
{
325+
"command": "extension.muiSwitchLabel",
326+
"title": "Insert <Switch> with <FormControlLabel>",
327+
"category": "Material-UI Snippets"
328+
},
329+
{
330+
"command": "extension.muiSwitchLabelPlacement",
331+
"title": "Insert <Switch> with <FormControlLabel> with labelPlacement",
332+
"category": "Material-UI Snippets"
333+
},
334+
{
335+
"command": "extension.muiTabPanel",
336+
"title": "Insert <TabPanel>",
337+
"category": "Material-UI Snippets"
338+
},
339+
{
340+
"command": "extension.muiTabs",
341+
"title": "Insert <Tabs>",
342+
"category": "Material-UI Snippets"
343+
},
344+
{
345+
"command": "extension.muiTabsScrollable",
346+
"title": "Insert scrollable <Tabs>",
347+
"category": "Material-UI Snippets"
348+
},
349+
{
350+
"command": "extension.muiTextField",
351+
"title": "Insert <TextField>",
352+
"category": "Material-UI Snippets"
353+
},
354+
{
355+
"command": "extension.muiTextFieldMore",
356+
"title": "Insert <TextField> with more props",
357+
"category": "Material-UI Snippets"
358+
},
359+
{
360+
"command": "extension.muiTextFieldSelect",
361+
"title": "Insert <TextField select>",
362+
"category": "Material-UI Snippets"
363+
},
364+
{
365+
"command": "extension.muiTextFieldVariant",
366+
"title": "Insert <TextField> with variant",
367+
"category": "Material-UI Snippets"
368+
},
369+
{
370+
"command": "extension.muiTooltip",
371+
"title": "Insert <Tooltip>",
372+
"category": "Material-UI Snippets"
373+
},
374+
{
375+
"command": "extension.muiTypography",
376+
"title": "Insert <Typography>",
377+
"category": "Material-UI Snippets"
378+
}
62379
]
63380
},
64381
"categories": [

‎scripts/buildReadme.ts‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,8 @@ fs.mkdirsSync(out)
1414
const toc: Array<string> = []
1515
const markdown: Array<string> = []
1616

17+
const commands: Array<Object> = []
18+
1719
const headingUrl = (heading: string): string =>
1820
'#' +
1921
heading
@@ -25,6 +27,14 @@ const headingUrl = (heading: string): string =>
2527

2628
for (const snippet of Object.values(snippets)) {
2729
const { prefix } = snippet
30+
31+
commands.push({
32+
command: `extension.${prefix}`,
33+
title:
34+
'Insert ' + snippet.description.replace(/^\s*Material[ -]UI\s*/i, ''),
35+
category: 'Material-UI Snippets',
36+
})
37+
2838
const description = markdownEscape(
2939
snippet.description.replace(/^\s*Material[ -]UI\s*/i, '')
3040
)
@@ -73,6 +83,12 @@ for (const snippet of Object.values(snippets)) {
7383
}
7484
}
7585

86+
const packageJsonPath = path.join(root, 'package.json')
87+
const packageJson = fs.readJsonSync(packageJsonPath)
88+
packageJson.contributes.commands = commands
89+
fs.writeJsonSync(packageJsonPath, packageJson, { spaces: 2 })
90+
console.log('package.json') // eslint-disable-line no-console
91+
7692
const readmePath = path.join(root, 'README.md')
7793

7894
const oldReadme = fs.readFileSync(readmePath, 'utf8')

0 commit comments

Comments
 (0)