Framer X Code Snippets for VS Code

This extension provides Framer X & React code snippets for TypeScript and ES6.

Installation

In the command palette (cmd-shift-p), select Install Extension and type Framer X Code Snippets for VS Code.

Supported languages (file extensions)

TypeScript React (.tsx)
TypeScript (.ts)
JavaScript React (.jsx)
JavaScript (.js)

Snippets

The ⇥ means the TAB → key.

Framer X Templates

Prefix	Snippet
`xproperty ⇥`	"import { addPropertyControls, ControlType } from 'framer'..."
`xframe ⇥`	"import { Frame } from 'framer'"

Framer X Property Controls

Prefix	Snippet
`xcontrols ⇥`	"static propertyControls: PropertyControls = {}"
`xstring ⇥`	"text: {type: ControlType.String, ...}"
`xarray ⇥`	"children: {type: ControlType.Array, ...}"
`xcolor ⇥`	"color: {type: ControlType.Color, ...}"
`xcomponent ⇥`	"children: {type: ControlType.ComponentInstance, ...}"
`ximage ⇥`	"image: {type: ControlType.Image, ...}"
`xnumber ⇥`	"number: {type: ControlType.Number, ...}"
`xfusednum ⇥`	"fusedNumber: {type: ControlType.FusedNumber, ...}"
`xbool ⇥`	"boolean: {type: ControlType.Boolean, ...}"
`xsegenum ⇥`	"segment: {type: ControlType.SegmentedEnum, ...}"
`xenum ⇥`	"enum: {type: ControlType.Enum, ...}"
`xfile ⇥`	"file: {type: ControlType.File, ...}"
`xhideprop ⇥`	"...hidden(props) {return props.toggle === false}"

React

Prefix	Snippet
`ximp ⇥`	"import { ModuleName } from 'module'"

React Hooks

Prefix	Snippet
`xus ⇥`	useState Hook
`xue ⇥`	useEffect Hook
`xuc ⇥`	useContext Hook
`xur ⇥`	useReducer Hook
`xucb ⇥`	useCallback Hook
`xum ⇥`	useMemo Hook
`xuref ⇥`	useRef Hook
`xuih ⇥`	useImperativeHandle Hook
`xule ⇥`	useLayoutEffect Hook
`xudv ⇥`	useDebugValue Hook

Snippet list

Framer X Snippets:

Framer X Functional Component (Outdated pattern)
Framer X Class Component (Outdated pattern)
Import Frame component

Framer X Property Controls:

Property Control Static Method
Control Type Boolean
Control Type Number
Control Type String
Control Type Color
Control Type Image
Control Type File
Control Type Enum
Control Type SegmentedEnum
Control Type FusedNumber
Hide Control Types Pattern
Control Type ComponentInstance
Control Type Array

React Custom Hooks

Prefix	Snippet
`xui ⇥`	useIdentifier Hook
`xusv ⇥`	useStaticValue Hook

Utility Functions

Prefix	Snippet
`xrc ⇥`	"function randomColor() {...}"

Tips & Tricks

To get the most of this extension I recommend also to install:

ES7 React/Redux/React-Native/JS snippets, comes with more than +100 snippets.
JavaScript Snippet Pack, comes with a variety of useful snippets for debugging (cl ⇥ console.log) and traditional DOM manipulation methods.

Credits

New React Hooks snippets contains code samples from the following projects:

New snippet prefixes inspired by Aroa Gil Bo, Framer X Property Control Template & Snippets

Feedback & Contributions

Any type of feedback will be extremely useful. I encourage you to write a review.

Have you found something wrong/missing or you just want to bring an idea? Please open a new issue and tell me more about it! 🙌🏻

If you have a stash of great code samples, feel free to share them with the rest of the community. Please create a pull request! ✨

Framer X Code Snippets

David Galavotti