Visual Studio Code修改HTML Snippets外掛程式中預設範本內容_

Visual Studio Code修改HTML Snippets外掛程式中預設範本內容__HTML

最後更新：2018-07-29 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

最近在熟悉用VSC做前端開發編輯器,發現snippets這個功能很好用,就是自動幫你輸入HTML標籤,安裝HTML Snippets外掛程式(0.1.0)後,直接在代碼裡面輸入html5然後敲斷行符號就會自動幫你把一個HTML5標準標籤模板給填充好,但是有一個小問題就是,自動填滿的效果是這樣的:

<!DOCTYPE html><html lang="en">    <head>        <title></title>        <meta charset="UTF-8">        <meta name="viewport" content="width=device-width, initial-scale=1">        <link href="css/style.css" rel="stylesheet">    </head>    <body>    </body></html>

這裡lang=”en”,我想修改預設填充成lang=”zh-CN”,小折騰了一下,找到了這個外掛程式的設定檔位於

C:\Users\Dexter\.vscode\extensions\abusaidm.html-snippets-0.1.0\snippets\snippets.json

開啟這個檔案,找到定義html5映射的部分,修改如下,重啟一下VSC,再輸入html5就變成想要的效果了

"html5": {    "prefix": "html5",    "body": [        "<!DOCTYPE html>",        "<html lang=\"$1zh-CN\">",            ~~這裡原來是en~~        "\t<head>",        "\t\t<title>$2</title>",        "\t\t<meta charset=\"UTF-8\">",        "\t\t<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">",        "\t\t<link href=\"$3css/style.css\" rel=\"stylesheet\">",        "\t</head>",        "\t<body>",        "\t$4",        "\t</body>",        "</html>"        ],    "description": "HTML - Defines a template for a html5 document",    "scope": "text.html"    },

補充一下

也可以在檔案-喜好設定-使用者自訂程式碼片段,找到HTML後,在html.json設定檔裡面寫上自己常用的程式碼片段,例如下面這個是我修改的包含Vue.js引用的HTML5代碼模板:

{    /*    // 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"    }*/    "Vue": {        "prefix": "vue",        "body": [            "<!DOCTYPE html>",            "<html lang=\"zh-CN\">",            "\t<head>",            "\t\t<title>$1</title>",            "\t\t<meta charset=\"UTF-8\">",            "\t\t<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">",            "\t\t<script src=\"https://cdn.bootcss.com/vue/2.2.2/vue.min.js\"></script>",            "\t</head>",            "\t<body>",            "\t$2",            "\t</body>",            "</html>"        ],        "description": "vue - Defines a template for a vue & html5 document"    }}

這裡需要注意一下,代碼中$1,$2標註的位置是自動插入程式碼片段之後游標的位置,$1是預設位置,$2是按tab鍵之後會跳轉到的下一個位置

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More