vscode snippets 是時候了解一波了

也許你用過submit和atom,那不妨你們也試試vscode的snippets。

ctrl+shift+p

有了這麼明顯的提示,那我們也來弄一個vue的代碼片段吧

{ // Place your global snippets here. Each snippet is defined under a snippet name and has a scope, prefix, body and // description. Add comma separated ids of the languages where the snippet is applicable in the scope field. If scope // is left empty or omitted, the snippet gets applied to all languages. 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": { "scope": "vue", "prefix": "vue", "body": [ "<template lang=html>
<div class=container>
$1
<div>
</template>
<script>
export default {
name: demo,
data () {
$2
},
methods:{
$3
}
}
</script>
<style scoped>
$4
</style>" ], "description": "vue snippets代碼片段" }}

寫了一個自用的,生成格式形如這樣

<template lang=html> <div class=container> <div></template><script> export default { name: demo, data () { }, methods:{ } }</script><style scoped> </style>

輸入vue,必須是vue文件喔,按下tab鍵,代碼就變成上面那樣,再按下tab鍵,就會跳到$2的位置,再按下tab鍵,就會跳到$3的位置,其他的皆如此


推薦閱讀:

vue.js實例項目有木有?
vue,react之類的框架是不是弱化了對前端人員js水平的要求?
Vue.js如何優雅的進行form validation?
src屬性綁定出錯?
前端來防止csrf,這個做法是否有漏洞?

TAG:VisualStudioCode | Vuejs | 前端開發 |