VsCode添加代码模板

最新推荐文章于 2024-06-15 17:08:37 发布

江南程客

最新推荐文章于 2024-06-15 17:08:37 发布

阅读量913

点赞数

分类专栏： VsCode 文章标签： reactjs

本文链接：https://blog.csdn.net/qq_20967969/article/details/108021347

版权

VsCode 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

程序编写时，一段代码或说明会重复出现，使用模板有利于提高我们的工作效率。

VSCode 作为一种轻量级的代码编辑器，业界内颇受欢迎；下面就介绍一下如何利用VSCode snippet 制作代码模板。

创建一个snippets

菜单栏选择File，下拉菜单中选择 Preferences

在这里插入图片描述再选择User snippets，出现下图情况，选择对应的语言即可；如果没有你需要的语言，你需要安装对应的语言插件。

Snippets内容使用JSON格式进行定义。一个HTML例子

{
  "For_Html": {
    "prefix": "html",
    "body": [
      "<!DOCTYPE html>",
      "<html>",
        "<head>",
            "\t<meta charset=\"UTF-8\" />",
            "\t<title>Hello React!</title>",
              "\t<script crossorigin src=\"https://unpkg.com/react@16/umd/react.production.min.js\"></script>",
              "\t<script crossorigin src=\"https://unpkg.com/react-dom@16/umd/react-dom.production.min.js\"></script>",
              "\t<script src=\"https://unpkg.com/babel-standalone@6/babel.min.js\"></script>",
        "</head>",
      "<body>",

          "\t<div id=\"root\"></div>",

          "\t<script type=\"text/babel\">",
            "\t\t$0"
            "\t \tclass $1 extends React.Component {",
            "\t\t\tconstructor(props) {",
              "\t\t\t\tsuper(props);",
             
            "\t\t\t}",
            "\t\t}",

            "\t\tReactDOM.render(",
                "\t\t\t<$1 >$2</$1>,",
                "\t\t\tdocument.getElementById('root')",
            "\t\t);",
          "\t</script>",

      "</body>",
    "</html>",
    ],
    "description": "For htmp template"
  }
}

For_Loop: 当前snippet名字。
prefix: 前缀，代码块使用快捷方式；键入前缀，按tab键，代码块就会被使用。
body: 代码块内容；换行使用\r\n。
description: 键入前缀，vscode 感知到前缀，显示的说明内容。
$1,$2,$0: 指定代码模块生成后，编辑光标出现位置; 使用Tab键进行切换(编辑光标按$1,$2,$3…$0的顺序跳转)，$0是光标最后可切换位置。

江南程客

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
VsCode添加代码模板

程序编写时，一段代码或说明会重复出现，使用模板有利于提高我们的工作效率。VSCode 作为一种轻量级的代码编辑器，业界内颇受欢迎；下面就介绍一下如何利用VSCode snippet 制作代码模板。创建一个snippets菜单栏选择File，下拉菜单中选择 Preferences 再选择User snippets，出现下图情况，选择对应的语言即可；如果没有你需要的语言，你需要安装对应的语言插件。Snippets内容使用JSON格式进行定义。一个HTML例子{ "For_Html": {
复制链接

扫一扫

专栏目录