VSCode MobX React Snippets + Utility Snippets

javascript.json

{
	"MobX React Component": {
		"prefix": "mxrc",
		"body": "import React, {Component} from 'react';\nimport {inject, observer} from 'mobx-react';\n\n@inject('stores')\n@observer\nexport default class ${1:componentName} extends Component {\n\n\trender() {\n\t\treturn (\n\t\t\t<div>\n\t\t\t\t$0\n\t\t\t</div>\n\t\t);\n\t}\n\n}",
		"description": "Creates a MobX React component class with default export"
	},
	"MobX React Component with Action": {
		"prefix": "mxrca",
		"body": "import React, {Component} from 'react';\nimport {action} from 'mobx';\nimport {inject, observer} from 'mobx-react';\n\n@inject('stores')\n@observer\nexport default class ${1:componentName} extends Component {\n\n\[email protected] onClickX(e) {\n\t\n\t}\n\n\trender() {\n\t\treturn (\n\t\t\t<div onClick={(e) => this.onClickX(e)}>\n\t\t\t\t$0\n\t\t\t</div>\n\t\t);\n\t}\n\n}",
		"description": "Creates a MobX React component class with default export and MobX action"
	},
	"MobX Decorator Action": {
		"prefix": "mxa",
		"body": "@action.bound on$1($2) {\n\t$3\n}",
		"description": "Creates a MobX Action"
	},
	"MobX Computed": {
		"prefix": "mxc",
		"body": "get$1($2) {\n\treturn computed(() => {\n\t\treturn $3;\n\t}).get();\n}",
		"description": "Creates a MobX Computed"
	},
	"MobX Decorator Observable": {
		"prefix": "mxo",
		"body": "@observable $1 = $2;",
		"description": "Creates a MobX Observable"
	},
	
	"Print to console": {
		"prefix": "log",
		"body": [
			"console.log($1)"
		],
		"description": "Log output to console"
	},
	"Print to console in quotes": {
		"prefix": "logq",
		"body": [
			"console.log('$1')"
		],
		"description": "Log output in quotes to console"
	},
	"Print to console winning": {
		"prefix": "logw",
		"body": [
			"console.log('winning')"
		],
		"description": "Log 'winning' to console"
	},
	"Print to console labeled": {
		"prefix": "logl",
		"body": [
			"console.log('$1:', $1)"
		],
		"description": "Log output with matching label to console"
	}
}