vs code 的代码片段设置 - 前端笔记-以下是设置vscode代码片段完整代码,可以自行,修改,编辑 1.打开vscode 设置 2.找到 “用户代码片段” 3.找到“新建全局代码片段” 4.输入文件名 以 json 文...

学习笔记

点滴记忆
回忆过往
首页>> >>vs code 的代码片段设置 - 前端笔记
2019-12-25
分类:

vs code 的代码片段设置

文章作者:痴迷

以下是设置vs code 代码片段完整代码,可以自行,修改,编辑 1.打开vs code  设置 2.找到 “用户代码片段” 3.找到“新建全局代码片......

以下是设置vs code 代码片段完整代码,可以自行,修改,编辑

1.打开vs code  设置
2.找到 “用户代码片段
3.找到“新建全局代码片段
4.输入文件名 以 json 文件名结尾(文件名随意输入最好 html.json  )
5.复制下面代码进去
6.重启 vs code 


{
    // Place your snippets for html here. Each snippet is defined under a snippet name and has a prefix, body and 
    // description. 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": {
    //  "prefix": "log",
    //  "body": [
    //      "console.log('$1');",
    //      "$2"
    //  ],
    //  "description": "Log output to console"
    // }

    "Print to vue": {
        "prefix""vuec",
        "body": [
            "<template>",
            "    <div>",
            "      御剑乘风来,除魔天地间!",
            "    </div>",
            "</template>",
            "           ",
            "<script>",
            "export default{",
            "    $2         ",
            "}",
            "</script>",
            "<style scoped>",
            "$3            ",
            "</style>"
        ],
        "description""create a vue template"
    },
    "Print to v": {
        "prefix""vue",
        "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<title>Document</title>",
            "\t<script type='text/javascript' src='js/vue.js'></script>",
            "</head>",
            "<body>",
            "\t<div id='app'>",
            "\t\t{{msg}}",
            "\t</div>",
            "\t<script type='text/javascript'>",
            "\t\tvar vm = new Vue({",
            "\t\t\tel: '#app',",
            "\t\t\tdata: {",
            "\t\t\t\tmsg: 'Hello Vue'",
            "\t\t\t}",
            "\t\t});",
            "\t</script>",
            "</body>",
            "</html>",
        ],
        "description""create a vue template"
    },
    "Print to express": {
        "prefix""express",
        "body": [
            "//注意:需要引入 express body-parser",
            "const  express=require('express');//引入第三方express框架",
            "const  app=express();//创建web服务",
            "const path = require('path');//路径管理模块",
            "app.use(express.static(path.join(__dirname, 'public')));//静态资源管理",
            "const bodyParser = require('body-parser'); //处理post接收值的第三模块",
            "app.use(bodyParser.urlencoded({ extended: false })); //接收post传值中间件",
            "app.use(bodyParser.json()); //接收json传真中间件",
            "app.listen(80,()=>{//监听端口",
            "\tconsole.log('http://127.0.0.1');",
            "});"
            
        ],
        "description""create a express template"
    },

    "Print to lg": {
        "prefix""lg",
        "body": [
            "console.log(11111)",
        ],
        "description""create a express template"
    },
}


×

感谢您的支持,我们会一直保持!

扫码支持
请土豪扫码随意打赏

打开支付宝扫一扫,即可进行扫码打赏哦

分享从这里开始,精彩与您同在

打赏作者
版权所有,转载注意明处:前端笔记 » vs code 的代码片段设置
版权所有:《前端笔记
文章标题:《vs code 的代码片段设置
除非注明,文章均为 《前端笔记》 原创
转载请注明本文短网址:https://blog.dbsgw.cn/post-5.html

发表评论

路人甲 表情
Ctrl+Enter快速提交

网友评论(0)