Windows 设置vscode 的 user snippets 片段

￡神魔★判官ぃ 2022-10-29 09:22 193阅读 0赞

如题，最近在学习React，想着每次都把一些代码粘贴来粘贴去，很麻烦，所以，就想着用一下Vscode的超好用功能 snippet 功能，也就是你一打开空文件时，可以直接通过一些快捷的输入生成一些必要的，但没必要每次都打的代码。相当好用

### 1、设置路径 ###

英文版：在vscode界面找到 file—>preference---->user snippet—>html.json

中文版: 在vscode界面找到 文件—>首选项---->用户片段—>html.json

快捷键版:

1.ctrl+shift+p  
2.选择 Preferences: Configure User Snippets  
![在这里插入图片描述][20210211123043348.png]  
3.选择语言 html.json  
![在这里插入图片描述][20210211123051972.png]

### 目标 ###

在vscode中输入createreact 然后产生一个自己想要的模板  
写好模板  
在线上写好模板  
传送门：https://snippet-generator.app/  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d1eXhpbnU_size_16_color_FFFFFF_t_70]

1是标题,对应  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d1eXhpbnU_size_16_color_FFFFFF_t_70 1]  
2是前缀.对应在vue中使用的快捷键 createreact  
3就是需要显示的代码段了  
附上自己的代码和生成后的模板

// 代码

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
    </head>
    <body>
      <div id="app"></div>
     
      
      <script src="../react/react.development.js"></script>
      <script src="../react/react-dom.development.js"></script>
      <script src="../react/babel.min.js"></script>
     
      <script type="text/babel">
        class App extends React.Component {
          constructor() {
            super();
          }
     
          render() {
            return (
              <div>
                hello World
              </div> 
            )
          }
        }
     
        ReactDOM.render(<App/>, document.getElementById('app'))
      </script>
    </body>
    </html>

{
    "creact react snippet": {
    	"prefix": "creactreact",
    	"body": [
    		"<!DOCTYPE html>",
    		"<html lang=\"en\">",
    		"<head>",
    		"    <meta charset=\"UTF-8\">",
    		"    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">",
    		"    <title>Document</title>",
    		"</head>",
    		"<body>",
    		"  <div id=\"app\"></div>",
    		"",
    		"  ",
    		"  <script src=\"../react/react.development.js\"></script>",
    		"  <script src=\"../react/react-dom.development.js\"></script>",
    		"  <script src=\"../react/babel.min.js\"></script>",
    		"",
    		"  <script type=\"text/babel\">",
    		"    class App extends React.Component {",
    		"      constructor() {",
    		"        super();",
    		"      }",
    		"",
    		"      render() {",
    		"        return (",
    		"          <div>",
    		"            hello World",
    		"          </div> ",
    		"        )",
    		"      }",
    		"    }",
    		"",
    		"    ReactDOM.render(<App/>, document.getElementById('app'))",
    		"  </script>",
    		"</body>",
    		"</html>"
    	],
    	"description": "creact react snippet"
    	}
    }

[20210211123043348.png]: /images/20221024/71b0f8fb2f3748b885e483ad399249a8.png
[20210211123051972.png]: /images/20221024/1e5347dfd52544408a46d7d1b6da622b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d1eXhpbnU_size_16_color_FFFFFF_t_70]: /images/20221024/225c68bcc0fb4c24a0df58ee7a91617e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d1eXhpbnU_size_16_color_FFFFFF_t_70 1]: /images/20221024/e71ef96d28e14fabb697583d25f6e4b3.png