VsCode snippets for everyday use

flutter.code-snippets

{
	"Flutter SizedBox": {
		"prefix": "sb",
		"scope": "dart,flutter",
		"body": [
			"const SizedBox(height: $1,),"
		],
		"description": "Flutter SizedBox"
	},
	"Flutter Theme colorScheme": {
		"prefix": "tc",
		"scope": "dart,flutter",
		"body": [
			"Theme.of(context).colorScheme.onPrimary"
		],
		"description": "Flutter Theme colorScheme"
	},
	"Flutter MediaQuery Size": {
		"prefix": "sz",
		"scope": "dart,flutter",
		"body": [
		  "final size = MediaQuery.of(context).size;"
		],
		"description": "Flutter MediaQuery Size"
	  }
}

global.code-snippets

{
	// Place your global snippets here. Each snippet is defined under a snippet name and has a scope, prefix, body and 
	// description. Add comma separated ids of the languages where the snippet is applicable in the scope field. If scope 
	// is left empty or omitted, the snippet gets applied to all languages. The prefix is what is 
	// used to trigger the snippet and the body will be expanded and inserted. Possible variables are: 
	// $1, $2 for tab stops, $0 for the final cursor position, and ${1:label}, ${2:another} for placeholders. 
	// Placeholders with the same ids are connected.
	"Console Log": {
		"prefix": "clog",
		"scope": "javascript,typescript,vue",
		"body": [
			"console.log(\"$1\", $1);"
		],
		"description": "Console Log"
	},
	"Console Log C#": {
		"prefix": "clogcs",
		"scope": "csharp",
		"body": [
			"Debug.Log($1);"
		],
		"description": "Console/Debug Log C#"
	},
	"Console Log Laravel": {
		"prefix": "clogcs",
		"scope": "php,laravel,blade",
		"body": [
			"dde(\"$1\", $1);"
		],
		"description": "Console/Debug Log Laravel"
	}
}

lexx-react.code-snippets

