您好,登錄后才能下訂單哦!
小編給大家分享一下Vscode中要如何快速創建自定義代碼模板的,相信大部分人都還不怎么了解,因此分享這篇文章給大家參考一下,希望大家閱讀完這篇文章后大有收獲,下面讓我們一起去了解一下吧!
Vscode中快速創建自定義代碼模板
一招鮮,吃遍天,學會了這個在Vscode
中快速創建自定義代碼模板的教程,我相信創建其它代碼模板的方法你也就通個七七八八了。
我就以Vue的創建為例,不過我這個Vue是在HTML中創建的。
.html
文件中引入vue包,然后編寫自己的vue代碼。.html
文件下,所以我們的模板也得是在html.json
中來進行編寫。教程如下:
圖文并用,理解更清晰到位!
在Vscode中找到設置
-> 用戶代碼片段
,在輸入框內輸入html
,并點擊第一個html.json
:
初次輸入的話,第一個html.json
可能會不帶.json
后綴,不用管,直接點擊html
進入即可。
我們進入到html.json
頁面,這里就是我們編寫自己模板的地方了:
接下里就是編寫我們的模板了,我們的模板需要的大致有以下幾項:
1.基本的HTML架構。
2.引入Vue包的script路徑。
3.一些基本的Vue代碼結構。
模板我已經備好了,模板如下:
"Html5-Vue": { "prefix": "vue", "body": [ "<!DOCTYPE html>", "<html lang=\"zh-CN\">\n", "<head>", "\t<meta charset=\"UTF-8\">", "\t<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">", "\t<meta http-equiv=\"X-UA-Compatible\" content=\"ie=edge\">", "\t<title>Document</title>", "\t<script src=\"../lib/vue-2.5.17/vue.js\"></script>", "</head>\n", "<body>", "\t<div id=\"app\">$1</div>\n", "\t<script>", "\t\tvar vm = new Vue({", "\t\t\tel: '#app',", "\t\t\tdata: {},", "\t\t\tmethods: {}", "\t\t});", "\t</script>", "</body>\n", "</html>" ], "description": "快速創建在html5編寫的vue模板" }
把上面的這個模板拷貝到html.json
中即可,當然路徑要變成自己的本機路徑,其余的地方如果看著不舒服也可以自行更改。
保存之后,我們創建一個.html
文件,輸入vue,回車即可自動生成我們需要的模板了。模板示例圖:
必要的解釋
為了防止大家更改模板時出現不必要的錯誤,我給大家簡單說一下模板中的東西:
以上是Vscode中要如何快速創建自定義代碼模板的的所有內容,感謝各位的閱讀!相信大家都有了一定的了解,希望分享的內容對大家有所幫助,如果還想學習更多知識,歡迎關注億速云行業資訊頻道!
免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。