vscode通过snippets快速创建代码片段

创建snippet配置用户代码片段

  • 打开vscode

  • 按住shift+ctrl+p 输入snippets

  • vscode的上边栏会显示 首选项:配置用户代码片段 点击它

snippet.png
  • 点击新建全局代码片段文件

  • 输入文件名字


    输入创建名字可以和你想要的快捷键名字一样.png
  • 创建之后会出现


    代码.png
  • 恢复Example之后的注释 例如我的代码如下

{
    // Place your 全局 snippets here. Each snippet is defined under a snippet name and has a scope, prefix, body and 
    // description. Add comma separated ids of the languages where the snippet is applicable in the scope field. If scope 
    // is left empty or omitted, the snippet gets applied to all languages. The prefix is what is 
    // used to trigger the snippet and the body will be expanded and inserted. Possible variables are: 
    // $1, $2 for tab stops, $0 for the final cursor position, and ${1:label}, ${2:another} for placeholders. 
    // Placeholders with the same ids are connected.
    // Example:
     "Print to console": {
        "scope": "javascript,typescript,html",//在什么环境下运行
        "prefix": "gg",//代码的快捷键
        "body": [
            "<!DOCTYPE html>",//输入你想要快捷创建的代码用""包括
            "<html lang=\"en\">",
            " ",
            "<head>",
                "\t<meta charset=\"UTF-8\">",
                "\t<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">",
                "\t<meta http-equiv=\"X-UA-Compatible\" content=\"ie=edge\">",
                "\t<title></title>",
                "\t<style>",
                "\t",
                "\t</style>",
                "\t<script>",
                "\t",
                "\t</script>",
            "</head>",
            "",
            "<body>",
            "\t",
            "</body>",
            "",
            "</html>",
        ],
        "description": "Log output to console"
     }
}
  • 保存 使用效果如下


    123.gif
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容