VS Code中如何自定义代码片段

刺骨的言语ヽ痛彻心扉 2022-12-07 12:50 188阅读 0赞

## VS Code中如何自定义代码片段 ##

1.为了避免在学习vuejs的过程中重复写框架，所以我们先写好一个模版，如下：

<!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <meta http-equiv="X-UA-Compatible" content="ie=edge">
      <title>模版</title>
      
      
      <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js"></script>
      
    </head>
    <body>
    
      
      <div id="app">
        {
        {
        message}}
      </div>
      
      
      <script>
        const app = new Vue({
        
          el: "#app",
          data: {
        
            message: "hello!"
          },
        })
      </script>
      
    </body>
    </html>

2.然后打开 File-> Preference->User Snippets 出现选项。  
 汉化后的打开顺序：文件->首选项->用户代码片段  
注：如果第一次进行操作，可能没有后缀.json，请选择html，不是vue-html。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3h4eHh4eHh4MDA3NzIyOTk_size_16_color_FFFFFF_t_70_pic_center]  
3.在html.json中进行编写模版，在编写的过程中要注意，如果**模版本身有引号**，需要在**引号的前面**加上 \*\*反斜线 \\ \*\*

{
        
    	"vue":{
        
    		"prefix": "vue", 
    		"body": [
    			"<!DOCTYPE html>"
    			"<html lang=\"en\">"
    			"<head>"
    			"	<meta charset=\"UTF-8\">"
    			"	<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">"
    			"	<meta http-equiv=\"X-UA-Compatible\" content=\"ie=edge\">"
    			"	<title>模版</title>"
    			""
    			"	"
    			"	<script src=\"https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js\"></script>"
    			""
    			"</head>"
    			"<body>"
    			""
    			"	"
    			"	<div id=\"app\">"
    			"		{
        {message}}"
    			"	</div>"
    			""	
    			"	"
    			"	<script>"
    			"		const app = new Vue({"
    			"			el: \"#app\","
    			"			data: {"
    			"				message: \"hello!\""
    			"			},"
    			"		})"
    			"	</script>"
    			""	
    			"</body>"
    			"</html>"
    		],
    		"description":"vue components"
    	},
    }

4.这样就设置完了，再需要写一样的模板的时候只需输vue，直接table，或选择如下图所示：  
![在这里插入图片描述][2020091610460837.png_pic_center]

--------------------

好了，今天的分享就结束了，每天一个小技巧，每天进步一点点！！！

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3h4eHh4eHh4MDA3NzIyOTk_size_16_color_FFFFFF_t_70_pic_center]: /images/20221123/5173eac03bf54a8086c29bd0f8041e88.png
[2020091610460837.png_pic_center]: /images/20221123/4eaf05573e154c04a84902b34d0bc8a7.png