【效率IDE】vscode 使用 snippets 為 .vue 生成模板
阿新 • • 發佈:2018-12-17
VSCODE是一款輕量級的IDE,開啟速度快,快捷操作便捷,支援的語言多和外掛多,社群大生態完善,很適合開發人員使用。
0x1 少說話,先看效果
記錄下vscode中使用 snippets 為.vue檔案生成提前定義好的模板,提高我們開發的效率:
0x2 具體實現
1. ctrl + shift + p 開啟vscode的快速導航命令欄
2.輸入 snippets 後,選擇首選項:配置使用者程式碼片段
3.輸入vue 後點擊 vue.json後就可以在裡面輸入模板,具體格式如下:
{ "Print to console": { "prefix": "vue", "body": [ "<template>", " <div></div>", "</template>", "", "<script type=\"text/ecmascript-6\">", "export default {", " data () {", " return {", " };", " },", "", " components: {},", "", " computed: {},", "", " mounted: {},", "", " methods: {}", "}", "", "</script>", "<style lang=\"stylus\" rel=\"stylesheet/stylus\">", "</style>" ], "description": "Log output to console" } }
這樣當我們新建一個.vue檔案並輸入vue後按tab鍵,就能夠生成一套我們在vue.json裡定義的模板,這裡有幾點需要注意:
- 我們可以在vue.json中定義多個snippets,隨後我們根據 "prefix":"vue"裡定義的值,就能夠在.vue中引用到
- vue.json這個檔案命表示能夠在.vue的檔案中使用snippets,同理如果我們想在 .html中使用,就需要在html.json裡去定義我們的模板
- 知道了這個方式,我們就可以在大多數檔案中使用snippets了