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中快速創建自定義代碼模板的方法的文章就介紹到這了,更多相關Vscode 創建自定義代碼模板內容請搜索武林網以前的文章或繼續瀏覽下面的相關文章希望大家以后多多支持武林網!
新聞熱點
疑難解答