cra-template-paulo-vanilla/template/project-snippets.md

CRA with more organized folder structure, CSS Modules, helpful Readme and project Snippets.

// Copy All of this and paste in a appropriate folder
    // ctrl + shift + p -> custom snippets -> global custom snippets || project snippets -> front-end-react.code-snippets -> paste
// Some good ES7 snippets:
    // imp/imd - import module project/destructed
    // clg - console.log
    // imr/imrse - import react / & state & effect
    // nfn - named arrow function
    
{
	"React Functional Component with CSS Module": {
		"scope": "javascript,typescript,javascriptreact,typescriptreact",
		"prefix": "rfccm",
		"body": [
		  "import styles from \"./${TM_DIRECTORY/^.+\\\\(.*)$/$1/}.module.css\"",
		  "",
		  "export function ${TM_DIRECTORY/^.+\\\\(.*)$/$1/} () {",
		  "    return (",
		  "        <div className={styles.${TM_DIRECTORY/^.+\\\\(.*)$/$1/}Container}>",
		  "            $0",
		  "        </div>",
		  "    );",
		  "}"
		],
		"description": "React Functional Component with CSS Module"
	},
	"Css Module Container Class": {
		"scope": "css, css.module",
		"prefix": "cmcc",
		"body": [
		  ".${TM_DIRECTORY/^.+\\\\(.*)$/$1/}Container {",
		  "  ${0}",
		  "}"
		],
		"description": "Css Module Container Class"
	  },
	  "React Context Generic": {
		"scope": "javascript,typescript,javascriptreact,typescriptreact",
		"prefix": "rcg",
		"body": [
		  "import React, { createContext, useContext, useState } from 'react'",
		  "",
		  "export const ${TM_FILENAME_BASE} = createContext({});",
		  "",
		  "export default function ${1:Object}Provider({children}) {",
		  "    ",
		  "    return (",
		  "        <${TM_FILENAME_BASE}.Provider ",
		  "            value={{",
		  "                //Variables",
		  "",
		  "                //Functions",
		  "",
		  "            }}",
		  "        >",
		  "            {children}",
		  "        </${TM_FILENAME_BASE}.Provider>",
		  "    )",
		  "}",
		  "",
		  "export const use${1:Object} = () => useContext(${TM_FILENAME_BASE});",
		  "",
		  "// Import \"UseObject\" and use it in place of useContext(${TM_FILENAME_BASE})",
		  "// Example:",
		  "    // const {testHook} = useObject();"
		],
		"description": "React Context Generic"
	  },
	  "Template Literal Class Name": {
		"prefix": "tlcn",
		"body": [
		  "{`${styles.${1:className}} ${0}`}"
		],
		"description": "Template Literal Class Name"
	  }
	

}

// Windows Parent Folder without Full Path: ${TM_DIRECTORY/^.+\\\\(.*)$/$1/}
// Windows Parent Folder without Full Path: ${TM_DIRECTORY/^.+\\/(.*)$/$1/} 
	
//------------------
// Place your global snippets in this file. 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.
	// Example:
	// 	"scope": "javascript,typescript",