vscode custom code-snippets All In One

vscode code template

code snippets types

1. built-in snippets
2. user snippets ?
3. extensions snippets

https://code.visualstudio.com/docs/editor/userdefinedsnippets#_creating-your-own-snippets

https://code.visualstudio.com/docs/editor/extension-marketplace

https://marketplace.visualstudio.com/search?term=snippets&target=VSCode

extensions & react snippets

{
  // ...
  "contributes": {
    "snippets": [
      {
        "language": "javascriptreact",
        "path": "./snippets/snippets.json"
      },
      {
        "language": "javascript",
        "path": "./snippets/snippets.json"
      },
      {
        "language": "typescript",
        "path": "./snippets/snippets.json"
      },
      {
        "language": "typescriptreact",
        "path": "./snippets/snippets.json"
      }
    ]
  }
}

https://github.com/xabikos/vscode-react/blob/master/package.json#L22-L41

{
  "reactClassComponent": {
    "prefix": "rcc",
    "body": "import React, { Component } from 'react';\n\nclass ${1:${TM_FILENAME_BASE}} extends Component {\n\trender() {\n\t\treturn (\n\t\t\t
\n\t\t\t\t$0\n\t\t\t
\n\t\t);\n\t}\n}\n\nexport default ${1:${TM_FILENAME_BASE}};",
    "description": "Creates a React component class with ES6 module system"
  },
  // ...
}

https://github.com/xabikos/vscode-react/blob/master/snippets/snippets.json#L2-L6

vscode snippets generator

demos

HTML5 template

{
  "HTML5 Template": {
    "prefix": "h5t",
    "body": [
      "",
      "",
      "",
      "  ",
      "  ",
      "  ",
      "  ",
      "  ",
      "  ",
      "  ",
      "  ",
      "",
      "",
      "  
",
      "    
$2
",
      "  
",
      "  
",
      "    
",
      "      
",
      "        $3",
      "      
",
      "    
",
      "  
",
      "  ",
      "  ",
      "  ",
      "",
      ""
    ],
    "description": "HTML5 Template & code snippets!"
  }
}

AMP HTML5 template

{
  "AMP HTML5 Template": {
    "prefix": "a5t",
    "body": [
      "",
      "",
      "",
      "  ",
      "  ",
      "  ",
      "  ",
      "  ",
      "  ",
      "  ",
      "  ",
      "  ",
      "  ",
      "  ",
      "  ",
      "  ",
      "  ",
      "",
      "",
      "  
",
      "    
$2
",
      "  
",
      "  
",
      "    
",
      "      
",
      "        $3",
      "      
",
      "    
",
      "  
",
      "  ",
      "  ",
      "  ",
      "",
      ""
    ],
    "description": "AMP HTML5 Template & code snippets!"
  }
}

PWA HTML5 template

{
  "PWA HTML5 Template": {
    "prefix": "p5t",
    "body": [
      "",
      "",
      "",
      "  ",
      "  ",
      "  ",
      "  ",
      "  ",
      "  ",
      "  ",
      "  ",
      "  ",
      "  ",
      "  ",
      "  ",
      "  ",
      "  ",
      "  ",
      "  ",
      "  ",
      "  ",
      "  ",
      "  ",
      "",
      "",
      "  
",
      "    
$2
",
      "  
",
      "  
",
      "    
",
      "      
",
      "        $3",
      "      
",
      "    
",
      "  
",
      "  ",
      "  ",
      "  ",
      "",
      ""
    ],
    "description": "PWA HTML5 Template & code snippets!"
  }
}

TextMate snippet syntax

https://macromates.com/manual/en/snippets

React code snippets

vscode extensions / vscode plugins

refs

https://code.visualstudio.com/docs/editor/userdefinedsnippets

https://www.cnblogs.com/xgqfrms/tag/code snippets/

https://github.com/xgqfrms/vscode

?xgqfrms 2012-2020

www.cnblogs.com/xgqfrms 发布文章使用：只允许注册用户才可以访问！

原创文章，版权所有??xgqfrms, 禁止转载 ???，侵权必究??！