如何在 VS Code 快速建立 User Snippet ?

栏目: CSS · 发布时间: 6年前

内容简介：雖然可以到Ｍarketplace 下載別人建立好的 Snippet，但實務上常常會有自己特殊的 Code Snippet 不斷出現，此時就得自行建立 User Snippet。是否有更快速方式建立 User Snippet 呢 ?VS Code 1.33.1Snippet-creator 0.0.5

雖然可以到Ｍarketplace 下載別人建立好的 Snippet，但實務上常常會有自己特殊的 Code Snippet 不斷出現，此時就得自行建立 User Snippet。是否有更快速方式建立 User Snippet 呢 ?

Version

VS Code 1.33.1

Snippet-creator 0.0.5

User Snippet

如何在 VS Code 快速建立 User Snippet ?

VS Code 預設的 user snippet 如上圖所示，必須在 body 內每一行以 string 方式建立 array。

若是 ECMAScript，因為 snippet 通常是幾行而已，問題不大。

但若是 HTML，由於行數較多，若一一建立 string array，則相當沒有效率，因此我們需要更有效率方式建立 user snippet。

Snippet Creator

如何在 VS Code 快速建立 User Snippet ?

輸入 snippet creator ，選擇 snippet-creator 。

bs4.html

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

    <title>Hello, world!</title>
  </head>
  <body>
    <h1>Hello, world!</h1>

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
  </body>
</html>

以 Bootstrap 4.3 的 starter template 為例，我們希望輸入 bs4 就會出現以上 HTML，若要自己產生 body 所需要的 string array 就太辛苦了。

如何在 VS Code 快速建立 User Snippet ?

⌘A 全選 Bootstrap starter template
⌘⇧P 啟動 command palette，輸入 create ，選擇 Create Snipper
輸入 html 選擇建立 HTML template
輸入 bs4 為 snippet name，為 key 必須為一不重複
輸入 bs4 為 prefix，也就是實際要輸入的文字
Description 輸入空白，也可稍後再補上
⌘⇧P 啟動 command palette，輸入 user snippet ，選擇 Preferences: Configure User Snippets
已自動建立 user snippet 在 ~/Library/Application Support/Code/User/snippets/html.json

VS Code Snippet

html.json

{
  "bs4": {
    "prefix": "bs4",
    "body": [
      "<!doctype html>",
      "<html lang=\"en\">",
      "  <head>",
      "    <!-- Required meta tags -->",
      "    <meta charset=\"utf-8\">",
      "    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1, shrink-to-fit=no\">",
      "",
      "    <!-- Bootstrap CSS -->",
      "    <link rel=\"stylesheet\" href=\"https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css\" integrity=\"sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T\" crossorigin=\"anonymous\">",
      "",
      "    <title>Hello, world!</title>",
      "  </head>",
      "  <body>",
      "    $1",
      "",
      "    <!-- Optional JavaScript -->",
      "    <!-- jQuery first, then Popper.js, then Bootstrap JS -->",
      "    <script src=\"https://code.jquery.com/jquery-3.3.1.slim.min.js\" integrity=\"sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo\" crossorigin=\"anonymous\"></script>",
      "    <script src=\"https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js\" integrity=\"sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1\" crossorigin=\"anonymous\"></script>",
      "    <script src=\"https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js\" integrity=\"sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM\" crossorigin=\"anonymous\"></script>",
      "  </body>",
      "</html>"
    ],
    "description": "Default Bootstrap 4 starter template"
  }
}

prefix ：定義 snippet 名稱，也是我們要在 VS Code 要輸入的文字
body ：將原本的 startup template 貼到 body 下，為 array，每一行為 string
description ：輸入 prefix 時，在 VS Code 會顯示的註解

17 行

"  <body>",
"    $1",
"",

可加上 $1 、 $2 … 等代表 cursor 依次停留之處。

28 行

"description": "Default Bootstrap 4 starter template"

補上剛剛未輸入的 description。

如何在 VS Code 快速建立 User Snippet ?

bs4
$1

Conclusion

Snippet-creator 雖然已經不再維護，但目前為止功能依舊正常，在沒有新的工具前，可以先頂著用
一但 workflow 經常出現 copy & paste，就該善用 VS Code 的 user snippet，可省下 copy & paste 時間，大幅提高生產力

Reference

Nikita Kunevich , Snippet-creator

以上所述就是小编给大家介绍的《如何在 VS Code 快速建立 User Snippet ?》，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对码农网的支持！

查看所有标签

猜你喜欢:

本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。

码农书籍

打造Facebook

王淮、祝文让 / 印刷工业出版社 / 2013-2-1 / 39.80元

《打造Facebook》新书发布会，王淮与读者面对面，活动链接：http://www.douban.com/event/18166913/ 这本书的书名——《打造Facebook：亲历Facebook爆发的5年》很嚣张，谁有资格可以说这句话呢，当然，扎克伯格最有资格，但他不会亲自来告诉你，至少从目前的情况来看，近几年都不大可能。而且，这不是一个人的公司。里面的每一人，尤其是工程师，既是公司文......一起来看看《打造Facebook》这本书的介绍吧!

码农工具