├── .gitignore ├── .DS_Store ├── .vscodeignore ├── assets ├── spfx-snippets.png └── spfx-snippet-demo.gif ├── .github ├── FUNDING.yml └── workflows │ └── release.yml ├── .vscode └── launch.json ├── snippets ├── sass.json ├── fabric-fonts.json ├── typescript.json ├── javascript.json ├── fabric-grid.json ├── json.json ├── react.json ├── common-react-ts.json └── fabric-colors.json ├── LICENCE ├── vsc-extension-quickstart.md ├── package.json ├── CHANGELOG.md └── README.md /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | .vsix 3 | -------------------------------------------------------------------------------- /.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/estruyf/vscode-spfx-snippets/HEAD/.DS_Store -------------------------------------------------------------------------------- /.vscodeignore: -------------------------------------------------------------------------------- 1 | .vscode/** 2 | .vscode-test/** 3 | .gitignore 4 | vsc-extension-quickstart.md 5 | .github -------------------------------------------------------------------------------- /assets/spfx-snippets.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/estruyf/vscode-spfx-snippets/HEAD/assets/spfx-snippets.png -------------------------------------------------------------------------------- /assets/spfx-snippet-demo.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/estruyf/vscode-spfx-snippets/HEAD/assets/spfx-snippet-demo.gif -------------------------------------------------------------------------------- /.github/FUNDING.yml: -------------------------------------------------------------------------------- 1 | # These are supported funding model platforms 2 | 3 | github: [estruyf] 4 | open_collective: frontmatter 5 | custom: ["https://www.buymeacoffee.com/zMeFRy9"] 6 | -------------------------------------------------------------------------------- /.vscode/launch.json: -------------------------------------------------------------------------------- 1 | // A launch configuration that launches the extension inside a new window 2 | { 3 | "version": "0.1.0", 4 | "configurations": [ 5 | { 6 | "name": "Launch Extension", 7 | "type": "extensionHost", 8 | "request": "launch", 9 | "runtimeExecutable": "${execPath}", 10 | "args": ["--extensionDevelopmentPath=${workspaceRoot}" ] 11 | } 12 | ] 13 | } -------------------------------------------------------------------------------- /.github/workflows/release.yml: -------------------------------------------------------------------------------- 1 | name: Release 2 | on: 3 | release: 4 | types: 5 | - published 6 | workflow_dispatch: 7 | 8 | jobs: 9 | release-ms: 10 | name: "Release to VSCode Marketplace" 11 | runs-on: ubuntu-latest 12 | steps: 13 | - uses: actions/checkout@v4 14 | 15 | - uses: actions/setup-node@v4 16 | with: 17 | node-version: 20 18 | registry-url: https://registry.npmjs.org/ 19 | 20 | - name: Publish 21 | run: npx @vscode/vsce publish -p ${{ secrets.VSCE_PAT }} 22 | -------------------------------------------------------------------------------- /snippets/sass.json: -------------------------------------------------------------------------------- 1 | { 2 | "Office UI Fabric Core Reference": { 3 | "prefix": "spfx-fabcore", 4 | "body": "@import '~@microsoft/sp-office-ui-fabric-core/dist/sass/SPFabricCore.scss';", 5 | "description": "Includes the Office UI Fabric Core styles into your SASS file." 6 | }, 7 | "Office UI Fabric React Reference": { 8 | "prefix": "spfx-fabreact", 9 | "body": "@import '~office-ui-fabric-react/dist/sass/References.scss';", 10 | "description": "Includes the core styles from the Office UI Fabric React package into your SASS file." 11 | } 12 | } -------------------------------------------------------------------------------- /snippets/fabric-fonts.json: -------------------------------------------------------------------------------- 1 | { 2 | "ms-font": { 3 | "prefix": "spfx-font", 4 | "body": "@include ms-font-${1|su,xxl,xl-plus,xl,l,m-plus,m,s-plus,s,xs,mi|};", 5 | "description": "Includes the ms-font style, and lets you choose between the available sizes." 6 | }, 7 | "ms-fontWeight": { 8 | "prefix": "spfx-fontWeight", 9 | "body": "@include ms-fontWeight-${1|light,semilight,regular,semibold,bold|};", 10 | "description": "Includes the ms-fontWeight style, and lets you choose between the available weights." 11 | }, 12 | "ms-fontSize": { 13 | "prefix": "spfx-fontSize", 14 | "body": "@include ms-fontSize-${1|su,xxl,xlPlus,xl,l,mPlus,m,sPlus,s,xs,mi|};", 15 | "description": "Includes the ms-fontSize font size style, and lets you choose between the available sizes." 16 | } 17 | } -------------------------------------------------------------------------------- /LICENCE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2018 Elio Struyf 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. -------------------------------------------------------------------------------- /vsc-extension-quickstart.md: -------------------------------------------------------------------------------- 1 | # Welcome to your VS Code Extension 2 | 3 | ## What's in the folder 4 | * This folder contains all of the files necessary for your extension. 5 | * `package.json` - this is the manifest file that defines the location of the snippet file 6 | 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 | * Press `F5` to open a new window with your extension loaded. 11 | * Create a new file with a file name suffix matching your language. 12 | * Verify that your snippets are proposed on intellisense. 13 | 14 | ## Make changes 15 | * You can relaunch the extension from the debug toolbar after making changes to the files listed above. 16 | * You can also reload (`Ctrl+R` or `Cmd+R` on Mac) the VS Code window with your extension to load your changes. 17 | 18 | ## Install your extension 19 | * To start using your extension with Visual Studio Code copy it into the `/.vscode/extensions` folder and restart Code. 20 | * To share your extension with the world, read on https://code.visualstudio.com/docs about publishing an extension. 21 | -------------------------------------------------------------------------------- /snippets/typescript.json: -------------------------------------------------------------------------------- 1 | { 2 | "Resource definition": { 3 | "prefix": "spfx-locale-ts", 4 | "body": [ 5 | "declare interface I${1:Resource}Strings {", 6 | " ${2:}", 7 | "}", 8 | "", 9 | "declare module '${1:Resource}Strings' {", 10 | " const strings: I${1:Resource}Strings;", 11 | " export = strings;", 12 | "}", 13 | "" 14 | ], 15 | "description": "Defines the content to create a new localization definition file." 16 | }, 17 | "Webpart onInit": { 18 | "prefix": "spfx-wpinit", 19 | "body": [ 20 | "protected onInit(): Promise {", 21 | " ${1:}", 22 | "", 23 | " return Promise.resolve();", 24 | "}", 25 | "" 26 | ], 27 | "description": "Defines the web part onInit method." 28 | }, 29 | "Render component": { 30 | "prefix": "spfx-render-elm", 31 | "body": [ 32 | "const element: React.ReactElement = React.createElement(", 33 | " ${1:Component},", 34 | " {", 35 | " ${2:}", 36 | " }", 37 | ");", 38 | "", 39 | "ReactDom.render(element, this.domElement);" 40 | ], 41 | "description": "Adds the code required to create and render a React component." 42 | } 43 | } -------------------------------------------------------------------------------- /snippets/javascript.json: -------------------------------------------------------------------------------- 1 | { 2 | "Define Resource Strings": { 3 | "prefix": "spfx-locale-js", 4 | "body": [ 5 | "define([], function() {", 6 | " return {", 7 | " ${1:}", 8 | " }", 9 | "});", 10 | "" 11 | ], 12 | "description": "Defines the content to create a new locale file." 13 | }, 14 | "spfx-gulp-task": { 15 | "prefix": "spfx-gulp-task", 16 | "body": [ 17 | "build.task('${1:taskName}', {", 18 | " execute: (config) => {", 19 | " ${2:}", 20 | " }", 21 | "});" 22 | ], 23 | "description": "Defines the content for a new Gulp task." 24 | }, 25 | "spfx-gulp-subtask": { 26 | "prefix": "spfx-gulp-subtask", 27 | "body": [ 28 | "build.subTask('${1:taskName}', (gulp, config, done) => {", 29 | " ${2:}", 30 | " done();", 31 | "});" 32 | ], 33 | "description": "Defines the content for a new Gulp sub-task." 34 | }, 35 | "spfx-webpack": { 36 | "prefix": "spfx-webpack", 37 | "body": [ 38 | "build.configureWebpack.mergeConfig({", 39 | " additionalConfiguration: (generatedConfiguration) => {", 40 | " ${1:}", 41 | " return generatedConfiguration;", 42 | " }", 43 | "});" 44 | ], 45 | "description": "Defines the content extending the webpack configuration." 46 | } 47 | } -------------------------------------------------------------------------------- /snippets/fabric-grid.json: -------------------------------------------------------------------------------- 1 | { 2 | "ms-Grid": { 3 | "prefix": "spfx-grid", 4 | "body": "@include ms-Grid;", 5 | "description": "Includes the ms-Grid styles" 6 | }, 7 | "ms-Grid-row": { 8 | "prefix": "spfx-grid-row", 9 | "body": "@include ms-Grid-row;", 10 | "description": "Includes the ms-Grid-row styles" 11 | }, 12 | "ms-Grid-col": { 13 | "prefix": "spfx-grid-col", 14 | "body": "@include ms-Grid-col;", 15 | "description": "Includes the ms-Grid-col styles" 16 | }, 17 | "ms-sm*": { 18 | "prefix": "spfx-grid-sm*", 19 | "body": "@include ms-sm${1|1,2,3,4,5,6,7,8,9,10,11,12|};", 20 | "description": "Includes the ms-sm and allows you to choose its size" 21 | }, 22 | "ms-md*": { 23 | "prefix": "spfx-grid-md*", 24 | "body": "@include ms-md${1|1,2,3,4,5,6,7,8,9,10,11,12|};", 25 | "description": "Includes the ms-md and allows you to choose its size" 26 | }, 27 | "ms-lg*": { 28 | "prefix": "spfx-grid-lg*", 29 | "body": "@include ms-lg${1|1,2,3,4,5,6,7,8,9,10,11,12|};", 30 | "description": "Includes the ms-lg and allows you to choose its size" 31 | }, 32 | "ms-xl*": { 33 | "prefix": "spfx-grid-xl*", 34 | "body": "@include ms-xl${1|1,2,3,4,5,6,7,8,9,10,11,12|};", 35 | "description": "Includes the ms-xl and allows you to choose its size" 36 | }, 37 | "ms-xxl*": { 38 | "prefix": "spfx-grid-xxl*", 39 | "body": "@include ms-xxl${1|1,2,3,4,5,6,7,8,9,10,11,12|};", 40 | "description": "Includes the ms-xxl and allows you to choose its size" 41 | }, 42 | "ms-xxxl*": { 43 | "prefix": "spfx-grid-xxxl*", 44 | "body": "@include ms-xxxl${1|1,2,3,4,5,6,7,8,9,10,11,12|};", 45 | "description": "Includes the ms-xxxl and allows you to choose its size" 46 | } 47 | } -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "spfx-snippets", 3 | "displayName": "SPFx Snippets", 4 | "description": "SharePoint Framework Snippets by Elio Struyf", 5 | "version": "1.12.0", 6 | "icon": "assets/spfx-snippets.png", 7 | "publisher": "eliostruyf", 8 | "engines": { 9 | "vscode": "^1.19.0" 10 | }, 11 | "categories": [ 12 | "Snippets" 13 | ], 14 | "keywords": [ 15 | "SharePoint", 16 | "SPFx", 17 | "TypeScript", 18 | "React", 19 | "Framework" 20 | ], 21 | "license": "MIT", 22 | "repository": { 23 | "type": "git", 24 | "url": "https://github.com/estruyf/vscode-spfx-snippets" 25 | }, 26 | "sponsor": { 27 | "url": "https://github.com/sponsors/estruyf" 28 | }, 29 | "contributes": { 30 | "snippets": [{ 31 | "language": "typescriptreact", 32 | "path": "./snippets/react.json" 33 | }, 34 | { 35 | "language": "typescriptreact", 36 | "path": "./snippets/common-react-ts.json" 37 | }, 38 | { 39 | "language": "typescript", 40 | "path": "./snippets/common-react-ts.json" 41 | }, 42 | { 43 | "language": "typescript", 44 | "path": "./snippets/typescript.json" 45 | }, 46 | { 47 | "language": "javascript", 48 | "path": "./snippets/javascript.json" 49 | }, 50 | { 51 | "language": "scss", 52 | "path": "./snippets/sass.json" 53 | }, 54 | { 55 | "language": "scss", 56 | "path": "./snippets/fabric-colors.json" 57 | }, 58 | { 59 | "language": "scss", 60 | "path": "./snippets/fabric-fonts.json" 61 | }, 62 | { 63 | "language": "scss", 64 | "path": "./snippets/fabric-grid.json" 65 | }, 66 | { 67 | "language": "json", 68 | "path": "./snippets/json.json" 69 | } 70 | ] 71 | } 72 | } -------------------------------------------------------------------------------- /snippets/json.json: -------------------------------------------------------------------------------- 1 | { 2 | "spfx-webapi": { 3 | "prefix": "spfx-api", 4 | "body": [ 5 | "\"webApiPermissionRequests\": [", 6 | " {", 7 | " \"resource\": \"${1:Microsoft Graph}\",", 8 | " \"scope\": \"${2:User.ReadBasic.All}\"", 9 | " }", 10 | "]" 11 | ], 12 | "description": "Includes the webApiPermissionRequests property with Microsoft Graph as the resource." 13 | }, 14 | "spfx-add-permission": { 15 | "prefix": "spfx-add-permission", 16 | "body": [ 17 | " {", 18 | " \"resource\": \"${1:Microsoft Graph}\",", 19 | " \"scope\": \"${2:User.ReadBasic.All}\"", 20 | " }" 21 | ], 22 | "description": "Includes a new permission object." 23 | }, 24 | "spfx-scope-calendar": { 25 | "prefix": "spfx-scope-calendar", 26 | "body": "${1|\"Calendars.Read\",\"Calendars.Read.Shared\",\"Calendars.ReadWrite\",\"Calendars.ReadWrite.Shared\"|}", 27 | "description": "Include one of the Microsoft Graph calendar scopes." 28 | }, 29 | "spfx-scope-contacts": { 30 | "prefix": "spfx-scope-contacts", 31 | "body": "${1|\"Contacts.Read\",\"Contacts.Read.Shared\",\"Contacts.ReadWrite\",\"Contacts.ReadWrite.Shared\"|}", 32 | "description": "Include one of the Microsoft Graph contacts scopes." 33 | }, 34 | "spfx-scope-directory": { 35 | "prefix": "spfx-scope-directory", 36 | "body": "${1|\"Directory.Read.All\",\"Directory.ReadWrite.All\",\"Directory.AccessAsUser.All\"|}", 37 | "description": "Include one of the Microsoft Graph directory scopes." 38 | }, 39 | "spfx-scope-files": { 40 | "prefix": "spfx-scope-files", 41 | "body": "${1|\"Files.Read\",\"Files.Read.All\",\"Files.ReadWrite\",\"Files.ReadWrite.All\"|}", 42 | "description": "Include one of the Microsoft Graph files scopes." 43 | }, 44 | "spfx-scope-group": { 45 | "prefix": "spfx-scope-group", 46 | "body": "${1|\"Group.Read.All\",\"Group.ReadWrite.All\"|}", 47 | "description": "Include one of the Microsoft Graph group scopes." 48 | }, 49 | "spfx-scope-mail": { 50 | "prefix": "spfx-scope-mail", 51 | "body": "${1|\"Mail.Read\",\"Mail.ReadWrite\",\"Mail.Read.Shared\",\"Mail.ReadWrite.Shared\",\"Mail.Send,Mail.Send.Shared\"|}", 52 | "description": "Include one of the Microsoft Graph mail scopes." 53 | }, 54 | "spfx-scope-sites": { 55 | "prefix": "spfx-scope-sites", 56 | "body": "${1|\"Sites.Read.All\",\"Sites.ReadWrite.All\",\"Sites.Manage.All\",\"Sites.FullControl.All\"|}", 57 | "description": "Include one of the Microsoft Graph sites scopes." 58 | }, 59 | "spfx-scope-tasks": { 60 | "prefix": "spfx-scope-tasks", 61 | "body": "${1|\"Tasks.Read\",\"Tasks.Read.Shared\",\"Tasks.ReadWrite\",\"Tasks.ReadWrite.Shared\"|}", 62 | "description": "Include one of the Microsoft Graph tasks scopes." 63 | }, 64 | "spfx-scope-user": { 65 | "prefix": "spfx-scope-user", 66 | "body": "${1|\"User.Read\",\"User.ReadWrite\",\"User.ReadBasic.All\",\"User.Read.All\",\"User.ReadWrite.All\",\"User.Invite.All\"|}", 67 | "description": "Include one of the Microsoft Graph user scopes." 68 | } 69 | } -------------------------------------------------------------------------------- /CHANGELOG.md: -------------------------------------------------------------------------------- 1 | # Change Log 2 | 3 | ## [1.12.0] 4 | 5 | - Added React `useContext` provider snippet with `spfx-context` 6 | 7 | ## [1.11.1] 8 | 9 | - Fix for the `usePrevious` snippet. 10 | 11 | ## [1.11.0] 12 | 13 | - Added React `useAsyc` hook which is available with `spfx-hook-async`. 14 | - Added React `usePrevious` hook which is available with `spfx-hook-prev`. 15 | 16 | ## [1.10.1] 17 | 18 | - Added `spfx-hook` to TypeScript as well. 19 | 20 | ## [1.10.0] 21 | 22 | - Updated the `spfx-fnc` and `spfx-fnc-state` with the `PropsWithChildren` interface. 23 | 24 | ## [1.9.0] 25 | 26 | - Added React `useEffect` hook snippet: `spfx-effect` 27 | - Added React `useEffect` hook snippet which only executes once: `spfx-effect-once` 28 | - Added blueprint of a custom React hook: `spfx-hook` 29 | 30 | ## [1.8.1] 31 | 32 | - Adding missing semicolons 33 | 34 | ## [1.8.0] 35 | 36 | - Added React Stateless Function Component: `spfx-fnc` 37 | - Added React Function Component with `useState` hook: `spfx-fnc-state` 38 | 39 | ## [1.7.1] 40 | 41 | - Fix for `json` permission scope snippets 42 | 43 | ## [1.7.0] 44 | 45 | - Added `spfx-graph` snippet 46 | - Added `spfx-webapi` json snippet 47 | - Added `spfx-add-permission` json snippet 48 | - Added `spfx-scope-calendar` json snippet 49 | - Added `spfx-scope-contacts` json snippet 50 | - Added `spfx-scope-directory` json snippet 51 | - Added `spfx-scope-files` json snippet 52 | - Added `spfx-scope-group` json snippet 53 | - Added `spfx-scope-mail` json snippet 54 | - Added `spfx-scope-sites` json snippet 55 | - Added `spfx-scope-tasks` json snippet 56 | - Added `spfx-scope-user` json snippet 57 | 58 | - Updated `spfx-spget` to `spfx-sp-get` 59 | - Updated `spfx-httpget` to `spfx-http-get` 60 | 61 | ## [1.6.0] 62 | 63 | - Added `spfx-httpget` snippet 64 | - Updated extension logo for better visibility in dark theme 65 | 66 | ## [1.5.0] 67 | 68 | - Added `spfx-cwrp` snippet 69 | - Added `spfx-scu` snippet 70 | 71 | ## [1.4.0] 72 | 73 | - Added `spfx-spget-import` snippet 74 | - Improved the grid size snippets. Example: `spfx-grid-sm*` now lets you choose its size once inserted. 75 | - Improved the `spfx-font` snippet with a list of available sizes. 76 | - Improved the `spfx-fontWeight` snippet with a list of available weights. 77 | - Improved the `spfx-fontSize` snippet with a list of available sizes. 78 | 79 | ## [1.3.0] 80 | 81 | - Added `spfx-gulp-task` snippet 82 | - Added `spfx-gulp-subtask` snippet 83 | - Added `spfx-webpack` snippet 84 | 85 | ## [1.2.0] 86 | 87 | - Added all SASS color variables as snippets: `spfx-color-*` 88 | - Added font styling snippets: `spfx-font-*` 89 | - Added font weight snippets: `spfx-fontWeight-*` 90 | - Added font size snippets: `spfx-fontSize-*` 91 | - Added grid styles: `spfx-grid`, `spfx-grid-row`, `spfx-grid-col`, and `spfx-grid-*` 92 | 93 | ## [1.1.0] 94 | 95 | - Added `spfx-create-elm` snippet 96 | - Added `spfx-rcc-state` snippet 97 | - Added `spfx-ist` snippet 98 | - Added `spfx-sst` snippet 99 | - Added `spfx-ucst` snippet 100 | - Added `spfx-cwu` snippet 101 | - Added `spfx-cdm` snippet 102 | - Added `spfx-cwm` snippet 103 | - Added `spfx-cdu` snippet 104 | - Added `spfx-spget` snippet 105 | 106 | ## [1.0.0] 107 | 108 | - Initial release 109 | -------------------------------------------------------------------------------- /snippets/react.json: -------------------------------------------------------------------------------- 1 | { 2 | "React Component": { 3 | "prefix": "spfx-rcc", 4 | "body": [ 5 | "import * as React from 'react';", 6 | "import styles from './${1:Component}.module.scss';", 7 | "", 8 | "export interface I${1:Component}Props {}", 9 | "", 10 | "export interface I${1:Component}State {}", 11 | "", 12 | "export default class ${1:} extends React.Component {", 13 | " public render(): React.ReactElement {", 14 | " return (", 15 | "
", 16 | " ${2:}", 17 | "
", 18 | " );", 19 | " }", 20 | "}", 21 | "" 22 | ], 23 | "description": "Creates a new React Component." 24 | }, 25 | "React Component with state initialization": { 26 | "prefix": "spfx-rcc-state", 27 | "body": [ 28 | "import * as React from 'react';", 29 | "import styles from './${1:Component}.module.scss';", 30 | "", 31 | "export interface I${1:Component}Props {}", 32 | "", 33 | "export interface I${1:Component}State {}", 34 | "", 35 | "export default class ${1:} extends React.Component {", 36 | "", 37 | " constructor(props: I${1:Component}Props) {", 38 | " super(props);", 39 | "", 40 | " this.state = {", 41 | " ${2:}", 42 | " };", 43 | " }", 44 | "", 45 | " public render(): React.ReactElement {", 46 | " return (", 47 | "
", 48 | " ${3:}", 49 | "
", 50 | " );", 51 | " }", 52 | "}", 53 | "" 54 | ], 55 | "description": "Creates a new React Component with state initialization." 56 | }, 57 | "React Stateless Function Component": { 58 | "prefix": "spfx-fnc", 59 | "body": [ 60 | "import * as React from 'react';", 61 | "", 62 | "export interface I${1:Component}Props {}", 63 | "", 64 | "export const ${1:Component}: React.FunctionComponent = (props: React.PropsWithChildren) => {", 65 | " return (", 66 | " <>", 67 | "", 68 | " ", 69 | " );", 70 | "};" 71 | ], 72 | "description": "Creates a new Stateless Function Component" 73 | }, 74 | "React Function Component with useState Hook": { 75 | "prefix": "spfx-fnc-state", 76 | "body": [ 77 | "import * as React from 'react';", 78 | "", 79 | "export interface I${1:Component}Props {}", 80 | "", 81 | "export const ${1:Component}: React.FunctionComponent = (props: React.PropsWithChildren) => {", 82 | " const [value, setValue] = React.useState('');", 83 | "", 84 | " return (", 85 | " <>", 86 | "", 87 | " ", 88 | " );", 89 | "};" 90 | ], 91 | "description": "Creates a new React Function Component with useState Hook" 92 | }, 93 | "React Constructor": { 94 | "prefix": "spfx-con", 95 | "body": [ 96 | "constructor(props: I${1:Component}Props) {", 97 | " super(props);", 98 | "", 99 | " ${2:}", 100 | "}", 101 | "" 102 | ], 103 | "description": "Adds a React constructor method." 104 | }, 105 | "Initialize state": { 106 | "prefix": "spfx-ist", 107 | "body": [ 108 | "this.state = {", 109 | " ${1:}", 110 | "};" 111 | ], 112 | "description": "Initializes the React state." 113 | }, 114 | "setState": { 115 | "prefix": "spfx-sst", 116 | "body": [ 117 | "this.setState({", 118 | " ${1:}", 119 | "});" 120 | ], 121 | "description": "Adds setState block." 122 | }, 123 | "setState based on previous value": { 124 | "prefix": "spfx-ucst", 125 | "body": [ 126 | "this.setState((prevState: I${1:Component}State) => ({", 127 | " ${2:}", 128 | "}));" 129 | ], 130 | "description": "Adds the setState block to correctly update the state based on previous value." 131 | }, 132 | "componentWillUpdate": { 133 | "prefix": "spfx-cwu", 134 | "body": [ 135 | "public componentWillUpdate(nextProps: I${1:Component}Props, nextState: I${1:Component}State): void {", 136 | " ${2:}", 137 | "}" 138 | ], 139 | "description": "Adds componentWillUpdate method which is invoked just before rendering when new props or state are retrieved." 140 | }, 141 | "componentDidUpdate": { 142 | "prefix": "spfx-cdu", 143 | "body": [ 144 | "public componentDidUpdate(prevProps: I${1:Component}Props, prevState: I${1:Component}State): void {", 145 | " ${2:}", 146 | "}" 147 | ], 148 | "description": "Adds componentDidUpdate method which is invoked just after rendering when new props or state are retrieved." 149 | }, 150 | "componentWillMount": { 151 | "prefix": "spfx-cwm", 152 | "body": [ 153 | "public componentWillMount(): void {", 154 | " ${1:}", 155 | "}" 156 | ], 157 | "description": "Add componentWillMount method which is invoked before the component mounting happens." 158 | }, 159 | "componentDidMount": { 160 | "prefix": "spfx-cdm", 161 | "body": [ 162 | "public componentDidMount(): void {", 163 | " ${1:}", 164 | "}" 165 | ], 166 | "description": "Add componentDidMount method which is invoked after the component mounting and rendering happened." 167 | }, 168 | "componentWillReceiveProps": { 169 | "prefix": "spfx-cwrp", 170 | "body": [ 171 | "public componentWillReceiveProps(nextProps: I${1:Component}Props): void {", 172 | " ${2:}", 173 | "}" 174 | ], 175 | "description": "Add componentWillReceiveProps method which is invoked before a mounted component receives new prop." 176 | }, 177 | "shouldComponentUpdate": { 178 | "prefix": "spfx-scu", 179 | "body": [ 180 | "public shouldComponentUpdate(nextProps: I${1:Component}Props, nextState: I${1:Component}State): boolean {", 181 | " ${2:}", 182 | "}" 183 | ], 184 | "description": "Add shouldComponentUpdate method which can be used to let your component know the output is not affected by the current change in state or props." 185 | }, 186 | "useEffect": { 187 | "prefix": "spfx-effect", 188 | "body": [ 189 | "useEffect(() => {", 190 | " ${1:}", 191 | "});" 192 | ], 193 | "description": "The Effect Hook lets you perform side effects in function components. Similar like componentDidMount and componentDidUpdate." 194 | }, 195 | "useEffect once": { 196 | "prefix": "spfx-effect-once", 197 | "body": [ 198 | "useEffect(() => {", 199 | " ${1:}", 200 | "}, []);" 201 | ], 202 | "description": "The Effect Hook lets you perform side effects in function components. Only runs once, like componentDidMount." 203 | } 204 | } -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # SharePoint Framework Snippets 2 | 3 | This extension for Visual Studio Code adds snippets for SharePoint Framework solution development. It contains snippets for working in: 4 | 5 | - JavaScript (resource files) 6 | - React 7 | - SASS (SCSS) 8 | - TypeScript 9 | - JSON 10 | 11 | ![Extension usage](./assets/spfx-snippet-demo.gif) 12 | 13 | See the [changelog](./CHANGELOG.md) for the latest changes. 14 | 15 | ## Usage 16 | 17 | Type part of a snippet and press `enter`, the code will then be added into the file. Or press `Ctrl`+`Space` (Windows, Linux) or `Cmd`+`Space` (macOS) to activate snippets from within the editor. 18 | 19 | ### React 20 | 21 | | Snippet | Purpose | 22 | |---------|---------| 23 | | `spfx-fnc` | Creates a new React Stateless Function Component. | 24 | | `spfx-fnc-state` | Creates a new React Function Component with `useState` hook. | 25 | | `spfx-effect` | The `useEffect` Hook lets you perform side effects in function components. Similar like componentDidMount and componentDidUpdate. | 26 | | `spfx-effect-once` | The `useEffect` Hook lets you perform side effects in function components. Only runs once, like componentDidMount. | 27 | | `spfx-context` | Blueprint to create a `useContext` React hook that lets you read and subscribe to context from your component. | 28 | | `spfx-hook` | Blueprint to create a custom React hook. | 29 | | `spfx-hook-async` | Add code for adding an `useAsync` hook. | 30 | | `spfx-hook-prev` | Add code for adding an `usePrevious` hook. | 31 | | `spfx-rcc` | Creates a new React Component. | 32 | | `spfx-rcc-state` | Creates a new React Component with state initialization. | 33 | | `spfx-con` | Adds a React `constructor` method. | 34 | | `spfx-ist` | Initializes the React state. | 35 | | `spfx-sst` | Adds the `setState` block. | 36 | | `spfx-ucst` | Adds the `setState` block to correctly update the state based on previous value. | 37 | | `spfx-cwm` | Add `componentWillMount` method which is invoked before the component mounting happens. | 38 | | `spfx-cdm` | Add `componentDidMount` method which is invoked after the component mounting and rendering happened. | 39 | | `spfx-cwrp` | Add `componentWillReceiveProps` method which is invoked before a mounted component receives new prop. | 40 | | `spfx-scu` | Add `shouldComponentUpdate` method which can be used to let your component know the output is not affected by the current change in state or props. | 41 | | `spfx-cwu` | Adds `componentWillUpdate` method which is invoked just before rendering when new props or state are retrieved. | 42 | | `spfx-cwu` | Adds `componentDidUpdate` method which is invoked just after rendering when new props or state are retrieved. | 43 | 44 | ### TypeScript 45 | 46 | | Snippet | Purpose | 47 | |---------|---------| 48 | | `spfx-locale-ts` | Defines the content to create a new localization definition file. | 49 | | `spfx-wpinit` | Defines the web part `onInit` method. | 50 | | `spfx-render-elm` | Adds the code required to create and render a React component. | 51 | 52 | ### TypeScript & React 53 | 54 | | Snippet | Purpose | 55 | |---------|---------| 56 | | `spfx-sp-get` | Adds `SPHttpClient` get request. | 57 | | `spfx-http-get` | Adds `HttpClient` get request. | 58 | | `spfx-spget-import` | Adds `SPHttpClient` required import statement. | 59 | | `spfx-graph-get` | Adds code for the `MSGraphClient` get request. | 60 | | `spfx-aad-get` | Adds code for the `AadHttpClient` get request. | 61 | 62 | ### SASS (scss) 63 | 64 | | Snippet | Purpose | 65 | |---------|---------| 66 | | `spfx-fabcore` | Includes the Office UI Fabric Core styles into your SASS file. | 67 | | `spfx-fabreact` | Includes the core styles from the Office UI Fabric React package into your SASS file. | 68 | | `spfx-color-*` | Includes the color variable of your choice. Example: `spfx-color-themeDarker` adds `$ms-color-themeDarker`. | 69 | | `spfx-font` | Includes the font styling and allows you to choose the size. | 70 | | `spfx-fontWeight` | Includes the font weight styling and allows you to choose the weight. | 71 | | `spfx-fontSize` | Includes the font size styling and allows you to choose the size. | 72 | | `spfx-grid` | Includes grid styling: `@include ms-Grid;`. | 73 | | `spfx-grid-row` | Includes grid row styling: `@include ms-Grid-row;`. | 74 | | `spfx-grid-col` | Includes grid column styling: `@include ms-Grid-col;`. | 75 | | `spfx-grid-sm*` | Includes small grid and lets you choose the size between 1 - 12. | 76 | | `spfx-grid-md*` | Includes medium grid and lets you choose the size between 1 - 12. | 77 | | `spfx-grid-lg*` | Includes large grid and lets you choose the size between 1 - 12. | 78 | | `spfx-grid-xl*` | Includes x-large grid and lets you choose the size between 1 - 12. | 79 | | `spfx-grid-xxl*` | Includes xx-large grid and lets you choose the size between 1 - 12. | 80 | | `spfx-grid-xxxl*` | Includes xxx-large grid and lets you choose the size between 1 - 12. | 81 | 82 | ### JavaScript 83 | 84 | | Snippet | Purpose | 85 | |---------|---------| 86 | | `spfx-locale-js` | Defines the content to create a new localization definition file. | 87 | | `spfx-gulp-task` | Defines the content for a new Gulp task. | 88 | | `spfx-gulp-subtask` | Defines the content for a new Gulp sub-task. | 89 | | `spfx-webpack` | Defines the content extending the webpack configuration. | 90 | 91 | ### JSON 92 | 93 | | Snippet | Purpose | 94 | |---------|---------| 95 | | `spfx-webapi` | Includes the `webApiPermissionRequests` property with `Microsoft Graph` as the resource. | 96 | | `spfx-add-permission` | Includes a new permission object (resource + scope). | 97 | | `spfx-scope-calendar` | Include one of the Microsoft Graph `calendar` scopes (CHOICE). | 98 | | `spfx-scope-contacts` | Include one of the Microsoft Graph `contacts` scopes (CHOICE). | 99 | | `spfx-scope-directory` | Include one of the Microsoft Graph `directory` scopes (CHOICE). | 100 | | `spfx-scope-files` | Include one of the Microsoft Graph `files` scopes (CHOICE). | 101 | | `spfx-scope-group` | Include one of the Microsoft Graph `group` scopes (CHOICE). | 102 | | `spfx-scope-mail` | Include one of the Microsoft Graph `mail` scopes (CHOICE). | 103 | | `spfx-scope-sites` | Include one of the Microsoft Graph `sites` scopes (CHOICE). | 104 | | `spfx-scope-tasks` | Include one of the Microsoft Graph `tasks` scopes (CHOICE). | 105 | | `spfx-scope-user` | Include one of the Microsoft Graph `user` scopes (CHOICE). | 106 | 107 | ## Feedback and snippet ideas 108 | 109 | Feedback and/or snippet ideas are always welcome. Please submit them via creating an issue in the extension repository: [issue list](https://github.com/estruyf/vscode-spfx-snippets/issues). 110 | 111 |
112 |
113 | 114 |

115 | 116 | SPFx Snippets visitors 117 | 118 |

119 | -------------------------------------------------------------------------------- /snippets/common-react-ts.json: -------------------------------------------------------------------------------- 1 | { 2 | "spfx-spget-import": { 3 | "prefix": "spfx-spget-import", 4 | "body": [ 5 | "import { SPHttpClient, SPHttpClientResponse } from \"@microsoft/sp-http\";" 6 | ], 7 | "description": "Adds SPHttpClient required import statement." 8 | }, 9 | "SPHttpClient get": { 10 | "prefix": "spfx-sp-get", 11 | "body": [ 12 | "this.context.spHttpClient.get(\"${1:https://contoso.sharepoint.com/_api/web/lists}\", SPHttpClient.configurations.v1)", 13 | ".then((data: SPHttpClientResponse) => data.json())", 14 | ".then((data: ${2:any}) => {", 15 | " ${3:}", 16 | "});" 17 | ], 18 | "description": "Adds SPHttpClient get request." 19 | }, 20 | "HttpClient get": { 21 | "prefix": "spfx-http-get", 22 | "body": [ 23 | "this.context.httpClient.get(\"${1:https://your-web-api}\", HttpClient.configurations.v1)", 24 | ".then((data: HttpClientResponse) => data.json())", 25 | ".then((data: ${2:any}) => {", 26 | " ${3:}", 27 | "});" 28 | ], 29 | "description": "Adds HttpClient get request." 30 | }, 31 | "MSGraphClient get": { 32 | "prefix": "spfx-graph-get", 33 | "body": [ 34 | "const graphClient: MSGraphClient = this.props.context.serviceScope.consume(", 35 | " MSGraphClient.serviceKey", 36 | ");", 37 | "", 38 | "graphClient.api(\"me\").version(\"v1.0\").select(\"displayName,mail,userPrincipalName\").get((err, res) => {", 39 | " if (err) {", 40 | " console.error(err);", 41 | " return;", 42 | " }", 43 | "", 44 | " ${1:}", 45 | "});" 46 | ], 47 | "description": "Adds code for the MSGraphClient get call." 48 | }, 49 | "AadClient get": { 50 | "prefix": "spfx-aad-get", 51 | "body": [ 52 | "const aadClient: AadHttpClient = new AadHttpClient(", 53 | " this.props.context.serviceScope,", 54 | " \"https://graph.microsoft.com\"", 55 | ");", 56 | "", 57 | "aadClient.get(`${1:https://graph.microsoft.com/v1.0/me}`, AadHttpClient.configurations.v1)", 58 | ".then((response: HttpClientResponse) => {", 59 | " return response.json();", 60 | "})", 61 | ".then((data: any) => {", 62 | " ${2:}", 63 | "});" 64 | ], 65 | "description": "Adds code for the AadHttpClient get call." 66 | }, 67 | "React useContext": { 68 | "prefix": "spfx-context", 69 | "body": [ 70 | "import * as React from 'react';", 71 | "", 72 | "interface I${1:Custom}ProviderProps { }", 73 | "", 74 | "const ${1:Custom}Context = React.createContext(undefined);", 75 | "", 76 | "const ${1:Custom}Provider: React.FunctionComponent = ({ children }: React.PropsWithChildren) => {", 77 | " return (", 78 | " <${1:Custom}Context.Provider", 79 | " value={{}}", 80 | " >", 81 | " {children}", 82 | " ", 83 | " )", 84 | "};", 85 | "", 86 | "const use${1:Custom}Context = (): I${1:Custom}ProviderProps => {", 87 | " const loadFunc = React.useContext(${1:Custom}Context);", 88 | "", 89 | " if (loadFunc === undefined) {", 90 | " throw new Error('use${1:Custom}Context must be used within the ${1:Custom}Provider');", 91 | " }", 92 | "", 93 | " return loadFunc;", 94 | "};", 95 | "", 96 | "${1:Custom}Context.displayName = '${1:Custom}Context';", 97 | "${1:Custom}Provider.displayName = '${1:Custom}Provider';", 98 | "", 99 | "export { ${1:Custom}Provider, use${1:Custom}Context };" 100 | ], 101 | "description": "Blueprint to create a useContext React hook that lets you read and subscribe to context from your component." 102 | }, 103 | "Custom Hook": { 104 | "prefix": "spfx-hook", 105 | "body": [ 106 | "import { useState, useEffect } from 'react';", 107 | "", 108 | "export default function ${1:useCustom}(options?: any) {", 109 | " const [value, setValue] = useState('');", 110 | "", 111 | " useEffect(() => {", 112 | " async function fetchData() {", 113 | " setValue('');", 114 | " }", 115 | "", 116 | " fetchData();", 117 | " }, [options]);", 118 | "", 119 | " return {", 120 | " value", 121 | " };", 122 | "}" 123 | ], 124 | "description": "Blueprint to create a custom React hook" 125 | }, 126 | "React usePrevious hook": { 127 | "prefix": "spfx-hook-prev", 128 | "description": "Add code for adding an `usePrevious` hook.", 129 | "body": [ 130 | "import { useEffect, useRef } from 'react';", 131 | "", 132 | "export function usePrevious(value: T): T | undefined {", 133 | " const ref = useRef();", 134 | "", 135 | " useEffect(() => {", 136 | " ref.current = value;", 137 | " }, [value]);", 138 | "", 139 | " return ref.current;", 140 | "}" 141 | ] 142 | }, 143 | "React useAsync hook": { 144 | "prefix": "spfx-hook-async", 145 | "description": "Add code for adding an `useAsync` hook.", 146 | "body": [ 147 | "import { useState, useEffect, useCallback } from 'react';", 148 | "", 149 | "/**", 150 | " * ${1:Async function description}", 151 | " * @param asyncFuncRef The reference to the async function to call", 152 | " * @param callOnInit Call the function when the hook gets initiated. Default: true.", 153 | " * @param isFetch Specifies if the function performs a fetch call. The JSON response will automatically be fetched.", 154 | " */", 155 | "export function useAsync(asyncFuncRef: () => Promise, callOnInit: boolean, isFetch: boolean = false) {", 156 | " const [ loading, setLoading ] = useState(false);", 157 | " const [ value, setValue ] = useState(null);", 158 | " const [ error, setError ] = useState(null);", 159 | "", 160 | " const asyncFuncCall = useCallback(async () => {", 161 | " setLoading(true);", 162 | " setValue(null);", 163 | " setError(null);", 164 | "", 165 | " try {", 166 | " const data: any = await asyncFuncRef();", 167 | " if (isFetch) {", 168 | " setValue(await data.json());", 169 | " } else {", 170 | " setValue(data)", 171 | " }", 172 | " setLoading(false);", 173 | " } catch (e) {", 174 | " setError(e);", 175 | " setLoading(false);", 176 | " }", 177 | " }, [asyncFuncRef]);", 178 | "", 179 | " useEffect(() => {", 180 | " if (callOnInit) {", 181 | " asyncFuncCall();", 182 | " }", 183 | " }, [asyncFuncCall, callOnInit, isFetch]);", 184 | "", 185 | " return { asyncFuncCall, loading, value, error };", 186 | "}" 187 | ] 188 | } 189 | } -------------------------------------------------------------------------------- /snippets/fabric-colors.json: -------------------------------------------------------------------------------- 1 | { 2 | "$ms-color-themeDarker": { 3 | "prefix": "spfx-color-themeDarker", 4 | "body": "\\$ms-color-themeDarker", 5 | "description": "default: #004578" 6 | }, 7 | "$ms-color-themeDark": { 8 | "prefix": "spfx-color-themeDark", 9 | "body": "\\$ms-color-themeDark", 10 | "description": "default: #005a9e" 11 | }, 12 | "$ms-color-themeDarkAlt": { 13 | "prefix": "spfx-color-themeDarkAlt", 14 | "body": "\\$ms-color-themeDarkAlt", 15 | "description": "default: #106ebe" 16 | }, 17 | "$ms-color-themePrimary": { 18 | "prefix": "spfx-color-themePrimary", 19 | "body": "\\$ms-color-themePrimary", 20 | "description": "default: #0078d7" 21 | }, 22 | "$ms-color-themeSecondary": { 23 | "prefix": "spfx-color-themeSecondary", 24 | "body": "\\$ms-color-themeSecondary", 25 | "description": "default: #2b88d8" 26 | }, 27 | "$ms-color-themeTertiary": { 28 | "prefix": "spfx-color-themeTertiary", 29 | "body": "\\$ms-color-themeTertiary", 30 | "description": "default: #71afe5" 31 | }, 32 | "$ms-color-themeLight": { 33 | "prefix": "spfx-color-themeLight", 34 | "body": "\\$ms-color-themeLight", 35 | "description": "default: #c7e0f4" 36 | }, 37 | "$ms-color-themeLighter": { 38 | "prefix": "spfx-color-themeLighter", 39 | "body": "\\$ms-color-themeLighter", 40 | "description": "default: #deecf9" 41 | }, 42 | "$ms-color-themeLighterAlt": { 43 | "prefix": "spfx-color-themeLighterAlt", 44 | "body": "\\$ms-color-themeLighterAlt", 45 | "description": "default: #eff6fc" 46 | }, 47 | "$ms-color-black": { 48 | "prefix": "spfx-color-black", 49 | "body": "\\$ms-color-black", 50 | "description": "default: #000000" 51 | }, 52 | "$ms-color-neutralDark": { 53 | "prefix": "spfx-color-neutralDark", 54 | "body": "\\$ms-color-neutralDark", 55 | "description": "default: #212121" 56 | }, 57 | "$ms-color-neutralPrimary": { 58 | "prefix": "spfx-color-neutralPrimary", 59 | "body": "\\$ms-color-neutralPrimary", 60 | "description": "default: #333333" 61 | }, 62 | "$ms-color-neutralPrimaryAlt": { 63 | "prefix": "spfx-color-neutralPrimaryAlt", 64 | "body": "\\$ms-color-neutralPrimaryAlt", 65 | "description": "default: #3c3c3c" 66 | }, 67 | "$ms-color-neutralSecondary": { 68 | "prefix": "spfx-color-neutralSecondary", 69 | "body": "\\$ms-color-neutralSecondary", 70 | "description": "default: #666666" 71 | }, 72 | "$ms-color-neutralSecondaryAlt": { 73 | "prefix": "spfx-color-neutralSecondaryAlt", 74 | "body": "\\$ms-color-neutralSecondaryAlt", 75 | "description": "default: #767676" 76 | }, 77 | "$ms-color-neutralTertiary": { 78 | "prefix": "spfx-color-neutralTertiary", 79 | "body": "\\$ms-color-neutralTertiary", 80 | "description": "default: #a6a6a6" 81 | }, 82 | "$ms-color-neutralTertiaryAlt": { 83 | "prefix": "spfx-color-neutralTertiaryAlt", 84 | "body": "\\$ms-color-neutralTertiaryAlt", 85 | "description": "default: #c8c8c8" 86 | }, 87 | "$ms-color-neutralQuaternary": { 88 | "prefix": "spfx-color-neutralQuaternary", 89 | "body": "\\$ms-color-neutralQuaternary", 90 | "description": "default: #d0d0d0" 91 | }, 92 | "$ms-color-neutralQuaternaryAlt": { 93 | "prefix": "spfx-color-neutralQuaternaryAlt", 94 | "body": "\\$ms-color-neutralQuaternaryAlt", 95 | "description": "default: #dadada" 96 | }, 97 | "$ms-color-neutralLight": { 98 | "prefix": "spfx-color-neutralLight", 99 | "body": "\\$ms-color-neutralLight", 100 | "description": "default: #eaeaea" 101 | }, 102 | "$ms-color-neutralLighter": { 103 | "prefix": "spfx-color-neutralLighter", 104 | "body": "\\$ms-color-neutralLighter", 105 | "description": "default: #f4f4f4" 106 | }, 107 | "$ms-color-neutralLighterAlt": { 108 | "prefix": "spfx-color-neutralLighterAlt", 109 | "body": "\\$ms-color-neutralLighterAlt", 110 | "description": "default: #f8f8f8" 111 | }, 112 | "$ms-color-white": { 113 | "prefix": "spfx-color-white", 114 | "body": "\\$ms-color-white", 115 | "description": "default: #ffffff" 116 | }, 117 | "$ms-color-blackTranslucent40": { 118 | "prefix": "spfx-color-blackTranslucent40", 119 | "body": "\\$ms-color-blackTranslucent40", 120 | "description": "default: rgba(0,0,0,.4)" 121 | }, 122 | "$ms-color-whiteTranslucent40": { 123 | "prefix": "spfx-color-whiteTranslucent40", 124 | "body": "\\$ms-color-whiteTranslucent40", 125 | "description": "default: rgba(255,255,255,.4)" 126 | }, 127 | "$ms-color-yellow": { 128 | "prefix": "spfx-color-yellow", 129 | "body": "\\$ms-color-yellow", 130 | "description": "default: #ffb900" 131 | }, 132 | "$ms-color-yellowLight": { 133 | "prefix": "spfx-color-yellowLight", 134 | "body": "\\$ms-color-yellowLight", 135 | "description": "default: #fff100" 136 | }, 137 | "$ms-color-orange": { 138 | "prefix": "spfx-color-orange", 139 | "body": "\\$ms-color-orange", 140 | "description": "default: #d83b01" 141 | }, 142 | "$ms-color-orangeLight": { 143 | "prefix": "spfx-color-orangeLight", 144 | "body": "\\$ms-color-orangeLight", 145 | "description": "default: #ff8c00" 146 | }, 147 | "$ms-color-redDark": { 148 | "prefix": "spfx-color-redDark", 149 | "body": "\\$ms-color-redDark", 150 | "description": "default: #a80000" 151 | }, 152 | "$ms-color-red": { 153 | "prefix": "spfx-color-red", 154 | "body": "\\$ms-color-red", 155 | "description": "default: #e81123" 156 | }, 157 | "$ms-color-magentaDark": { 158 | "prefix": "spfx-color-magentaDark", 159 | "body": "\\$ms-color-magentaDark", 160 | "description": "default: #5c005c" 161 | }, 162 | "$ms-color-magenta": { 163 | "prefix": "spfx-color-magenta", 164 | "body": "\\$ms-color-magenta", 165 | "description": "default: #b4009e" 166 | }, 167 | "$ms-color-magentaLight": { 168 | "prefix": "spfx-color-magentaLight", 169 | "body": "\\$ms-color-magentaLight", 170 | "description": "default: #e3008c" 171 | }, 172 | "$ms-color-purpleDark": { 173 | "prefix": "spfx-color-purpleDark", 174 | "body": "\\$ms-color-purpleDark", 175 | "description": "default: #32145a" 176 | }, 177 | "$ms-color-purple": { 178 | "prefix": "spfx-color-purple", 179 | "body": "\\$ms-color-purple", 180 | "description": "default: #5c2d91" 181 | }, 182 | "$ms-color-purpleLight": { 183 | "prefix": "spfx-color-purpleLight", 184 | "body": "\\$ms-color-purpleLight", 185 | "description": "default: #b4a0ff" 186 | }, 187 | "$ms-color-blueDark": { 188 | "prefix": "spfx-color-blueDark", 189 | "body": "\\$ms-color-blueDark", 190 | "description": "default: #002050" 191 | }, 192 | "$ms-color-blueMid": { 193 | "prefix": "spfx-color-blueMid", 194 | "body": "\\$ms-color-blueMid", 195 | "description": "default: #00188f" 196 | }, 197 | "$ms-color-blue": { 198 | "prefix": "spfx-color-blue", 199 | "body": "\\$ms-color-blue", 200 | "description": "default: #0078d7" 201 | }, 202 | "$ms-color-blueLight": { 203 | "prefix": "spfx-color-blueLight", 204 | "body": "\\$ms-color-blueLight", 205 | "description": "default: #00bcf2" 206 | }, 207 | "$ms-color-tealDark": { 208 | "prefix": "spfx-color-tealDark", 209 | "body": "\\$ms-color-tealDark", 210 | "description": "default: #004b50" 211 | }, 212 | "$ms-color-teal": { 213 | "prefix": "spfx-color-teal", 214 | "body": "\\$ms-color-teal", 215 | "description": "default: #008272" 216 | }, 217 | "$ms-color-tealLight": { 218 | "prefix": "spfx-color-tealLight", 219 | "body": "\\$ms-color-tealLight", 220 | "description": "default: #00b294" 221 | }, 222 | "$ms-color-greenDark": { 223 | "prefix": "spfx-color-greenDark", 224 | "body": "\\$ms-color-greenDark", 225 | "description": "default: #004b1c" 226 | }, 227 | "$ms-color-green": { 228 | "prefix": "spfx-color-green", 229 | "body": "\\$ms-color-green", 230 | "description": "default: #107c10" 231 | }, 232 | "$ms-color-greenLight": { 233 | "prefix": "spfx-color-greenLight", 234 | "body": "\\$ms-color-greenLight", 235 | "description": "default: #bad80a" 236 | }, 237 | "$ms-color-error": { 238 | "prefix": "spfx-color-error", 239 | "body": "\\$ms-color-error", 240 | "description": "default: #a80000" 241 | }, 242 | "$ms-color-errorText": { 243 | "prefix": "spfx-color-errorText", 244 | "body": "\\$ms-color-errorText", 245 | "description": "default: #333333" 246 | }, 247 | "$ms-color-errorBackground": { 248 | "prefix": "spfx-color-errorBackground", 249 | "body": "\\$ms-color-errorBackground", 250 | "description": "default: #fde7e9" 251 | }, 252 | "$ms-color-success": { 253 | "prefix": "spfx-color-success", 254 | "body": "\\$ms-color-success", 255 | "description": "default: #107c10" 256 | }, 257 | "$ms-color-successText": { 258 | "prefix": "spfx-color-successText", 259 | "body": "\\$ms-color-successText", 260 | "description": "default: #333333" 261 | }, 262 | "$ms-color-successBackground": { 263 | "prefix": "spfx-color-successBackground", 264 | "body": "\\$ms-color-successBackground", 265 | "description": "default: #dff6dd" 266 | }, 267 | "$ms-color-alert": { 268 | "prefix": "spfx-color-alert", 269 | "body": "\\$ms-color-alert", 270 | "description": "default: #d83b01" 271 | }, 272 | "$ms-color-alertText": { 273 | "prefix": "spfx-color-alertText", 274 | "body": "\\$ms-color-alertText", 275 | "description": "default: #333333" 276 | }, 277 | "$ms-color-alertBackground": { 278 | "prefix": "spfx-color-alertBackground", 279 | "body": "\\$ms-color-alertBackground", 280 | "description": "default: #deecf9" 281 | }, 282 | "$ms-color-warning": { 283 | "prefix": "spfx-color-warning", 284 | "body": "\\$ms-color-warning", 285 | "description": "default: #767676" 286 | }, 287 | "$ms-color-warningText": { 288 | "prefix": "spfx-color-warningText", 289 | "body": "\\$ms-color-warningText", 290 | "description": "default: #333333" 291 | }, 292 | "$ms-color-warningBackground": { 293 | "prefix": "spfx-color-warningBackground", 294 | "body": "\\$ms-color-warningBackground", 295 | "description": "default: #fff4ce" 296 | }, 297 | "$ms-color-severeWarning": { 298 | "prefix": "spfx-color-severeWarning", 299 | "body": "\\$ms-color-severeWarning", 300 | "description": "default: #d83b01" 301 | }, 302 | "$ms-color-severeWarningText": { 303 | "prefix": "spfx-color-severeWarningText", 304 | "body": "\\$ms-color-severeWarningText", 305 | "description": "default: #333333" 306 | }, 307 | "$ms-color-severeWarningBackground": { 308 | "prefix": "spfx-color-severeWarningBackground", 309 | "body": "\\$ms-color-severeWarningBackground", 310 | "description": "default: #fed9cc" 311 | }, 312 | "$ms-color-info": { 313 | "prefix": "spfx-color-info", 314 | "body": "\\$ms-color-info", 315 | "description": "default: #767676" 316 | }, 317 | "$ms-color-infoText": { 318 | "prefix": "spfx-color-infoText", 319 | "body": "\\$ms-color-infoText", 320 | "description": "default: #333333" 321 | }, 322 | "$ms-color-infoBackground": { 323 | "prefix": "spfx-color-infoBackground", 324 | "body": "\\$ms-color-infoBackground", 325 | "description": "default: #f4f4f4" 326 | }, 327 | "$ms-color-orangeLighter": { 328 | "prefix": "spfx-color-orangeLighter", 329 | "body": "\\$ms-color-orangeLighter", 330 | "description": "default: #ea4300" 331 | } 332 | } --------------------------------------------------------------------------------