Skip to content

Instantly share code, notes, and snippets.

@reintroducing
Last active November 11, 2021 22:55
Show Gist options
  • Star 3 You must be signed in to star a gist
  • Fork 2 You must be signed in to fork a gist
  • Save reintroducing/09cc33db972ad8acbc81a8405e1da6cb to your computer and use it in GitHub Desktop.
Save reintroducing/09cc33db972ad8acbc81a8405e1da6cb to your computer and use it in GitHub Desktop.
Visual Studio Code Settings Sync Gist
{"lastUpload":"2021-11-11T22:55:23.414Z","extensionVersion":"v3.4.3"}
[
{
"metadata": {
"id": "6e440e71-8ed9-4f25-bb78-4b13096b8a03",
"publisherId": "formulahendry.auto-rename-tag",
"publisherDisplayName": "formulahendry"
},
"name": "auto-rename-tag",
"publisher": "formulahendry",
"version": "0.1.9"
},
{
"metadata": {
"id": "897c115a-dfbf-4c20-bafd-1c13fc5d1d80",
"publisherId": "Yummygum.city-lights-icon-vsc",
"publisherDisplayName": "Yummygum"
},
"name": "city-lights-icon-vsc",
"publisher": "Yummygum",
"version": "1.1.3"
},
{
"metadata": {
"id": "e337c67b-55c2-4fef-8949-eb260e7fb7fd",
"publisherId": "Shan.code-settings-sync",
"publisherDisplayName": "Shan"
},
"name": "code-settings-sync",
"publisher": "Shan",
"version": "3.4.3"
},
{
"metadata": {
"id": "f60a60a6-95ba-42d4-b41c-3d24c1b89588",
"publisherId": "EditorConfig.EditorConfig",
"publisherDisplayName": "EditorConfig"
},
"name": "EditorConfig",
"publisher": "EditorConfig",
"version": "0.16.4"
},
{
"metadata": {
"id": "5960f38e-0bbe-4644-8f9c-9c8824e82511",
"publisherId": "donjayamanne.githistory",
"publisherDisplayName": "donjayamanne"
},
"name": "githistory",
"publisher": "donjayamanne",
"version": "0.6.19"
},
{
"metadata": {
"id": "3e891cf9-53cb-49a3-8d01-8f0b1f0afb29",
"publisherId": "codezombiech.gitignore",
"publisherDisplayName": "codezombiech"
},
"name": "gitignore",
"publisher": "codezombiech",
"version": "0.7.0"
},
{
"metadata": {
"id": "4de763bd-505d-4978-9575-2b7696ecf94e",
"publisherId": "eamodio.gitlens",
"publisherDisplayName": "eamodio"
},
"name": "gitlens",
"publisher": "eamodio",
"version": "11.6.1"
},
{
"metadata": {
"id": "aae00486-7e92-42b3-91b0-2b419e4f3875",
"publisherId": "vincaslt.highlight-matching-tag",
"publisherDisplayName": "vincaslt"
},
"name": "highlight-matching-tag",
"publisher": "vincaslt",
"version": "0.10.1"
},
{
"metadata": {
"id": "fcbdb08e-4048-40e8-a674-fecc476f4b93",
"publisherId": "SirTori.indenticator",
"publisherDisplayName": "SirTori"
},
"name": "indenticator",
"publisher": "SirTori",
"version": "0.7.0"
},
{
"metadata": {
"id": "5cbdf58a-694a-4aba-af08-61d00842eb03",
"publisherId": "bierner.markdown-preview-github-styles",
"publisherDisplayName": "bierner"
},
"name": "markdown-preview-github-styles",
"publisher": "bierner",
"version": "0.2.0"
},
{
"metadata": {
"id": "5db78037-f674-459f-a236-db622c427c5b",
"publisherId": "PKief.material-icon-theme",
"publisherDisplayName": "PKief"
},
"name": "material-icon-theme",
"publisher": "PKief",
"version": "4.10.0"
},
{
"metadata": {
"id": "ef2a5b38-02c4-4193-8561-1f072c209474",
"publisherId": "silvenon.mdx",
"publisherDisplayName": "silvenon"
},
"name": "mdx",
"publisher": "silvenon",
"version": "0.1.0"
},
{
"metadata": {
"id": "1b0d4512-2735-4323-ae6b-30c0f58cdbb0",
"publisherId": "herrmannplatz.npm-dependency-links",
"publisherDisplayName": "herrmannplatz"
},
"name": "npm-dependency-links",
"publisher": "herrmannplatz",
"version": "1.2.0"
},
{
"metadata": {
"id": "dff6b801-247e-40e9-82e8-8c9b1d19d1b8",
"publisherId": "christian-kohler.npm-intellisense",
"publisherDisplayName": "christian-kohler"
},
"name": "npm-intellisense",
"publisher": "christian-kohler",
"version": "1.4.0"
},
{
"metadata": {
"id": "a41c1549-4053-44d4-bf30-60fc809b4a86",
"publisherId": "christian-kohler.path-intellisense",
"publisherDisplayName": "christian-kohler"
},
"name": "path-intellisense",
"publisher": "christian-kohler",
"version": "2.4.2"
},
{
"metadata": {
"id": "96fa4707-6983-4489-b7c5-d5ffdfdcce90",
"publisherId": "esbenp.prettier-vscode",
"publisherDisplayName": "esbenp"
},
"name": "prettier-vscode",
"publisher": "esbenp",
"version": "9.0.0"
},
{
"metadata": {
"id": "85e57fc6-8e21-4402-8e66-af4155fbb5d2",
"publisherId": "qinjia.seti-icons",
"publisherDisplayName": "qinjia"
},
"name": "seti-icons",
"publisher": "qinjia",
"version": "0.1.3"
},
{
"metadata": {
"id": "529697b9-b343-4b1c-ba2f-f5ef692132d4",
"publisherId": "ms-vscode.sublime-keybindings",
"publisherDisplayName": "ms-vscode"
},
"name": "sublime-keybindings",
"publisher": "ms-vscode",
"version": "4.0.10"
},
{
"metadata": {
"id": "fb374ce1-5343-46c8-a425-900fdad15523",
"publisherId": "wesbos.theme-cobalt2",
"publisherDisplayName": "wesbos"
},
"name": "theme-cobalt2",
"publisher": "wesbos",
"version": "2.2.5"
},
{
"metadata": {
"id": "583b2b34-2c1e-4634-8c0b-0b82e283ea3a",
"publisherId": "dbaeumer.vscode-eslint",
"publisherDisplayName": "dbaeumer"
},
"name": "vscode-eslint",
"publisher": "dbaeumer",
"version": "2.2.2"
},
{
"metadata": {
"id": "d637104e-1fd7-4063-98fc-8afe46012c9b",
"publisherId": "sleistner.vscode-fileutils",
"publisherDisplayName": "sleistner"
},
"name": "vscode-fileutils",
"publisher": "sleistner",
"version": "3.4.5"
},
{
"metadata": {
"id": "9ccc1dd7-7ec4-4a46-bd4f-7d7b8b9d322a",
"publisherId": "vscode-icons-team.vscode-icons",
"publisherDisplayName": "vscode-icons-team"
},
"name": "vscode-icons",
"publisher": "vscode-icons-team",
"version": "11.7.0"
},
{
"metadata": {
"id": "ae9e3eb0-3357-4cc0-90ee-598d2d384757",
"publisherId": "eg2.vscode-npm-script",
"publisherDisplayName": "eg2"
},
"name": "vscode-npm-script",
"publisher": "eg2",
"version": "0.3.23"
},
{
"metadata": {
"id": "d44660a4-138a-4a2c-b51a-3768b3310aef",
"publisherId": "rafikis75.vscode-sassdoc",
"publisherDisplayName": "rafikis75"
},
"name": "vscode-sassdoc",
"publisher": "rafikis75",
"version": "1.0.2"
},
{
"metadata": {
"id": "beb68b20-7c55-471c-9b63-3486f9423566",
"publisherId": "mrmlnc.vscode-scss",
"publisherDisplayName": "mrmlnc"
},
"name": "vscode-scss",
"publisher": "mrmlnc",
"version": "0.10.0"
},
{
"metadata": {
"id": "8bfd87ec-2032-4a0e-a630-71eed81a027e",
"publisherId": "davidbabel.vscode-simpler-icons",
"publisherDisplayName": "davidbabel"
},
"name": "vscode-simpler-icons",
"publisher": "davidbabel",
"version": "1.6.5"
},
{
"metadata": {
"id": "ec35b5a3-9802-4c68-b5ff-e85f19ec0977",
"publisherId": "stylelint.vscode-stylelint",
"publisherDisplayName": "stylelint"
},
"name": "vscode-stylelint",
"publisher": "stylelint",
"version": "1.1.0"
},
{
"metadata": {
"id": "97a08c5f-6667-4242-a5c5-045dfb6bd4b9",
"publisherId": "wayou.vscode-todo-highlight",
"publisherDisplayName": "wayou"
},
"name": "vscode-todo-highlight",
"publisher": "wayou",
"version": "1.0.5"
},
{
"metadata": {
"id": "07fc4a0a-11fc-4121-ba9a-f0d534c729d8",
"publisherId": "pflannery.vscode-versionlens",
"publisherDisplayName": "pflannery"
},
"name": "vscode-versionlens",
"publisher": "pflannery",
"version": "1.0.9"
},
{
"metadata": {
"id": "2061917f-f76a-458a-8da9-f162de22b97e",
"publisherId": "redhat.vscode-yaml",
"publisherDisplayName": "redhat"
},
"name": "vscode-yaml",
"publisher": "redhat",
"version": "1.2.0"
},
{
"metadata": {
"id": "87caf16b-d487-45c0-877d-573fe319b015",
"publisherId": "ms-vsliveshare.vsliveshare-pack",
"publisherDisplayName": "ms-vsliveshare"
},
"name": "vsliveshare-pack",
"publisher": "ms-vsliveshare",
"version": "0.4.0"
}
]
// Place your key bindings in this file to overwrite the defaults
[
{
"key": "cmd+y",
"command": "redo",
"when": "textInputFocus && !editorReadonly"
},
{
"key": "shift+cmd+z",
"command": "-redo",
"when": "textInputFocus && !editorReadonly"
},
{
"key": "cmd+v",
"command": "editor.action.clipboardPasteAction",
"when": "!editorTextFocus"
},
{
"key": "cmd+shift+v",
"command": "editor.action.clipboardPasteAction",
"when": "editorTextFocus && !editorReadonly"
}
]
{
"files.insertFinalNewline" : true,
"editor.scrollBeyondLastLine" : true,
"vsicons.presets.foldersAllDefaultIcon" : true,
"typescript.suggestionActions.enabled" : false,
"explorer.confirmDragAndDrop" : false,
"explorer.confirmDelete" : false,
"workbench.editor.closeEmptyGroups" : false,
"[javascript]" : {
"editor.defaultFormatter" : "esbenp.prettier-vscode"
},
"editor.multiCursorModifier" : "ctrlCmd",
"versionlens.suggestions.showOnStartup" : true,
"editor.quickSuggestionsDelay" : 0,
"typescript.format.insertSpaceAfterOpeningAndBeforeClosingNonemptyBraces" : false,
"explorer.openEditors.visible" : 0,
"sync.pathPrefix" : "",
"html.format.unformatted" : "",
"workbench.iconTheme" : "vscode-icons",
"javascript.format.insertSpaceAfterOpeningAndBeforeClosingNonemptyBraces" : false,
"window.openFilesInNewWindow" : "off",
"vsicons.presets.jsOfficial" : true,
"editor.wordWrap" : "off",
"editor.bracketPairColorization.enabled" : true,
"window.restoreWindows" : "all",
"files.trimTrailingWhitespace" : true,
"[handlebars]" : {
"editor.formatOnSave" : false
},
"editor.codeActionsOnSave" : null,
"typescript.autoImportSuggestions.enabled" : false,
"typescript.reportStyleChecksAsWarnings" : false,
"typescript.format.enable" : false,
"sync.gist" : "09cc33db972ad8acbc81a8405e1da6cb",
"editor.fontFamily" : "Source Code Pro for Powerline",
"[markdown]" : {
"editor.formatOnSave" : false,
"editor.tabSize" : 2
},
"workbench.colorTheme" : "Cobalt2",
"files.exclude" : {
"**\/.hg" : true,
"**\/.pyc" : true,
"**\/.DS_Store" : true,
"**\/CVS" : true,
"**\/.git" : true,
"**\/node_modules" : true,
"**\/.svn" : true,
"**\/*.hot-update.*" : true
},
"sync.host" : "",
"explorer.autoReveal" : false,
"editor.rulers" : [
120
],
"workbench.editor.tabSizing" : "shrink",
"redhat.telemetry.enabled" : false,
"editor.wordSeparators" : ".\/\\()\"':,.;<>~!@#$%^&*|+=[]{}`~?",
"sync.removeExtensions" : true,
"sync.syncExtensions" : true,
"javascript.updateImportsOnFileMove.enabled" : "never",
"typescript.quickSuggestionsForPaths" : false,
"security.workspace.trust.untrustedFiles" : "open",
"sync.forceUpload" : true,
"workbench.statusBar.feedback.visible" : false,
"sync.forceDownload" : false,
"sync.askGistName" : false,
"typescript.check.npmIsInstalled" : false,
"javascript.validate.enable" : false,
"window.title" : "${activeEditorMedium}${separator}${rootPath}",
"editor.formatOnSave" : true,
"editor.snippetSuggestions" : "top",
"files.useExperimentalFileWatcher" : true,
"sync.lastUpload" : "2018-08-23T18:54:42.037Z",
"sync.autoDownload" : true,
"[yaml]" : {
"editor.autoIndent" : "advanced",
"editor.formatOnSave" : false,
"editor.defaultFormatter" : "esbenp.prettier-vscode"
},
"css.validate" : false,
"files.associations" : {
"*.jinja" : "jinja-html",
". prettierrc" : "jsonc"
},
"editor.accessibilitySupport" : "off",
"sync.lastDownload" : "",
"scss.validate" : false,
"sync.autoUpload" : true,
"typescript.validate.enable" : false,
"less.validate" : false,
"javascript.format.enable" : false,
"[html]" : {
"editor.defaultFormatter" : "esbenp.prettier-vscode"
},
"search.exclude" : {
"**\/*.css" : true
},
"stylelint.configOverrides" : {
"files" : "**\/*.scss"
},
"sync.quietSync" : false,
"typescript.tsc.autoDetect" : "off",
"diffEditor.ignoreTrimWhitespace" : false,
"[json]" : {
"editor.defaultFormatter" : "esbenp.prettier-vscode"
},
"terminal.integrated.env.osx": {
"FIG_NEW_SESSION": "1"
}
}
{
// Place your snippets for html here. Each snippet is defined under a snippet name and has a prefix, body and
// description. 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:
// "Print to console": {
// "prefix": "log",
// "body": [
// "console.log('$1');",
// "$2"
// ],
// "description": "Log output to console"
// }
"Bare HTML 5 Template": {
"prefix": "html5",
"body": [
"<!DOCTYPE html>",
"<html lang=\"en\">",
" <head>",
" <title>${1}</title>",
" </head>",
"",
" <body>",
" ${2}",
" </body>",
"</html>"
],
"description": "Bare HTML 5 Template"
},
"Favicon": {
"prefix": "favicon",
"body": [
"<link rel=\"shortcut icon\" href=\"${1:favicon}.ico\">",
"<link rel=\"apple-touch-icon\" href=\"${2:apple-touch-icon}.png\">"
],
"description": "Favicon"
},
"Meta Tags": {
"prefix": "meta",
"body": [
"<meta name=\"description\" content=\"${1}\">",
"<meta name=\"keywords\" content=\"${2}\">",
"<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">",
"<meta charset=\"UTF-8\">"
],
"description": "Meta Tags"
},
"Script Source": {
"prefix": "scriptsrc",
"body": [
"<script src=\"${1:js/main.js}\"></script>"
],
"description": "Script Source"
},
"Stylesheet Link": {
"prefix": "stylesheet",
"body": [
"<link rel=\"stylesheet\" href=\"${1:css/main}.css\">"
],
"description": "Stylesheet Link"
}
}
{
// Place your snippets for javascript here. Each snippet is defined under a snippet name and has a prefix, body and
// description. 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:
// "Print to console": {
// "prefix": "log",
// "body": [
// "console.log('$1');",
// "$2"
// ],
// "description": "Log output to console"
// }
"Console Log": {
"prefix": "log",
"body": [
"console.log(${1});${2}"
],
"description": "Console Log"
},
"Console Success": {
"prefix": "success",
"body": [
"console.log('%c' + '${1}', 'background-color: #39b54a; color: #fff; font-weight: bold;');${2}"
],
"description": "Console Success"
},
"Console Warn": {
"prefix": "warn",
"body": [
"console.log('%c' + '${1}', 'background-color: #fff200; color: #000; font-weight: bold;');${2}"
],
"description": "Console Warn"
},
"Console Error": {
"prefix": "error",
"body": [
"console.log('%c' + '${1}', 'background-color: #ed1c24; color: #fff; font-weight: bold;');${2}"
],
"description": "Console Error"
},
"Console Trace": {
"prefix": "trace",
"body": [
"console.trace('${1:functionName}');${2}"
],
"description": "Console Trace"
},
"Function Declaration": {
"prefix": "fndeclare",
"body": [
"function ${1:functionName}(${2:params}) {",
" ${3}",
"}"
],
"description": "Function Declaration"
},
"Function Expression": {
"prefix": "fnexpression",
"body": [
"const ${1:functionName} = (${2:params}) => {",
" ${3}",
"};"
],
"description": "Function Expression"
},
"Function Property": {
"prefix": "fnproperty",
"body": [
"${1:functionName}: (${2:params}) {",
" ${4}",
"}${3}"
],
"description": "Function Property"
},
"beforeEach": {
"prefix": "beforeEach",
"body": [
"beforeEach(() => {",
" ${1}",
"});"
],
"description": "beforeEach"
},
"afterEach": {
"prefix": "afterEach",
"body": [
"afterEach(() => {",
" ${1}",
"});"
],
"description": "afterEach"
},
"describe": {
"prefix": "describe",
"body": [
"describe('${1:Suite Name}', () => {",
" ${2}",
"});"
],
"description": "describe"
},
"context": {
"prefix": "context",
"body": [
"context('${1:Suite Context}', () => {",
" ${2}",
"});"
],
"description": "context"
},
"it": {
"prefix": "it",
"body": [
"it('${1:Test Name}', () => {",
" ${2}",
"});"
],
"description": "it"
},
// React
"Constructor": {
"prefix": "constructor",
"body": [
"constructor(props) {",
" super(props);",
"",
" ${1}",
"}"
],
"description": "Constructor"
},
"ES7 HOC": {
"prefix": "hoc7",
"body": [
"import {"
" Component,"
" forwardRef,"
"} from 'react';",
"import PropTypes from 'prop-types';",
"",
"export default EnhancedComponent => {",
" class ${1:ComponentName} extends Component {",
" static propTypes = {",
" forwardedRef: PropTypes.func,",
" };",
" static defaultProps = {",
"",
" };",
"",
" render() {",
" const {",
" forwardedRef,",
" ...rest",
" } = this.props;",
"",
" return (",
" <EnhancedComponent",
" ref={forwardedRef}",
" {...rest}",
" ${2}",
" />",
" );",
" }",
" }",
"",
" return forwardRef((props, ref) => { // eslint-disable-line react/no-multi-comp",
" return (",
" <${1:ComponentName}",
" forwardedRef={ref}",
" {...props}",
" />",
" );",
" });",
"};"
],
"description": "ES7 HOC"
},
"ES7 Class Component": {
"prefix": "rcls7",
"body": [
"import {Component} from 'react';",
"import PropTypes from 'prop-types';",
"",
"export default class ${1:ComponentName} extends Component {",
" static propTypes = {",
"",
" };",
" static defaultProps = {",
"",
" };",
" state = {",
"",
" };",
"",
" constructor(props) {",
" super(props);",
" }",
"",
" render() {",
" return (",
" ${2:<div${3: className=\"${1:ComponentName}\"}>",
" ${4}",
" </div>}",
" );",
" }",
"}"
],
"description": "ES7 Class Component"
},
"componentDidCatch": {
"prefix": "cdc",
"body": [
"componentDidCatch(error, info) {",
" ${1}",
"}"
],
"description": "componentDidCatch"
},
"componentDidMount": {
"prefix": "cdm",
"body": [
"componentDidMount() {",
" ${1}",
"}"
],
"description": "componentDidMount"
},
"componentDidUpdate": {
"prefix": "cdu",
"body": [
"componentDidUpdate(prevProps, prevState, snapshot) {",
" ${1}",
"}"
],
"description": "componentDidUpdate"
},
"componentWillReceiveProps": {
"prefix": "cwrp",
"body": [
"componentWillReceiveProps(nextProps) {",
" ${1}",
"}"
],
"description": "componentWillReceiveProps"
},
"componentWillUnmount": {
"prefix": "cwum",
"body": [
"componentWillUnmount() {",
" ${1}",
"}"
],
"description": "componentWillUnmount"
},
"mapDispatchToProps": {
"prefix": "mdtp",
"body": [
"const mapDispatchToProps = {",
" ${1:functionPropName}: ${2:actionName}",
"};"
],
"description": "mapDispatchToProps"
},
"mapStateToProps": {
"prefix": "mstp",
"body": [
"const mapStateToProps = state => {",
" const {",
" ${1}",
" } = state;",
"",
" return {",
" ${2}",
" };",
"};"
],
"description": "mapStateToProps"
},
"PropTypes": {
"prefix": "pt",
"body": [
"${1:prop}: PropTypes.${2|any,array,arrayOf(),bool,element,func,instanceOf(),node,number,oneOf([]),oneOfType([]),object,objectOf(),shape({}),string,symbol|}${3:.isRequired}"
],
"description": "PropTypes"
},
"Stateless Functional Component": {
"prefix": "rsf",
"body": [
"import PropTypes from 'prop-types';",
"",
"const ${1:ComponentName} = props => {",
" return (",
" ${2:<div${3: className=\"${1:ComponentName}\"}>",
" ${4}",
" </div>}",
" );",
"};",
"",
"${1:ComponentName}.propTypes = {",
"",
"};",
"",
"${1:ComponentName}.defaultProps = {",
"",
"};",
"",
"export default ${1:ComponentName};"
],
"description": "Stateless Functional Component"
},
"findDOMNode": {
"prefix": "fdn",
"body": [
"ReactDOM.findDOMNode(${1});"
],
"description": "findDOMNode"
},
"ReactDOM render": {
"prefix": "rdr",
"body": [
"ReactDOM.render(${1:<App />}, ${2:document.querySelector('${3:.wrapper}')});"
],
"description": "ReactDOM render"
},
"render": {
"prefix": "render",
"body": [
"render() {",
" return (",
" <div${1: className=\"${2}\"}>${3}</div>",
" );",
"}"
],
"description": "render"
},
"shouldComponentUpdate": {
"prefix": "scu",
"body": [
"shouldComponentUpdate(nextProps, nextState) {",
" ${1}",
"}"
],
"description": "shouldComponentUpdate"
},
"state debug": {
"prefix": "sd",
"body": [
"<pre>{JSON.stringify(this.state, null, 4)}</pre>"
],
"description": "state debug"
},
"setState function": {
"prefix": "sstfnc",
"body": [
"this.setState((prevState, props) => {",
" return {",
" ${1:prop}: prevState.${2:setting}",
" };",
"});"
],
"description": "setState function"
},
"setState": {
"prefix": "sst",
"body": [
"this.setState({",
" ${1:prop}: ${2:setting}",
"});"
],
"description": "setState"
},
"getDerivedStateFromProps": {
"prefix": "gdsfp",
"body": [
"static getDerivedStateFromProps(nextProps, prevState) {",
" ${1}",
"",
" return null;",
"}"
],
"description": "getDerivedStateFromProps"
},
"getSnapshotBeforeUpdate": {
"prefix": "gsbu",
"body": [
"getSnapshotBeforeUpdate(prevProps, prevState) {",
" ${1}",
"}"
],
"description": "getSnapshotBeforeUpdate"
}
}
{
// Place your snippets for javascriptreact here. Each snippet is defined under a snippet name and has a prefix, body and
// description. 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:
// "Print to console": {
// "prefix": "log",
// "body": [
// "console.log('$1');",
// "$2"
// ],
// "description": "Log output to console"
// }
"Constructor": {
"prefix": "constructor",
"body": [
"constructor(props) {",
" super(props);",
"",
" ${1}",
"}"
],
"description": "Constructor"
},
"ES7 HOC": {
"prefix": "hoc7",
"body": [
"import {"
" Component,"
" forwardRef,"
"} from 'react';",
"import PropTypes from 'prop-types';",
"",
"export default EnhancedComponent => {",
" class ${1:ComponentName} extends Component {",
" static propTypes = {",
" forwardedRef: PropTypes.func,",
" };",
" static defaultProps = {",
"",
" };",
"",
" render() {",
" const {",
" forwardedRef,",
" ...rest",
" } = this.props;",
"",
" return (",
" <EnhancedComponent",
" ref={forwardedRef}",
" {...rest}",
" ${2}",
" />",
" );",
" }",
" }",
"",
" return forwardRef((props, ref) => { // eslint-disable-line react/no-multi-comp",
" return (",
" <${1:ComponentName}",
" forwardedRef={ref}",
" {...props}",
" />",
" );",
" });",
"};"
],
"description": "ES7 HOC"
},
"ES7 Class Component": {
"prefix": "rcls7",
"body": [
"import {Component} from 'react';",
"import PropTypes from 'prop-types';",
"",
"export default class ${1:ComponentName} extends Component {",
" static propTypes = {",
"",
" };",
" static defaultProps = {",
"",
" };",
" state = {",
"",
" };",
"",
" constructor(props) {",
" super(props);",
" }",
"",
" render() {",
" return (",
" ${2:<div${3: className=\"${1:ComponentName}\"}>",
" ${4}",
" </div>}",
" );",
" }",
"}"
],
"description": "ES7 Class Component"
},
"componentDidCatch": {
"prefix": "cdc",
"body": [
"componentDidCatch(error, info) {",
" ${1}",
"}"
],
"description": "componentDidCatch"
},
"componentDidMount": {
"prefix": "cdm",
"body": [
"componentDidMount() {",
" ${1}",
"}"
],
"description": "componentDidMount"
},
"componentDidUpdate": {
"prefix": "cdu",
"body": [
"componentDidUpdate(prevProps, prevState, snapshot) {",
" ${1}",
"}"
],
"description": "componentDidUpdate"
},
"componentWillReceiveProps": {
"prefix": "cwrp",
"body": [
"componentWillReceiveProps(nextProps) {",
" ${1}",
"}"
],
"description": "componentWillReceiveProps"
},
"componentWillUnmount": {
"prefix": "cwum",
"body": [
"componentWillUnmount() {",
" ${1}",
"}"
],
"description": "componentWillUnmount"
},
"mapDispatchToProps": {
"prefix": "mdtp",
"body": [
"const mapDispatchToProps = {",
" ${1:functionPropName}: ${2:actionName}",
"};"
],
"description": "mapDispatchToProps"
},
"mapStateToProps": {
"prefix": "mstp",
"body": [
"const mapStateToProps = state => {",
" const {",
" ${1}",
" } = state;",
"",
" return {",
" ${2}",
" };",
"};"
],
"description": "mapStateToProps"
},
"PropTypes": {
"prefix": "pt",
"body": [
"${1:prop}: PropTypes.${2|any,array,arrayOf(),bool,element,func,instanceOf(),node,number,oneOf([]),oneOfType([]),object,objectOf(),shape({}),string,symbol|}${3:.isRequired}"
],
"description": "PropTypes"
},
"Stateless Functional Component": {
"prefix": "rsf",
"body": [
"import PropTypes from 'prop-types';",
"",
"const ${1:ComponentName} = props => {",
" return (",
" ${2:<div${3: className=\"${1:ComponentName}\"}>",
" ${4}",
" </div>}",
" );",
"};",
"",
"${1:ComponentName}.propTypes = {",
"",
"};",
"",
"${1:ComponentName}.defaultProps = {",
"",
"};",
"",
"export default ${1:ComponentName};"
],
"description": "Stateless Functional Component"
},
"findDOMNode": {
"prefix": "fdn",
"body": [
"ReactDOM.findDOMNode(${1});"
],
"description": "findDOMNode"
},
"ReactDOM render": {
"prefix": "rdr",
"body": [
"ReactDOM.render(${1:<App />}, ${2:document.querySelector('${3:.wrapper}')});"
],
"description": "ReactDOM render"
},
"render": {
"prefix": "render",
"body": [
"render() {",
" return (",
" <div${1: className=\"${2}\"}>${3}</div>",
" );",
"}"
],
"description": "render"
},
"shouldComponentUpdate": {
"prefix": "scu",
"body": [
"shouldComponentUpdate(nextProps, nextState) {",
" ${1}",
"}"
],
"description": "shouldComponentUpdate"
},
"state debug": {
"prefix": "sd",
"body": [
"<pre>{JSON.stringify(this.state, null, 4)}</pre>"
],
"description": "state debug"
},
"setState function": {
"prefix": "sstfnc",
"body": [
"this.setState((prevState, props) => {",
" return {",
" ${1:prop}: prevState.${2:setting}",
" };",
"});"
],
"description": "setState function"
},
"setState": {
"prefix": "sst",
"body": [
"this.setState({",
" ${1:prop}: ${2:setting}",
"});"
],
"description": "setState"
},
"getDerivedStateFromProps": {
"prefix": "gdsfp",
"body": [
"static getDerivedStateFromProps(nextProps, prevState) {",
" ${1}",
"",
" return null;",
"}"
],
"description": "getDerivedStateFromProps"
},
"getSnapshotBeforeUpdate": {
"prefix": "gsbu",
"body": [
"getSnapshotBeforeUpdate(prevProps, prevState) {",
" ${1}",
"}"
],
"description": "getSnapshotBeforeUpdate"
}
}
{
// Place your snippets for scss here. Each snippet is defined under a snippet name and has a prefix, body and
// description. 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:
// "Print to console": {
// "prefix": "log",
// "body": [
// "console.log('$1');",
// "$2"
// ],
// "description": "Log output to console"
// }
"Box Shadow": {
"prefix": "box-shadow",
"body": [
"box-shadow: ${1:1}px ${2:1}px ${3:4}px ${4:4}px ${5:#000000};"
],
"description": "Box Shadow"
},
"Text Shadow": {
"prefix": "text-shadow",
"body": [
"text-shadow: ${1:1}px ${2:1}px ${3:4}px ${4:#000000};"
],
"description": "Text Shadow"
},
"Breakpoint": {
"prefix": "bp",
"body": [
"@include breakpoint(\\$breakpoint-${1:xl}) {",
" ${2}",
"}"
],
"description": "Breakpoint"
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment