My VSCODE Snippets

general.code-snippets.json

{
    "Generic editorconfig": {
        "scope": "editorconfig",
        "prefix": "cfg",
        "body": [
            "root = true",
            "",
            "[*]",
            "indent_style = space",
            "indent_size = 2",
            "charset = utf-8",
            "trim_trailing_whitespace = true",
            "insert_final_newline = true",
            "end_of_line = lf",
            "# editorconfig-tools is unable to ignore longs strings or urls",
            "max_line_length = null",
            "",
            "[*.md]",
            "trim_trailing_whitespace = false",
        ],
        "description": "Default editor config"
    },
    "Action Symbol": {
        "scope": "typescript,javascript",
        "prefix": "act",
        "body": [
            "export const $1 = Symbol(\"$1\");"
        ]
    },
    "React Component Starter": {
        "scope": "typescriptreact,javascript",
        "prefix": "!react-props",
        "body": [
            "import React from 'react';",
            "",
            "export interface ${TM_DIRECTORY/^.+\\/(.*)$/$1/}Props {}",
            "",
            "const ${TM_DIRECTORY/^.+\\/(.*)$/$1/}: React.FC<${TM_DIRECTORY/^.+\\/(.*)$/$1/}Props> = (props) => {",
            "  return (",
            "    <div/>",
            "  );",
            "};",
            "",
            "export default ${TM_DIRECTORY/^.+\\/(.*)$/$1/};"
        ]
    },
    "React Component Starter Without props": {
        "scope": "typescriptreact,javascript",
        "prefix": "!react",
        "body": [
            "import React from 'react';",
            "",
            "const ${TM_DIRECTORY/^.+\\/(.*)$/$1/}: React.FC = () => {",
            "  return (",
            "    <div/>",
            "  );",
            "};",
            "",
            "export default ${TM_DIRECTORY/^.+\\/(.*)$/$1/};"
        ]
    },
    "React redux store starter": {
        "scope": "typescript,javascript",
        "prefix": "!redux-store",
        "body": [
            "import { applyMiddleware, combineReducers, compose, createStore } from 'redux';",
            "import createSagaMiddleware from 'redux-saga';",
            "import { all } from 'redux-saga/effects';",
            "",
            "import StoreState from 'types/State';",
            "",
            "const rootReducer = combineReducers<StoreState>({",
            "",
            "});",
            "",
            "function* rootSaga() {",
            "  yield all([]);",
            "}",
            "",
            "const sagaMiddleware = createSagaMiddleware();",
            "",
            "const composeEnhancers: typeof compose = (",
            "  process.env.NODE_ENV === 'development' && window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__",
            "    ? window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__({ serialize: { options: true } })",
            "    : undefined",
            ") || compose;",
            "",
            "const store = createStore(rootReducer, composeEnhancers(",
            "  applyMiddleware(sagaMiddleware)),",
            ");",
            "",
            "sagaMiddleware.run(rootSaga);",
            "",
            "export default store;",
            "",
            "// src/custom-types/window.d.ts",
            "// interface Window {",
            "//   __REDUX_DEVTOOLS_EXTENSION_COMPOSE__?: any;",
            "// }",
        ],
    },
    "Create redux async action": {
        "scope": "typescript",
        "prefix": "action-async",
        "body": [
            "export const $1 = Symbol(\"$1\");",
            "export const $1_ERROR = Symbol(\"$1_ERROR\");",
            "export const $1_SUCCESS = Symbol(\"$1_SUCCESS\");",
            "",
            "export function ${1/(.*)/${1:/camelcase}/}(): Action<typeof $1> {",
            "  return { type: $1 };",
            "}",
            "",
            "export interface ${1/(.*)/${1:/pascalcase}/}ErrorAction extends Action<typeof $1_ERROR> {",
            "  payload: Error;",
            "}",
            "",
            "export function ${1/(.*)/${1:/camelcase}/}Error(payload: ${1/(.*)/${1:/pascalcase}/}ErrorAction['payload']): ${1/(.*)/${1:/pascalcase}/}ErrorAction {",
            "  return { payload, type: $1_ERROR };",
            "}",
            "",
            "export function ${1/(.*)/${1:/camelcase}/}Success(): Action<typeof $1_SUCCESS> {",
            "  return { type: $1_SUCCESS };",
            "}"
        ]
    },
    "Create action dispatcher with props": {
        "scope": "typescript",
        "prefix": "action-params",
        "body": [
            "export const $1 = Symbol(\"$1\");",
            "",
            "export interface ${1/(.*)/${1:/pascalcase}/}Action extends Action<typeof $1> {",
            "  payload: $2;",
            "}",
            "",
            "export function ${1/(.*)/${1:/camelcase}/}(payload: ${1/(.*)/${1:/pascalcase}/}Action[\"payload\"]): ${1/(.*)/${1:/pascalcase}/}Action {",
            "  return { payload, type: $1 };",
            "}"
        ],
    },
    "Create action dispatcher without props": {
        "scope": "typescript",
        "prefix": "action-launcher",
        "body": [
            "export const $1 = Symbol(\"$1\");",
            "",
            "export function ${1/(.*)/${1:/camelcase}/}(): Action<typeof $1> {",
            "  return { type: $1 };",
            "}"
        ],
    },
    "Saga async action boilerplate": {
        "scope": "typescript",
        "prefix": "saga-async",
        "body": [
            "export function* on${1/(.*)/${1:/pascalcase}/}(action: ${1/(.*)/${1:/pascalcase}/}Action) {",
            "  type ${1/(.*)/${1:/pascalcase}/}Race = Partial<{",
            "    ${1/(.*)/${1:/camelcase}/}Response: PromiseType<ReturnType<typeof $2>['promise']>;",
            "    resetAction: ReturnType<typeof resetState>;",
            "  }>;",
            "",
            "",
            "  const { $3 } = action.payload;",
            "",
            "  const effects: Record<keyof ${1/(.*)/${1:/pascalcase}/}Race, any> = {",
            "    ${1/(.*)/${1:/camelcase}/}Response: call(() => $2($3).promise),",
            "    resetAction: take(RESET_STATE),",
            "  };",
            "",
            "  try {",
            "    const { ${1/(.*)/${1:/camelcase}/}Response }: ${1/(.*)/${1:/pascalcase}/}Race = yield race(effects);",
            "",
            "    if (!${1/(.*)/${1:/camelcase}/}Response) {",
            "      return;",
            "    }",
            "",
            "    yield put(${1/(.*)/${1:/camelcase}/}Success(${1/(.*)/${1:/camelcase}/}Response.parsedBody!.data));",
            "  } catch (e) {",
            "    yield put(${1/(.*)/${1:/camelcase}/}Error(e));",
            "  }",
            "}",
        ]
    },
    "React component testing": {
        "scope": "typescriptreact",
        "prefix": "!react-test",
        "body": [
            "import React from 'react';",
            "import { render, unmountComponentAtNode } from 'react-dom';",
            "import { act } from 'react-dom/test-utils';",
            "",
            "import $1 from '../index';",
            "",
            "let container: HTMLElement | null = null;",
            "",
            "describe('$1 Component', () => {",
            "  beforeEach(() => {",
            "    container = document.createElement('div');",
            "    document.body.append(container);",
            "  });",
            "",
            "  afterEach(() => {",
            "    unmountComponentAtNode(container!);",
            "    container!.remove();",
            "    container = null;",
            "  });",
            "",
            "  it('render component', () => {",
            "    act(() => {",
            "      render(<$1/>, container!);",
            "    });",
            "",
            "    expect(container!.textContent).toContain('');",
            "  });",
            "});"
        ]
    },
    "Import LD HOC": {
        "scope": "typescriptreact",
        "prefix": "ldhoc",
        "body": [
            "import { withLDConsumer } from 'launchdarkly-react-client-sdk';",
            "import { LDProps } from 'launchdarkly-react-client-sdk/lib/withLDConsumer';",
        ],
        "description": "Import Launch Darkly HOC"
    },

    "LD Hoc Flag": {
        "scope": "typescriptreact",
        "prefix": "ldhocprop",
        "body": [
            "const $1 = this.props.flags && this.props.flags.$2;",
        ],
        "description": "Define launch darkly HOC prop"
    },

    "import LD FC": {
        "scope": "typescriptreact",
        "prefix": "ldfc",
        "body": [
            "import { useFlags } from 'launchdarkly-react-client-sdk';",
        ],
        "description": "Import Launch Darkly to FC"
    },

    "LD FC Flag": {
        "scope": "typescriptreact",
        "prefix": "ldfcprop",
        "body": [
            "const { $1 = false }: { $1?: boolean } = useFlags();",
        ],
        "description": "Define launch darkly FC prop"
    },
}