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了