xgqfrms™, xgqfrms® : xgqfrms's offical website of cnblogs! xgqfrms™, xgqfrms® : xgqfrms's offical website of GitHub!

vscode custom code-snippets All In One

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<div>\n\t\t\t\t$0\n\t\t\t</div>\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": [
      "<!DOCTYPE html>",
      "<html lang=\"zh-Hans\">",
      "<head>",
      "  <meta charset=\"UTF-8\">",
      "  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">",
      "  <meta http-equiv=\"X-UA-Compatible\" content=\"ie=edge\">",
      "  <meta name=\"author\" content=\"xgqfrms\">",
      "  <meta name=\"generator\" content=\"VS code\">",
      "  <title>$1</title>",
      "  <style>",
      "    * {",
      "      box-sizing: border-box;",
      "      margin: 0;",
      "      padding: 0;",
      "    }",
      "  </style>",
      "  <!-- <link rel=\"stylesheet\" href=\"./index.css\"> -->",
      "</head>",
      "<body>",
      "  <header>",
      "    <h1>$2</h1>",
      "  </header>",
      "  <main>",
      "    <article>",
      "      <section>",
      "        <a href=\"https://feiqa.xgqfrms.xyz/index.html\">$3</a>",
      "      </section>",
      "    </article>",
      "  </main>",
      "  <footer>",
      "    <p>copyright&copy; xgqfrms 2021</p>",
      "  </footer>",
      "  <!-- js -->",
      "  <script>",
      "    const log = console.log;",
      "  </script>",
      "</body>",
      "</html>"
    ],
    "description": "HTML5 Template & code snippets!"
  }
}

AMP HTML5 template

{
  "AMP HTML5 Template": {
    "prefix": "a5t",
    "body": [
      "<!DOCTYPE html>",
      "<html ⚡️ lang=\"zh-Hans\">",
      "<head>",
      "  <meta charset=\"UTF-8\">",
      "  <script async src=\"https://cdn.ampproject.org/v0.js\"></script>",
      "  <!--",
      "    <link rel=\"preload\" as=\"script\" href=\"https://cdn.ampproject.org/v0.js\">",
      "  -->",
      "  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">",
      "  <meta http-equiv=\"X-UA-Compatible\" content=\"ie=edge\">",
      "  <meta name=\"author\" content=\"xgqfrms\">",
      "  <meta name=\"generator\" content=\"VS code\">",
      "  <title>$1</title>",
      "  <link rel=\"canonical\" href=\"https://amp.dev/zh_cn/documentation/guides-and-tutorials/start/create/basic_markup\">",
      "  <script type=\"application/ld+json\">",
      "    {",
      "       \"@context\": \"http://schema.org\",",
      "       \"@type\": \"NewsArticle\",",
      "       \"headline\": \"Open-source framework for publishing content\",",
      "       \"datePublished\": \"2022-05-01T12:00:00Z\",",
      "       \"@image\": [",
      "         \"logo.jpg\",",
      "       ]",
      "    }",
      "  </script>",
      "  <style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style>",
      "  <noscript>",
      "    <style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style>",
      "  </noscript>",
      "  <style>",
      "    * {",
      "      box-sizing: border-box;",
      "      margin: 0;",
      "      padding: 0;",
      "    }",
      "  </style>",
      "  <!-- <link rel=\"stylesheet\" href=\"./index.css\"> -->",
      "</head>",
      "<body>",
      "  <header>",
      "    <h1>$2</h1>",
      "  </header>",
      "  <main>",
      "    <article>",
      "      <section>",
      "        <a href=\"https://feiqa.xgqfrms.xyz/index.html\">$3</a>",
      "      </section>",
      "    </article>",
      "  </main>",
      "  <footer>",
      "    <p>copyright&copy; xgqfrms 2021</p>",
      "  </footer>",
      "  <!-- js -->",
      "  <script>",
      "    const log = console.log;",
      "  </script>",
      "</body>",
      "</html>"
    ],
    "description": "AMP HTML5 Template & code snippets!"
  }
}

PWA HTML5 template

{
  "PWA HTML5 Template": {
    "prefix": "p5t",
    "body": [
      "<!DOCTYPE html>",
      "<html lang=\"zh-Hans\">",
      "<head>",
      "  <meta charset=\"UTF-8\">",
      "  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">",
      "  <meta http-equiv=\"X-UA-Compatible\" content=\"ie=edge\">",
      "  <meta name=\"author\" content=\"xgqfrms\">",
      "  <meta name=\"generator\" content=\"VS code\">",
      "  <!-- PWA -->",
      "  <meta name=\"version\" content=\"pwa-$1-app-v1\">",
      "  <link rel=\"icon\" href=\"./favicon.ico\" type=\"image/x-icon\" />",
      "  <link rel=\"icon\" href=\"./favicon.png\" type=\"image/png\" />",
      "  <link rel=\"manifest\" href=\"./manifest.json\">",
      "  <meta name=\"description\" content=\"A PWA $1 App\">",
      "  <meta name=\"theme-color\" content=\"#2F3BA2\" />",
      "  <meta name=\"apple-mobile-web-app-capable\" content=\"yes\">",
      "  <meta name=\"apple-mobile-web-app-status-bar-style\" content=\"black\">",
      "  <meta name=\"apple-mobile-web-app-title\" content=\"PWA $1 App\">",
      "  <link rel=\"apple-touch-icon\" href=\"./icons/icon-152x152.png\">",
      "  <!-- PWA -->",
      "  <title>$2</title>",
      "  <style>",
      "    * {",
      "      box-sizing: border-box;",
      "      margin: 0;",
      "      padding: 0;",
      "    }",
      "  </style>",
      "  <!-- <link rel=\"stylesheet\" href=\"./index.css\"> -->",
      "</head>",
      "<body>",
      "  <header>",
      "    <h1>$2</h1>",
      "  </header>",
      "  <main>",
      "    <article>",
      "      <section>",
      "        <a href=\"https://feiqa.xgqfrms.xyz/index.html\">$3</a>",
      "      </section>",
      "    </article>",
      "  </main>",
      "  <footer>",
      "    <p>copyright&copy; xgqfrms 2022</p>",
      "  </footer>",
      "  <!-- js -->",
      "  <script>",
      "    const log = console.log;",
      "  </script>",
      "</body>",
      "</html>"
    ],
    "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, 禁止转载 🈲️，侵权必究⚠️！

posted @ 2022-05-07 14:57  xgqfrms  阅读(59)  评论(3)  编辑  收藏  举报