{
	"React Functional Component": {
		"prefix": "fc",
		"scope": "typescriptreact,javascriptreact",
		"body": [
			"'use client';",
			"",
			"import { FC } from 'react'",
			"",
			"interface Props {",
			"}",
			"",
			"const ${TM_FILENAME_BASE/(.*)$/${1:/pascalcase}/}: FC<Props> = ({}) => {",
			"",
			"    return <div>${TM_FILENAME_BASE/(.*)$/${1:/pascalcase}/} $1</div>",
			"}",
			"",
			"export default ${TM_FILENAME_BASE/(.*)$/${1:/pascalcase}/};",
			""
		],
		"description": "React Functional Component"
	},
	"React Server Component": {
		"prefix": "sc",
		"scope": "typescriptreact,javascriptreact",
		"body": [
			"interface Props {",
			"}",
			"",
			"const ${TM_FILENAME_BASE/(.*)$/${1:/pascalcase}/} = async ({} : Props) => {",
			"",
			"    return <div>${TM_FILENAME_BASE/(.*)$/${1:/pascalcase}/} $1</div>",
			"}",
			"",
			"export default ${TM_FILENAME_BASE/(.*)$/${1:/pascalcase}/};",
			""
		],
		"description": "React Server Component"
	},
	"React Functional Component Pascal Filenames": {
		"prefix": "fc2",
		"scope": "typescriptreact,javascriptreact",
		"body": [
			"'use client';",
			"",
			"import { FC } from 'react'",
			"",
			"interface ${TM_FILENAME_BASE/(.*)$/${1:/capitalize}/}Props {",
			"}",
			"",
			"const ${TM_FILENAME_BASE/(.*)$/${1:/capitalize}/}: FC<${TM_FILENAME_BASE/(.*)$/${1:/capitalize}/}Props> = ({}) => {",
			"",
			"    return <div>$TM_FILENAME_BASE $1</div>",
			"}",
			"",
			"export default ${TM_FILENAME_BASE/(.*)$/${1:/capitalize}/};",
			""
		],
		"description": "React Functional Component Pascal Filenames"
	},
	"React Server Component Pascal Filenames": {
		"prefix": "sc2",
		"scope": "typescriptreact,javascriptreact",
		"body": [
			"interface ${TM_FILENAME_BASE/(.*)$/${1:/capitalize}/}Props {",
			"}",
			"",
			"const ${TM_FILENAME_BASE/(.*)$/${1:/capitalize}/} = async ({} : ${TM_FILENAME_BASE/(.*)$/${1:/capitalize}/}Props) => {",
			"",
			"    return <div>$TM_FILENAME_BASE $1</div>",
			"}",
			"",
			"export default ${TM_FILENAME_BASE/(.*)$/${1:/capitalize}/};",
			""
		],
		"description": "React Server Component Pascal Filenames"
	},
	"React UseState": {
		"prefix": "us",
		"scope": "typescriptreact,javascriptreact",
		"body": [
			"const [$1, set${1/(.*)$/${1:/capitalize}/}] = useState<$2>($3);"
		],
		"description": "React UseState"
	},
	"React useEffect": {
		"prefix": "ue",
		"scope": "typescriptreact,javascriptreact",
		"body": [
			"useEffect(() => {",
			"  $1",
			"}, [$2]);"
		],
		"description": "React useEffect"
	},
	"React useEffect setTimeout": {
		"prefix": "uet",
		"scope": "typescriptreact,javascriptreact",
		"body": [
			"useEffect(() => {",
			"  const timer = setTimeout(() => {",
			"    console.log('This will run after 1 second!')",
			"  }, 1000);",
			"",
			"  return () => clearTimeout(timer);",
			"}, [$1]);"
		],
		"description": "React useEffect setTimeout"
	},
	"React useMutation": {
		"prefix": "um",
		"scope": "typescriptreact,javascriptreact",
		"body": [
			"// import { useMutation } from \"@tanstack/react-query\";",
			"// import { useRouter } from \"next/navigation\";",
			"const router = useRouter();",
			"",
			"const { mutate: submit, isLoading } = useMutation({",
			"    mutationFn: async ({ userId }: UserRequest) => {",
			"      const payload: UserRequest = {",
			"        userId,",
			"      };",
			"",
			"      const { data } = await axios.post(",
			"        `/api/user`,",
			"        payload",
			"      );",
			"      return data;",
			"    },",
			"    onError: (err) => {",
			"      if (err instanceof AxiosError) {",
			"        if (isAuthError(err.response?.status)) {",
			"          return loginToast();",
			"        }",
			"",
			"        return toast({",
			"          title: \"There was a problem\",",
			"          description: err.response?.data?.message ?? \"An error occurred\",",
			"          variant: \"destructive\",",
			"        });",
			"      }",
			"",
			"      return toast({",
			"        title: \"There was a problem\",",
			"        description: \"Something went wrong, please try again\",",
			"        variant: \"destructive\",",
			"      });",
			"    },",
			"    onSuccess: () => {",
			"      router.refresh();",
			"      // setInput(\"\");",
			"    },",
			"  });"
		],
		"description": "React useMutation"
	},
	"React useForm": {
		"prefix": "uf",
		"scope": "typescriptreact,javascriptreact",
		"body": [
			"// import { zodResolver } from \"@hookform/resolvers/zod\";",
			"",
			"const form = useForm<CreateMessageRequest>({",
			"  resolver: zodResolver(CreateMessageValidator),",
			"  defaultValues: {",
			"    username: user?.username ?? \"\",",
			"  },",
			"});",
			"",
			"const {",
			"  handleSubmit,",
			"  register,",
			"  formState: { errors },",
			"} = form",
			""
		],
		"description": "React useForm"
	},
	"React useForm Form": {
		"prefix": "uff",
		"scope": "typescriptreact,javascriptreact",
		"body": [
			"<Form {...form}>",
			"  <form className=\"space-y-4\" onSubmit={form.handleSubmit((e) => submit(e))}>",
			"    <FormField",
			"      control={form.control}",
			"      name=\"subject\"",
			"      render={({ field }) => (",
			"        <FormItem className=\"md:grid md:grid-cols-6 md:space-y-0 md:gap-4 w-full\">",
			"          <FormLabel className=\"md:self-center\">Subject</FormLabel>",
			"          <div className=\"md:col-span-5\">",
			"            <FormControl>",
			"              <Input placeholder=\"Subject / Concern\" {...field} />",
			"            </FormControl>",
			"            <FormMessage />",
			"          </div>",
			"        </FormItem>",
			"      )}",
			"    />",
			"",
			"    <FormField",
			"      control={form.control}",
			"      name=\"message\"",
			"      render={({ field }) => (",
			"        <FormItem className=\"md:grid md:grid-cols-6 md:space-y-0 md:gap-4 w-full\">",
			"          <FormLabel className=\"md:pt-3\">Message</FormLabel>",
			"          <div className=\"md:col-span-5\">",
			"            <FormControl>",
			"              <Textarea",
			"                placeholder=\"Write your message\"",
			"                rows={7}",
			"                {...field}",
			"              />",
			"            </FormControl>",
			"            <FormMessage />",
			"          </div>",
			"        </FormItem>",
			"      )}",
			"    />",
			"",
			"    <div className=\"flex justify-end\">",
			"      <Button",
			"        isLoading={isLoading}",
			"        type=\"submit\"",
			"        iconSuffix={<ArrowRight />}",
			"      >",
			"        Send Message",
			"      </Button>",
			"    </div>",
			"  </form>",
			"</Form>"
		],
		"description": "React useForm Form"
	}
}

lexx-riverpod.code-snippets

