天天看點

vscode中使用 vue+ts 代碼片段vscode中使用 vue+ts 代碼片段

vscode中使用 vue+ts 代碼片段

  1. 點選vscode設定按鈕
  2. 選中 使用者代碼片段
    vscode中使用 vue+ts 代碼片段vscode中使用 vue+ts 代碼片段
  3. 建立全局代碼片段
    vscode中使用 vue+ts 代碼片段vscode中使用 vue+ts 代碼片段
  4. 然後複制下面json 粘貼到建立的檔案裡 儲存
    {
    	// Place your 全局 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": "javascript,typescript",
    	// 	"prefix": "log",
    	// 	"body": [
    	// 		"console.log('$1');",
    	// 		"$2"
    	// 	],
    	// 	"description": "Log output to console"
    	// }
    	"Vue Ts": {
    		"prefix": "vts",
    		"body": [
    				"<template>",
    				" <div class=\"$1\">",
    				" ",
    				" </div>",
    				"</template>",
    				" ",
    				"<script ts\">",
    				"import { Component, Vue, Watch } from 'vue-property-decorator'",
    				"@Component({",
    				"  name: 'Default' ",
    				"})",
    				"export default class Default extends Vue {",
    				"  @Watch('name')",
    				"  getWatchValue(newVal: string, oldVal: string) {",
    				"    console.log(newVal, oldVal)",
    				"  }",
    				"  mounted() {",
    				"    console.log('mounted')",  
    				"  }",
    				"}",
    				"</script>",
    				" ",
    				"<style scoped scss\">",
    				"// @import './index.scss';",
    				"</style>"
    		],
    		"description": "vue檔案 ts模闆"
    	}
    }
               
  5. 在vue檔案中 輸入 vts
    vscode中使用 vue+ts 代碼片段vscode中使用 vue+ts 代碼片段
    然後回車就生成了
    vscode中使用 vue+ts 代碼片段vscode中使用 vue+ts 代碼片段

繼續閱讀