Skip to content

Latest commit

 

History

History
118 lines (96 loc) · 6.29 KB

README.md

File metadata and controls

118 lines (96 loc) · 6.29 KB
Raw

SharePoint Framework Snippets

This extension for Visual Studio Code adds snippets for SharePoint Framework solution development. It contains snippets for working in:

  • JavaScript (resource files)
  • React
  • SASS (SCSS)
  • TypeScript
  • JSON

Extension usage

See the changelog for the latest changes.

Usage

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.

React

Snippet Purpose
spfx-fnc Creates a new React Stateless Function Component.
spfx-fnc-state Creates a new React Function Component with useState hook.
spfx-effect The useEffect Hook lets you perform side effects in function components. Similar like componentDidMount and componentDidUpdate.
spfx-effect-once The useEffect Hook lets you perform side effects in function components. Only runs once, like componentDidMount.
spfx-context Blueprint to create a useContext React hook that lets you read and subscribe to context from your component.
spfx-hook Blueprint to create a custom React hook.
spfx-hook-async Add code for adding an useAsync hook.
spfx-hook-prev Add code for adding an usePrevious hook.
spfx-rcc Creates a new React Component.
spfx-rcc-state Creates a new React Component with state initialization.
spfx-con Adds a React constructor method.
spfx-ist Initializes the React state.
spfx-sst Adds the setState block.
spfx-ucst Adds the setState block to correctly update the state based on previous value.
spfx-cwm Add componentWillMount method which is invoked before the component mounting happens.
spfx-cdm Add componentDidMount method which is invoked after the component mounting and rendering happened.
spfx-cwrp Add componentWillReceiveProps method which is invoked before a mounted component receives new prop.
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.
spfx-cwu Adds componentWillUpdate method which is invoked just before rendering when new props or state are retrieved.
spfx-cwu Adds componentDidUpdate method which is invoked just after rendering when new props or state are retrieved.

TypeScript

Snippet Purpose
spfx-locale-ts Defines the content to create a new localization definition file.
spfx-wpinit Defines the web part onInit method.
spfx-render-elm Adds the code required to create and render a React component.

TypeScript & React

Snippet Purpose
spfx-sp-get Adds SPHttpClient get request.
spfx-http-get Adds HttpClient get request.
spfx-spget-import Adds SPHttpClient required import statement.
spfx-graph-get Adds code for the MSGraphClient get request.
spfx-aad-get Adds code for the AadHttpClient get request.

SASS (scss)

Snippet Purpose
spfx-fabcore Includes the Office UI Fabric Core styles into your SASS file.
spfx-fabreact Includes the core styles from the Office UI Fabric React package into your SASS file.
spfx-color-* Includes the color variable of your choice. Example: spfx-color-themeDarker adds $ms-color-themeDarker.
spfx-font Includes the font styling and allows you to choose the size.
spfx-fontWeight Includes the font weight styling and allows you to choose the weight.
spfx-fontSize Includes the font size styling and allows you to choose the size.
spfx-grid Includes grid styling: @include ms-Grid;.
spfx-grid-row Includes grid row styling: @include ms-Grid-row;.
spfx-grid-col Includes grid column styling: @include ms-Grid-col;.
spfx-grid-sm* Includes small grid and lets you choose the size between 1 - 12.
spfx-grid-md* Includes medium grid and lets you choose the size between 1 - 12.
spfx-grid-lg* Includes large grid and lets you choose the size between 1 - 12.
spfx-grid-xl* Includes x-large grid and lets you choose the size between 1 - 12.
spfx-grid-xxl* Includes xx-large grid and lets you choose the size between 1 - 12.
spfx-grid-xxxl* Includes xxx-large grid and lets you choose the size between 1 - 12.

JavaScript

Snippet Purpose
spfx-locale-js Defines the content to create a new localization definition file.
spfx-gulp-task Defines the content for a new Gulp task.
spfx-gulp-subtask Defines the content for a new Gulp sub-task.
spfx-webpack Defines the content extending the webpack configuration.

JSON

Snippet Purpose
spfx-webapi Includes the webApiPermissionRequests property with Microsoft Graph as the resource.
spfx-add-permission Includes a new permission object (resource + scope).
spfx-scope-calendar Include one of the Microsoft Graph calendar scopes (CHOICE).
spfx-scope-contacts Include one of the Microsoft Graph contacts scopes (CHOICE).
spfx-scope-directory Include one of the Microsoft Graph directory scopes (CHOICE).
spfx-scope-files Include one of the Microsoft Graph files scopes (CHOICE).
spfx-scope-group Include one of the Microsoft Graph group scopes (CHOICE).
spfx-scope-mail Include one of the Microsoft Graph mail scopes (CHOICE).
spfx-scope-sites Include one of the Microsoft Graph sites scopes (CHOICE).
spfx-scope-tasks Include one of the Microsoft Graph tasks scopes (CHOICE).
spfx-scope-user Include one of the Microsoft Graph user scopes (CHOICE).

Feedback and snippet ideas

Feedback and/or snippet ideas are always welcome. Please submit them via creating an issue in the extension repository: issue list.



SPFx Snippets visitors