{
	"Flutter Consumer Widget": {
		"prefix": "cs",
		"scope": "dart,flutter",
		"body": [
			"import 'package:flutter/material.dart';",
			"import 'package:flutter_riverpod/flutter_riverpod.dart';",
			"",
			"class $1 extends ConsumerWidget {",
			"  const $1({Key? key}) : super(key: key);",
			"",
			"  @override",
			"  Widget build(BuildContext context, WidgetRef ref) {",
			"    return Container($2);",
			"  }",
			"}",
			""
		],
		"description": "Flutter Consumer Widget"
	},
	"Flutter Consumer Screen": {
		"prefix": "css",
		"scope": "dart,flutter",
		"body": [
			"import 'package:flutter/material.dart';",
			"import 'package:flutter_riverpod/flutter_riverpod.dart';",
			"",
			"class $1Screen extends ConsumerWidget {",
			"  const $1Screen({Key? key}) : super(key: key);",
			"  static const routeName = '${1/(.*)/${1:/downcase}/}';",
			"",
			"  @override",
			"  Widget build(BuildContext context, WidgetRef ref) {",
			"    return Scaffold(",
			"      appBar: AppBar(",
			"        title: const Text('$1'),",
			"      ),",
			"      body: SingleChildScrollView(",
			"        child: Column(",
			"          children: [",
			"            const Text('$1 Page'),",
			"            $2",
			"          ],",
			"        ),",
			"      ),",
			"    );",
			"  }",
			"}",
			""
		],
		"description": "Flutter Consumer Screen"
	},
	"Flutter Consumer Stateful Widget": {
		"prefix": "csf",
		"scope": "dart,flutter",
		"body": [
			"import 'package:flutter/material.dart';",
			"import 'package:flutter_riverpod/flutter_riverpod.dart';",
			"",
			"class $1 extends ConsumerStatefulWidget {",
			"  const $1({Key? key}) : super(key: key);",
			"",
			"  @override",
			"  ConsumerState<ConsumerStatefulWidget> createState() => _$1State();",
			"}",
			"",
			"class _$1State extends ConsumerState<$1> {",
			"  @override",
			"  Widget build(BuildContext context) {",
			"    return Container($2);",
			"  }",
			"}",
			""
		],
		"description": "Flutter Consumer Stateful Widget"
	},
	"Flutter Consumer Stateful Screen": {
		"prefix": "csfs",
		"scope": "dart,flutter",
		"body": [
			"import 'package:flutter/material.dart';",
			"import 'package:flutter_riverpod/flutter_riverpod.dart';",
			"",
			"class $1Screen extends ConsumerStatefulWidget {",
			"  const $1Screen({Key? key}) : super(key: key);",
			"  static const routeName = '${1/(.*)/${1:/downcase}/}';",
			"",
			"  @override",
			"  ConsumerState<ConsumerStatefulWidget> createState() => _$1ScreenState();",
			"}",
			"",
			"class _$1ScreenState extends ConsumerState<$1Screen> {",
			"  @override",
			"  Widget build(BuildContext context) {",
			"    return Scaffold(",
			"      appBar: AppBar(",
			"        title: const Text('$1'),",
			"      ),",
			"      body: SingleChildScrollView(",
			"        child: Column(",
			"          children: const [",
			"            Text('$1 Page'),",
			"            $2",
			"          ],",
			"        ),",
			"      ),",
			"    );",
			"  }",
			"}",
			""
		],
		"description": "Flutter Consumer Stateful Screen"
	},
	"Flutter Consumer Stateful Hook Widget": {
		"prefix": "csh",
		"scope": "dart,flutter",
		"body": [
			"import 'package:flutter/material.dart';",
			"import 'package:hooks_riverpod/hooks_riverpod.dart';",
			"",
			"class $1 extends StatefulHookConsumerWidget {",
			"  const $1({Key? key}) : super(key: key);",
			"",
			"  @override",
			"  ConsumerState<ConsumerStatefulWidget> createState() => _$1State();",
			"}",
			"",
			"class _$1State extends ConsumerState<$1> {",
			"  @override",
			"  Widget build(BuildContext context) {",
			"    return Container($2);",
			"  }",
			"}",
			"",
			""
		],
		"description": "Flutter Consumer Stateful Hook Widget"
	},
	"Flutter Consumer Stateful Hook Screen": {
		"prefix": "cshs",
		"scope": "dart,flutter",
		"body": [
			"import 'package:flutter/material.dart';",
			"import 'package:hooks_riverpod/hooks_riverpod.dart';",
			"",
			"class $1Screen extends StatefulHookConsumerWidget {",
			"  const $1Screen({Key? key}) : super(key: key);",
			"  static const routeName = '${1/(.*)/${1:/downcase}/}';",
			"",
			"  @override",
			"  ConsumerState<ConsumerStatefulWidget> createState() => _$1ScreenState();",
			"}",
			"",
			"class _$1ScreenState extends ConsumerState<$1Screen> {",
			"  @override",
			"  Widget build(BuildContext context) {",
			"    return Scaffold(",
			"      appBar: AppBar(",
			"        title: const Text('$1'),",
			"      ),",
			"      body: SingleChildScrollView(",
			"        child: Column(",
			"          children: const [",
			"            Text('$1 Page'),",
			"            $2",
			"          ],",
			"        ),",
			"      ),",
			"    );",
			"  }",
			"}",
			"",
			""
		],
		"description": "Flutter Consumer Stateful Hook Screen"
	},
}