├── .babelrc.js ├── .circleci └── config.yml ├── .eslintrc ├── .gitignore ├── .vscode ├── extensions.json ├── launch.json ├── settings.json ├── snippets.code-snippets └── tasks.json ├── .vscodeignore ├── LICENSE.md ├── README.md ├── docs └── snippet.gif ├── icon.png ├── package-lock.json ├── package.json ├── scripts └── buildReadme.ts ├── src ├── createSnippet.tsx ├── extension.ts ├── getExistingImports.ts ├── once.ts ├── snippets │ ├── index.ts │ ├── muiAppBar.tsx │ ├── muiAppBarMenu.tsx │ ├── muiBottomNavigation.tsx │ ├── muiBottomNavigationAction.tsx │ ├── muiButton.tsx │ ├── muiButtonGroup.tsx │ ├── muiButtonGroupSize.tsx │ ├── muiButtonGroupVertical.tsx │ ├── muiButtonSize.tsx │ ├── muiButtonText.tsx │ ├── muiButtonWithIcon.tsx │ ├── muiCardHeader.tsx │ ├── muiCardMedia.tsx │ ├── muiCheckboxLabel.tsx │ ├── muiCheckboxLabelPlacement.tsx │ ├── muiContainer.tsx │ ├── muiDialog.tsx │ ├── muiDialogSimple.tsx │ ├── muiDrawerPermanent.tsx │ ├── muiDrawerPersistent.tsx │ ├── muiDrawerTemporary.tsx │ ├── muiEndAdornment.tsx │ ├── muiExpansionPanel.tsx │ ├── muiExpansionPanelControlled.tsx │ ├── muiFab.tsx │ ├── muiFabExtended.tsx │ ├── muiFormControl.tsx │ ├── muiFormControlGroup.tsx │ ├── muiGridContainer.tsx │ ├── muiGridContainerCenter.tsx │ ├── muiGridContainerFull.tsx │ ├── muiGridListSubheader.tsx │ ├── muiGridListTilebar.tsx │ ├── muiIconButton.tsx │ ├── muiMenu.tsx │ ├── muiMenuItem.tsx │ ├── muiMenuPopupState.tsx │ ├── muiRadioGroup.tsx │ ├── muiRadioLabel.tsx │ ├── muiRadioLabelPlacement.tsx │ ├── muiSelectItem.tsx │ ├── muiSliderContinuous.tsx │ ├── muiSliderDiscrete.tsx │ ├── muiSnackbar.tsx │ ├── muiSnackbarContent.tsx │ ├── muiStartAdornment.tsx │ ├── muiStep.tsx │ ├── muiStepContent.tsx │ ├── muiStepOptional.tsx │ ├── muiStepper.tsx │ ├── muiSwipeableViews.tsx │ ├── muiSwitch.tsx │ ├── muiSwitchLabel.tsx │ ├── muiSwitchLabelPlacement.tsx │ ├── muiTabPanel.tsx │ ├── muiTabs.tsx │ ├── muiTabsScrollable.tsx │ ├── muiTextField.tsx │ ├── muiTextFieldMore.tsx │ ├── muiTextFieldSelect.tsx │ ├── muiTextFieldVariant.tsx │ ├── muiTooltip.tsx │ └── muiTypography.tsx └── test │ ├── .eslintrc │ ├── runTest.ts │ └── suite │ ├── .eslintrc │ ├── extension.test.ts │ └── index.ts ├── tsconfig.json └── typings ├── markdown-escape └── index.d.ts ├── nyc └── index.d.ts └── require-glob └── index.d.ts /.babelrc.js: -------------------------------------------------------------------------------- 1 | module.exports = function (api) { 2 | const plugins = ['@babel/plugin-transform-runtime'] 3 | const presets = [ 4 | ['@babel/preset-env', { targets: { node: 10 } }], 5 | '@babel/preset-react', 6 | '@babel/preset-typescript', 7 | ] 8 | 9 | if (api.env('coverage')) { 10 | plugins.push('babel-plugin-istanbul') 11 | } 12 | 13 | return { plugins, presets } 14 | } 15 | -------------------------------------------------------------------------------- /.circleci/config.yml: -------------------------------------------------------------------------------- 1 | version: 2 2 | jobs: 3 | build: 4 | docker: 5 | - image: circleci/node:12.16-browsers 6 | 7 | steps: 8 | - checkout 9 | - run: 10 | name: Setup NPM Token 11 | command: | 12 | yarn config set registry "https://registry.npmjs.org/" 13 | echo "//registry.npmjs.org/:_authToken=$NPM_TOKEN" > .npmrc 14 | echo "registry=https://registry.npmjs.org/" >> .npmrc 15 | - run: 16 | name: Install Dependencies 17 | command: yarn install --frozen-lockfile 18 | - run: 19 | name: build 20 | command: yarn vscode:prepublish 21 | - run: 22 | name: upload test coverage 23 | command: yarn codecov || true 24 | - run: 25 | name: release 26 | command: yarn run semantic-release 27 | -------------------------------------------------------------------------------- /.eslintrc: -------------------------------------------------------------------------------- 1 | { 2 | "extends": [ 3 | "@jedwards1211/eslint-config-typescript", 4 | "@jedwards1211/eslint-config-react", 5 | "prettier", 6 | "prettier/@typescript-eslint" 7 | ], 8 | "rules": { 9 | "@typescript-eslint/no-explicit-any": 0 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | coverage 2 | .nyc_output 3 | .vscode-test/ 4 | node_modules 5 | out 6 | .eslintcache 7 | /*.js 8 | /*.js.flow 9 | /*.d.ts 10 | !/.babelrc.js 11 | *.vsix -------------------------------------------------------------------------------- /.vscode/extensions.json: -------------------------------------------------------------------------------- 1 | { 2 | // See http://go.microsoft.com/fwlink/?LinkId=827846 3 | // for the documentation about the extensions.json format 4 | "recommendations": ["ms-vscode.vscode-typescript-tslint-plugin"] 5 | } 6 | -------------------------------------------------------------------------------- /.vscode/launch.json: -------------------------------------------------------------------------------- 1 | // A launch configuration that compiles the extension and then opens it 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": "Run Extension", 10 | "type": "extensionHost", 11 | "request": "launch", 12 | "runtimeExecutable": "${execPath}", 13 | "args": ["--extensionDevelopmentPath=${workspaceFolder}"], 14 | "outFiles": ["${workspaceFolder}/out/**/*.js"], 15 | "preLaunchTask": "${defaultBuildTask}" 16 | }, 17 | { 18 | "name": "Extension Tests", 19 | "type": "extensionHost", 20 | "request": "launch", 21 | "runtimeExecutable": "${execPath}", 22 | "args": [ 23 | "--extensionDevelopmentPath=${workspaceFolder}", 24 | "--extensionTestsPath=${workspaceFolder}/out/test/suite/index" 25 | ], 26 | "outFiles": ["${workspaceFolder}/out/test/**/*.js"], 27 | "preLaunchTask": "${defaultBuildTask}" 28 | } 29 | ] 30 | } 31 | -------------------------------------------------------------------------------- /.vscode/settings.json: -------------------------------------------------------------------------------- 1 | // Place your settings in this file to overwrite default and user settings. 2 | { 3 | "files.exclude": { 4 | "out": false // set this to true to hide the "out" folder with the compiled JS files 5 | }, 6 | "search.exclude": { 7 | "out": true // set this to false to include "out" folder in search results 8 | }, 9 | // Turn off tsc task auto detection since we have the necessary tasks as npm scripts 10 | "typescript.tsc.autoDetect": "off" 11 | } 12 | -------------------------------------------------------------------------------- /.vscode/snippets.code-snippets: -------------------------------------------------------------------------------- 1 | { 2 | "Snippet Template": { 3 | "prefix": "snip", 4 | "body": [ 5 | "import * as React from 'react'", 6 | "import { SnippetOptions } from './index'", 7 | "", 8 | "export const description = '$1'", 9 | "", 10 | "export const body = ({ $, Components: { $2 } }: SnippetOptions) => (", 11 | " $3", 12 | ")", 13 | "" 14 | ] 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /.vscode/tasks.json: -------------------------------------------------------------------------------- 1 | // See https://go.microsoft.com/fwlink/?LinkId=733558 2 | // for the documentation about the tasks.json format 3 | { 4 | "version": "2.0.0", 5 | "tasks": [ 6 | { 7 | "type": "npm", 8 | "script": "build:watch", 9 | "problemMatcher": { 10 | "owner": "babel", 11 | "fileLocation": "relative", 12 | "pattern": { 13 | "regexp": "^(.*?)Error: ([^:]+): ([^(\\n]+)(\\d+:\\d+)?", 14 | "file": 2, 15 | "location": 4, 16 | "code": 1, 17 | "message": 3 18 | }, 19 | "background": { 20 | "activeOnStart": true, 21 | "beginsPattern": "^\\[nodemon\\] starting", 22 | "endsPattern": "^Successfully compiled" 23 | } 24 | }, 25 | "isBackground": true, 26 | "presentation": { 27 | "reveal": "never" 28 | }, 29 | "group": { 30 | "kind": "build", 31 | "isDefault": true 32 | } 33 | } 34 | ] 35 | } 36 | -------------------------------------------------------------------------------- /.vscodeignore: -------------------------------------------------------------------------------- 1 | ** 2 | !node_modules 3 | !out 4 | !LICENSE.md 5 | !package.json 6 | !README.md 7 | !yarn.lock 8 | !icon.png -------------------------------------------------------------------------------- /LICENSE.md: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2016-present Andy Edwards 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Snippets for Material-UI 2 | 3 | ![demo](/docs/snippet.gif?raw=true) 4 | 5 | [![CircleCI](https://circleci.com/gh/vscodeshift/material-ui-snippets.svg?style=svg)](https://circleci.com/gh/vscodeshift/material-ui-snippets) 6 | [![semantic-release](https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg)](https://github.com/semantic-release/semantic-release) 7 | [![Commitizen friendly](https://img.shields.io/badge/commitizen-friendly-brightgreen.svg)](http://commitizen.github.io/cz-cli/) 8 | [![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) 9 | 10 | **Note:** There are two ways to insert these: 11 | 12 | - **Trigger Suggest** (⌃Space 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 Tab. 15 | - Execute the corresponding **editor commands** like `Material-UI: insert 160 | ``` 161 | 162 | ### `muiButtonGroup`: <ButtonGroup> 163 | 164 | ``` 165 | 166 | 167 | 168 | $7 169 | 170 | ``` 171 | 172 | ### `muiButtonGroupSize`: <ButtonGroup> with size 173 | 174 | ``` 175 | 176 | 177 | 178 | $8 179 | 180 | ``` 181 | 182 | ### `muiButtonGroupVertical`: vertical <ButtonGroup> 183 | 184 | ``` 185 | 186 | 187 | 188 | $7 189 | 190 | ``` 191 | 192 | ### `muiButtonSize`: <Button> with size 193 | 194 | ``` 195 | 203 | ``` 204 | 205 | ### `muiButtonText`: text <Button> 206 | 207 | ``` 208 | 209 | ``` 210 | 211 | ### `muiButtonWithIcon`: <Button> with icon and label 212 | 213 | ``` 214 | 222 | ``` 223 | 224 | ### `muiCardHeader`: <CardHeader> 225 | 226 | ``` 227 | 230 | $4 231 | 232 | \}}${5: 233 | action={ 234 | 235 | $8 236 | 237 | \}}${9: 238 | title="$10"}${11: 239 | subheader="$12"} 240 | $13 241 | /> 242 | ``` 243 | 244 | ### `muiCardMedia`: <CardMedia> 245 | 246 | ``` 247 | 248 | ``` 249 | 250 | ### `muiCheckboxLabel`: <Checkbox> with <FormControlLabel> 251 | 252 | #### Controlled 253 | 254 | ``` 255 | 264 | } 265 | /> 266 | ``` 267 | 268 | #### Uncontrolled 269 | 270 | ``` 271 | 279 | } 280 | /> 281 | ``` 282 | 283 | ### `muiCheckboxLabelPlacement`: <Checkbox> with <FormControlLabel> 284 | 285 | #### Controlled 286 | 287 | ``` 288 | 298 | } 299 | /> 300 | ``` 301 | 302 | #### Uncontrolled 303 | 304 | ``` 305 | 314 | } 315 | /> 316 | ``` 317 | 318 | ### `muiContainer`: <Container> 319 | 320 | ``` 321 | 322 | $3 323 | 324 | ``` 325 | 326 | ### `muiDialog`: <Dialog> 327 | 328 | ``` 329 | ${4: 330 | 331 | $5 332 | }${6: 333 | ${7: 334 | 335 | $8 336 | } 337 | }${9: 338 | 339 | 342 | } 343 | 344 | ``` 345 | 346 | ### `muiDialogSimple`: <Dialog> 347 | 348 | ``` 349 | 350 | $4 351 | 352 | ``` 353 | 354 | ### `muiDrawerPermanent`: permanent <Drawer> 355 | 356 | ``` 357 | 358 | $3 359 | 360 | ``` 361 | 362 | ### `muiDrawerPersistent`: persistent <Drawer> 363 | 364 | ``` 365 | 371 | $4 372 | 373 | ``` 374 | 375 | ### `muiDrawerTemporary`: temporary <Drawer> 376 | 377 | ``` 378 | 385 | $5 386 | 387 | ``` 388 | 389 | ### `muiEndAdornment`: end <InputAdornment> 390 | 391 | ``` 392 | 393 | endAdornment={ 394 | 395 | $0 396 | 397 | } 398 | 399 | ``` 400 | 401 | ### `muiExpansionPanel`: <ExpansionPanel> 402 | 403 | ``` 404 | 405 | } 407 | aria-label="${1:Expand}" 408 | aria-controls="$2-content" 409 | id="$2-header" 410 | > 411 | $4 412 | 413 | $5 414 | 415 | ``` 416 | 417 | ### `muiExpansionPanelControlled`: controlled <ExpansionPanel> 418 | 419 | ``` 420 | 421 | } 423 | aria-label="${3:Expand}" 424 | aria-controls="$4-content" 425 | id="$4-header" 426 | > 427 | $6 428 | 429 | $7 430 | 431 | ``` 432 | 433 | ### `muiFab`: <Fab> 434 | 435 | ``` 436 | 437 | <$4Icon /> 438 | 439 | ``` 440 | 441 | ### `muiFabExtended`: <Fab variant="extended"> 442 | 443 | ``` 444 | 445 | <$4Icon /> 446 | $5 447 | 448 | ``` 449 | 450 | ### `muiFormControl`: <FormControl> 451 | 452 | ``` 453 | 454 | $2 455 | $0 456 | $3 457 | 458 | ``` 459 | 460 | ### `muiFormControlGroup`: <FormControl> with <FormGroup> 461 | 462 | ``` 463 | 464 | $4 465 | 466 | $0 467 | 468 | $5 469 | 470 | ``` 471 | 472 | ### `muiGridContainer`: <Grid container> 473 | 474 | ``` 475 | 476 | $3 477 | 478 | ``` 479 | 480 | ### `muiGridContainerCenter`: <Grid container> with centering 481 | 482 | ``` 483 | 493 | $10 494 | 495 | ``` 496 | 497 | ### `muiGridContainerFull`: <Grid container> with all props 498 | 499 | ``` 500 | 510 | $14 511 | 512 | ``` 513 | 514 | ### `muiGridListSubheader`: <GridList> subheader 515 | 516 | ``` 517 | 518 | $2 519 | 520 | ``` 521 | 522 | ### `muiGridListTilebar`: <GridListTileBar> 523 | 524 | ``` 525 | 530 | $8 531 | 532 | \}} 533 | /> 534 | ``` 535 | 536 | ### `muiIconButton`: <IconButton> 537 | 538 | ``` 539 | 540 | $4 541 | 542 | ``` 543 | 544 | ### `muiMenu`: <Menu> 545 | 546 | ``` 547 | 548 | $5 549 | 550 | ``` 551 | 552 | ### `muiMenuItem`: <MenuItem> 553 | 554 | ``` 555 | $3 556 | ``` 557 | 558 | ### `muiMenuPopupState`: <Menu> for material-ui-popup-state 559 | 560 | ``` 561 | 567 | $4 568 | 569 | ``` 570 | 571 | ### `muiRadioGroup`: <FormControl> with <RadioGroup> 572 | 573 | ``` 574 | 575 | $4 576 | $0 577 | $9 578 | 579 | ``` 580 | 581 | ### `muiRadioLabel`: <Radio> with <FormControlLabel> 582 | 583 | ``` 584 | } /> 585 | ``` 586 | 587 | ### `muiRadioLabelPlacement`: <Radio> with <FormControlLabel> with labelPlacement 588 | 589 | ``` 590 | } 595 | /> 596 | ``` 597 | 598 | ### `muiSelectItem`: <MenuItem> inside <Select> 599 | 600 | ``` 601 | $3 602 | ``` 603 | 604 | ### `muiSliderContinuous`: <Slider> with continuous values 605 | 606 | #### Controlled 607 | 608 | ``` 609 | 617 | ``` 618 | 619 | #### Uncontrolled 620 | 621 | ``` 622 | 629 | ``` 630 | 631 | ### `muiSliderDiscrete`: <Slider> with discrete values 632 | 633 | #### Controlled 634 | 635 | ``` 636 | 646 | ``` 647 | 648 | #### Uncontrolled 649 | 650 | ``` 651 | 660 | ``` 661 | 662 | ### `muiSnackbar`: <Snackbar> 663 | 664 | ``` 665 | 672 | 673 | 674 | \}} 675 | /> 676 | ``` 677 | 678 | ### `muiSnackbarContent`: <SnackbarContent> 679 | 680 | ``` 681 | 682 | ``` 683 | 684 | ### `muiStartAdornment`: start <InputAdornment> 685 | 686 | ``` 687 | 688 | startAdornment={ 689 | 690 | $0 691 | 692 | } 693 | 694 | ``` 695 | 696 | ### `muiStep`: <Step> 697 | 698 | ``` 699 | 700 | $4 701 | 702 | ``` 703 | 704 | ### `muiStepContent`: <Step> with <StepContent> 705 | 706 | ``` 707 | 708 | $4 709 | 710 | $5 711 | 712 | 713 | ``` 714 | 715 | ### `muiStepOptional`: optional <Step> 716 | 717 | ``` 718 | 719 | ${4:Optional}} 721 | > 722 | $5 723 | 724 | 725 | ``` 726 | 727 | ### `muiStepper`: <Stepper> 728 | 729 | ``` 730 | 731 | $2 732 | 733 | ``` 734 | 735 | ### `muiSwipeableViews`: <SwipeableViews> 736 | 737 | ``` 738 | 744 | $0 745 | 746 | ``` 747 | 748 | ### `muiSwitch`: <Switch> 749 | 750 | #### Controlled 751 | 752 | ``` 753 | 760 | ``` 761 | 762 | #### Uncontrolled 763 | 764 | ``` 765 | 771 | ``` 772 | 773 | ### `muiSwitchLabel`: <Switch> with <FormControlLabel> 774 | 775 | #### Controlled 776 | 777 | ``` 778 | 787 | } 788 | /> 789 | ``` 790 | 791 | #### Uncontrolled 792 | 793 | ``` 794 | 802 | } 803 | /> 804 | ``` 805 | 806 | ### `muiSwitchLabelPlacement`: <Switch> with <FormControlLabel> with labelPlacement 807 | 808 | #### Controlled 809 | 810 | ``` 811 | 821 | } 822 | /> 823 | ``` 824 | 825 | #### Uncontrolled 826 | 827 | ``` 828 | 837 | } 838 | /> 839 | ``` 840 | 841 | ### `muiTabPanel`: <TabPanel> 842 | 843 | ``` 844 | 845 | $5 846 | 847 | ``` 848 | 849 | ### `muiTabs`: <Tabs> 850 | 851 | ``` 852 | 853 | 854 | $7 855 | 856 | 857 | ``` 858 | 859 | ### `muiTabsScrollable`: scrollable <Tabs> 860 | 861 | ``` 862 | 863 | 871 | $8 872 | 873 | 874 | ``` 875 | 876 | ### `muiTextField`: <TextField> 877 | 878 | #### Controlled 879 | 880 | ``` 881 | 888 | ``` 889 | 890 | #### Uncontrolled 891 | 892 | ``` 893 | 899 | ``` 900 | 901 | ### `muiTextFieldMore`: <TextField> with more props 902 | 903 | #### Controlled 904 | 905 | ``` 906 | 917 | ``` 918 | 919 | #### Uncontrolled 920 | 921 | ``` 922 | 932 | ``` 933 | 934 | ### `muiTextFieldSelect`: <TextField select> 935 | 936 | #### Controlled 937 | 938 | ``` 939 | 947 | ``` 948 | 949 | #### Uncontrolled 950 | 951 | ``` 952 | 959 | ``` 960 | 961 | ### `muiTextFieldVariant`: <TextField> with variant 962 | 963 | #### Controlled 964 | 965 | ``` 966 | 974 | ``` 975 | 976 | #### Uncontrolled 977 | 978 | ``` 979 | 986 | ``` 987 | 988 | ### `muiTooltip`: <Tooltip> 989 | 990 | ``` 991 | 992 | $TM_SELECTED_TEXT$0 993 | 994 | ``` 995 | 996 | ### `muiTypography`: <Typography> 997 | 998 | ``` 999 | $TM_SELECTED_TEXT$0 1000 | ``` 1001 | 1002 | 1003 | -------------------------------------------------------------------------------- /docs/snippet.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vscodeshift/material-ui-snippets/e54f7d301186c94c059bfbc6311b5ec4c9aecfc1/docs/snippet.gif -------------------------------------------------------------------------------- /icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vscodeshift/material-ui-snippets/e54f7d301186c94c059bfbc6311b5ec4c9aecfc1/icon.png -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "material-ui-snippets", 3 | "version": "0.0.0-development", 4 | "displayName": "Material-UI Snippets", 5 | "description": "Code snippets for Material-UI", 6 | "icon": "icon.png", 7 | "publisher": "vscodeshift", 8 | "engines": { 9 | "vscode": "^1.51.0" 10 | }, 11 | "main": "./out/extension.js", 12 | "activationEvents": [ 13 | "onLanguage:javascript", 14 | "onLanguage:javascriptreact", 15 | "onLanguage:typescriptreact" 16 | ], 17 | "contributes": { 18 | "configuration": [ 19 | { 20 | "title": "Material-UI Snippets", 21 | "properties": { 22 | "material-ui-snippets.importPaths": { 23 | "type": "string", 24 | "default": "auto", 25 | "markdownDescription": "Which import paths to use in generated import statements", 26 | "enum": [ 27 | "auto", 28 | "top level", 29 | "second level" 30 | ], 31 | "enumDescriptions": [ 32 | "Uses top level if other top level imports are found, second level otherwise", 33 | "import { Button } from '@material-ui/core'", 34 | "import Button from '@material-ui/core/Button'" 35 | ] 36 | }, 37 | "material-ui-snippets.formControlMode": { 38 | "type": "string", 39 | "default": "controlled", 40 | "markdownDescription": "Whether to use controlled or uncontrolled inputs and other form controls in snippets", 41 | "enum": [ 42 | "controlled", 43 | "uncontrolled" 44 | ], 45 | "enumDescriptions": [ 46 | "Includes value and onChange properties in form controls", 47 | "Includes defaultValue property in form controls" 48 | ] 49 | }, 50 | "material-ui-snippets.showNotesOnStartup": { 51 | "type": "boolean", 52 | "default": true, 53 | "markdownDescription": "Whether to show release notes on startup" 54 | } 55 | } 56 | } 57 | ], 58 | "commands": [ 59 | { 60 | "command": "extension.muiAppBar", 61 | "title": "Insert ", 62 | "category": "Material-UI Snippets" 63 | }, 64 | { 65 | "command": "extension.muiAppBarMenu", 66 | "title": "Insert with menu icon", 67 | "category": "Material-UI Snippets" 68 | }, 69 | { 70 | "command": "extension.muiBottomNavigation", 71 | "title": "Insert ", 72 | "category": "Material-UI Snippets" 73 | }, 74 | { 75 | "command": "extension.muiBottomNavigationAction", 76 | "title": "Insert ", 77 | "category": "Material-UI Snippets" 78 | }, 79 | { 80 | "command": "extension.muiButton", 81 | "title": "Insert