Windows 设置vscode 的 user snippets 片段

Qwe7

发布于 2022-06-09 08:29:21

5430

发布于 2022-06-09 08:29:21

文章被收录于专栏：网络收集

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

1、设置路径

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

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

快捷键版:

1.ctrl+shift+p

2.选择 Preferences: Configure User Snippets

3.选择语言 html.json

目标

在vscode中输入createreact 然后产生一个自己想要的模板

写好模板

在线上写好模板

传送门：https://snippet-generator.app/

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>
 
  <!-- 1.引入依赖 -->
  <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>",
        "",
        "  <!-- 1.引入依赖 -->",
        "  <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"
    }
}

本文系转载，前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

html