Created
October 13, 2020 19:06
-
-
Save MattWilliamsDev/d145c01a1b27bcbda47973f2639f7cb3 to your computer and use it in GitHub Desktop.
JS/JSX, & TS Snippets for VSCode
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| { | |
| "console log": { | |
| "prefix": "log", | |
| "body": [ | |
| "console.log( '$1', $2 );" | |
| ], | |
| "description": "Log output to console" | |
| }, | |
| "react functional component": { | |
| "prefix": "react", | |
| "body": [ | |
| "import { arrayOf, node, oneOfType, string } from \"prop-types\";", | |
| "import cn from \"classnames\";", | |
| "import React from \"react\";", | |
| "", | |
| "export function $1({ children, className, $2 }) {", | |
| " return (", | |
| " $3", | |
| " );", | |
| "}", | |
| "", | |
| "$1.propTypes = {", | |
| " children: oneOfType([arrayOf(node), node]),", | |
| " className: string,", | |
| "};", | |
| "", | |
| "$1.defaultProps = {", | |
| " children: undefined,", | |
| " className: undefined,", | |
| "};", | |
| "", | |
| "export default $1;", | |
| "" | |
| ], | |
| "description": "Create new React functional component" | |
| }, | |
| "react hook": { | |
| "prefix": "hook", | |
| "body": [ | |
| "import React from \"react\";", | |
| "", | |
| "export function $1($2) {", | |
| " $3", | |
| "}", | |
| "", | |
| "export default $1;", | |
| "" | |
| ], | |
| "description": "Create new custom React hook" | |
| }, | |
| "react useCallback": { | |
| "prefix": "useCallback", | |
| "description": "Creates a new callback function with useCallback", | |
| "body": [ | |
| "const $1 = useCallback(($2) => {$3}, [$4]);" | |
| ] | |
| }, | |
| "react useMemo": { | |
| "prefix": "useMemo", | |
| "description": "Creates a new memoized variable with useMemo", | |
| "body": [ | |
| "const $1 = useMemo(() => {$2}, [$3]);" | |
| ] | |
| }, | |
| "react useEffect": { | |
| "prefix": "useEffect", | |
| "description": "Creates a new useEffect function", | |
| "body": [ | |
| "useEffect(() => {", | |
| " $1", | |
| "}, [$2]);" | |
| ] | |
| }, | |
| "redux folder index file": { | |
| "prefix": "indexFileRedux", | |
| "description": "Easily export your redux files", | |
| "body": [ | |
| "import { namespace as parentNamespace } from '../';", | |
| "export const namespace = `\\${parentNamespace}/$1`;", | |
| "export * as reducer from './reducer';", | |
| "export * as actions from './actions';", | |
| "${4:export * as selectors from './selectors';}" | |
| ] | |
| }, | |
| "react enzyme test": { | |
| "prefix": "enzymetest", | |
| "description": "Create a new enzyme test file for a React component", | |
| "body": [ | |
| "import React from 'react'", | |
| "import { mount } from 'enzyme'", | |
| "", | |
| "describe('$1', () => {", | |
| " let wrapper", | |
| "", | |
| " beforeEach(() => {", | |
| " wrapper = mount(", | |
| " $2" | |
| " )", | |
| " })", | |
| "", | |
| " it('should render', () => {", | |
| " expect(wrapper).toBeDefined()", | |
| " })", | |
| "})", | |
| "" | |
| ] | |
| }, | |
| "connected enzyme test": { | |
| "prefix": "connectedenzymetest", | |
| "description": "Create a new enzyme test file for a React component", | |
| "body": [ | |
| "import React from 'react'", | |
| "import mountWithStateAndIntl from '${4:../../}testsSetup/mountWithStateAndIntl'", | |
| "import { initialState } from '${4:../../}.storybook/utils'", | |
| "", | |
| "describe('$1', () => {", | |
| " let wrapper", | |
| "", | |
| " beforeEach(() => {", | |
| " wrapper = mountWithStateAndIntl(", | |
| " $2" | |
| " ),", | |
| " ${3:initialState}" | |
| " })", | |
| "", | |
| " it('should render', () => {", | |
| " expect(wrapper).toBeDefined()", | |
| " })", | |
| "})", | |
| "" | |
| ] | |
| }, | |
| "new action creator": { | |
| "prefix": "actioncreator", | |
| "description": "Creates a new FSA-compliant action creator", | |
| "body": [ | |
| "export const $1 = actionCreator($2);" | |
| ], | |
| }, | |
| "new async action creator": { | |
| "prefix": "asyncaction", | |
| "description": "Creates a new FSA-compliant async action creator", | |
| "body": [ | |
| "export const $1Actions = createAsyncActions($2);", | |
| "export const {", | |
| " done: $1Done,", | |
| " fail: $1Fail,", | |
| " start: $1Start", | |
| "} = $1Actions;" | |
| ], | |
| }, | |
| "new action type": { | |
| "prefix": "actype", | |
| "description": "Creates a new action type string constant", | |
| "body": [ | |
| "export const $1 = \"$1\";" | |
| ], | |
| }, | |
| "new async action types": { | |
| "prefix": "asyncactype", | |
| "description": "Creates a new set of async action type string constants with proper suffixes", | |
| "body": [ | |
| "export const $1 = \"$1\";", | |
| "export const $1_DONE = \"$1_DONE\";", | |
| "export const $1_FAIL = \"$1_FAIL\";", | |
| "export const $1_START = \"$1_START\";", | |
| ], | |
| } | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| { | |
| "console log": { | |
| "prefix": "log", | |
| "body": [ | |
| "console.log( '$1', $2 );" | |
| ], | |
| "description": "Log output to console" | |
| }, | |
| "react functional component": { | |
| "prefix": "react", | |
| "body": [ | |
| "import React from \"react\";", | |
| "", | |
| "export const $1: React.FC<{}> = ($2) => {", | |
| " return (", | |
| " $3", | |
| " );", | |
| "}", | |
| "", | |
| "export default $1;", | |
| "" | |
| ], | |
| "description": "Create new React functional component" | |
| }, | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment