TEAF Snippets for vscode
This extension contains snippets for TEAF development.
Supported languaguages
Snippets
Bellow are listed supported snippets
General snippets
| Trigger |
Content |
interfaceInstanceOf→ |
Creates a new Interface with support of instanceof comparison |
rfc→ |
Template for typed react functional component |
fwdRef→ |
Template for typed react forwardRef component |
useState→ |
Creates strongly typed useState with default value |
useEffect→ |
Creates template for useEffect with optional cleanup function |
destruct→ |
Object destructing |
tsig→ |
Creates typescript //@ts-ignore directive |
region→ |
Creates typescript //#region directive`` |
cl→ |
Creates console.log with //eslint-disable-next-line no-console directive |
Redux Actions Snippets
| Trigger |
Content |
actionCreator→ |
Creates a redux action creator |
actionInterface→ |
Creates an interface for redux action |
actionConstant→ |
Creates constant name for redux action |
selector→ |
Creates redux state selector |
createSel→ |
Creates reselect selector using createSelector |
Import/Export snippets
| Trigger |
Content |
expall→ |
Export all from package |
ims→ |
Import sinon package |
imf→ |
Import { whatever } from "some package" |
imrc→ |
Inserts imports for redux connected components |
Connected Components Snippets
| Trigger |
Content |
omitContainerProps→ |
Creates template for connected component props |
stateProps→ |
Creates StateProps type |
dispatchProps→ |
Creates DispatchProps type |
connect→ |
Connects presentational component with props |
mapStateToProps→ |
Creates mapStateToProps variable used when connecting presentational components |
createMapStateToProps→ |
Creates function createMapStateToProps returning MapStateToProps |
mapDispatchToProps→ |
Creates mapDispatchToProps variable used when connecting presentational components |
Samples
General snippets
Interface with instanceof
Creates a new Interface with support of instanceof comparison.
Placeholders
- Action Name (required)
- Extends (optional)
- Properties (optional)
- Methods (optional)
- Interfaces (optional)
- Conditions in
instanceof (optional)
React Functional Component
Template for typed react functional component.
Placeholders
- Component Name (required, name of file is default value)
- BemClassName (optional)
- Type of reference for React component (eg HTMLButtonElement, etc.)
- Props (optional,
children default value)
- JSDoc (optional)
React forwardRef Component
Template for typed react forwardRef component.
Placeholders
- Component Name (required, name of file is default value)
- BemClassName (optional)
- Props (optional,
children default value)
- Props (optional,
children default value)
- JSDoc (optional)
useState
Creates strongly typed useState with default value.
useEffect
Creates template for useEffect with optional cleanup function.
Placeholders
- Dependency Array (optional)
- Cleanup function (optional)
- JSDoc (optional)
Object destructing (destruct)
Picks members from an object and place them in standalone variables
Placeholders
- Object Name (required)
- Variable names (required)
- Rest properties (optional)
const { variable1, variable1, ...rest} = objectName;
Redux Actions Snippets
Action Creator (actionCreator)
Creates a redux action creator.
Placeholders
- Action Name (required)
- Payload (optional)
- Meta (optional)
- JSDoc (optional)
Action Interface (actionInterface)
Creates an interface for redux action
Placeholders
- Action Name (required)
- Extends (optional)
- Payload (optional)
- JSDoc (optional)
Action Name Constant (actionConstant)
Creates constant name for redux action
Placeholders
export const ACTION_NAME = createActionType("ACTION_NAME");
Import/Export snippets (expall)
Export all
Creates syntax for export all from package.
Import sinon package (ims)
creates import for sinon package.
Import { whatever } from "some package" (imf)
Import redux stuff for connected components (imrc)
Creates type imports from react and react-redux a multiweb/types/react packages needed for connecting componens (i.e. types MapStateProps, IAppState and others). Also creates import for presentational component and its props.
Connected Components Snippets
OmitCointerProps
Snippet used when connection presentational component to redux. It creates props for connected component and omits props connected in StateProps or DispatchProps.
Placeholders
- Component Name (required, name of file is default value)
- Own props (optional)
- JSDoc (optional)
stateProps
Creates StateProps type picking props from presentational component.
dispatchProps
Creates DispatchProps type picking props from presentational component.
connect
Connects presentational component with props.
mapStateToProps
Creates mapStateToProps variable used when connecting presentational components.
Placeholders
- Component Name (required, name of file is default value)
- Create
StateProps or skip them (optional)
- Own component props entering mapStateToProps (optional)
createMapStateToProps
Creates function createMapStateToProps returning `MapStateToProps.
Placeholders
- Component Name (required, name of file is default value)
- Create
StateProps or skip them (optional)
- Own component props entering mapStateToProps (optional)
mapDispatchToProps
Creates mapDispatchToProps variable used when connecting presentational components.
Placeholders
- Component Name (required, name of file is default value)
- Create
DispatchProps or skip them (optional)
- Own component props entering mapStateToProps (optional)
