vscode配置js文件、vue文件代码片段、多个代码片段

冷不防 2022-02-24 10:28 660阅读 0赞

在vscode编辑器中，

**（1）Ctrl+Shift+P快捷键打开：**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3p5ejAwMDAwMDAw_size_16_color_FFFFFF_t_70][]

**（2）搜索Preferences：Configure User Snippets，即配置用户代码片段**

**（3）搜索vue.json文件**

**.vue文件在vue.json文件中配置：**

**.js文件在Javascript.json文件中配置：**

"Print to console": {
    		"prefix": "vuex",
    		"body": [
    			"export default {",
    				"namespaced: true,",
    				"state: {",
    				"",	
    				"},",
    				"getters: {",
    			 	"",
    				"},",
    				"mutations: {",
    				"",	
    				"},",
    				"actions: {",
    				"",
    				"}",
    			"}",
    		],
    		"description": "vuex代码片段"
    	}

**注意**：因为是json文件，body内的**每一行都要用双引号**引起来，并且每一行以**逗号**结尾

2. 多个代码片段：在创建一个对象：

"Print to console": {
    		"prefix": "vue",
    		"body": [
    			"<template>",
    			"",
    			"",
    			"</template>",
    			"",
    			"<script>",
    			"export default {",
    			"",
    			"}",
    			"</script>",
    			"<style lang='scss' scoped>",
    			"",
    			"</style>",
    			""
    		],
    		"description": "vue code"
    	},
    	"(代码片段2：自定义名字)": {
    		"prefix": "vue2",
    		"body": [
    			"<template>",
    			"",
    			"",
    			"</template>",
    			"",
    			"<script>",
    			"export default {",
    			"",
    			"}",
    			"</script>",
    			"<style lang='scss' scoped>",
    			"",
    			"</style>",
    			""
    		],
    		"description": "vue2 code"
    	}

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3p5ejAwMDAwMDAw_size_16_color_FFFFFF_t_70]: /images/20220224/d4a94ad96e944e43b4abdec079c1b30d.png