VsCode用户代码片段分享

不想复制的话,点击下载直接CV吧 :用户代码片段.txt

1.用户代码片段

{

// Place your snippets for JavaScript 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 letiables 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')",
    ],
    "description": "Log output to console"
},
"xianshi yuansu": {
    "prefix": "db",
    "body": [
        "box.style.display = 'block'",
    ],
    "description": "设置元素的display为block"
},
"yincang yuansu": {
    "prefix": "dn",
    "body": [
        "box.style.display = 'none'",
    ],
    "description": "设置元素的display为none"
},
"jQuery to click": {
    "prefix": "jqc",
    "body": [
        "$('$1').on('click',function(){\n",
        "})",
    ],
    "description": "jQuery注册点击事件"
},

"stop default event": {
    "prefix": "ep",
    "body": [
        "e.preventDefault()",
    ],
    "description": "阻止默认事件"
},

"yulan tupian": {
    "prefix": "ajax_yulan",
    "body": [
        "//1.给file表单元素注册onchange事件",
        "$('file表单').change(function () {",
        "\t//1.2 获取用户选择的图片",
        "\tlet file = this.files[0]",
        "\t//1.3 将文件转为src路径",
        "\tlet url = URL.createObjectURL(file)",
        "\t//1.4 将url路径赋值给img标签的src",
        "\t$('img元素').attr('src', url)",
        "})"
    ],
    "description": "图片预览固定四个步骤"
},
"comment for function": {
    "prefix": "///",
    "body": [
        "/**",
        "* @description:",
        "* @param {type} ",
        "* @return: ",
        "*/",
    ],
    "description": "函数标准注释快捷键"
},
"jquery to ajax": {
    "prefix": "ajax",
    "body": [
        "$.ajax({",
        "\turl:'',",
        "\ttype:'get',",
        "\tdataType:'json',",
        "\tdata:'',",
        "\tsuccess: function(backData){",
        "",
        "\t}",
        "})"
    ],
    "description": "ajax请求"
},
"get for XMLHTTPRequest": {
    "prefix": "ajax1",
    "body": [
        "//(1).实例化ajax对象",
        "let xhr = new XMLHttpRequest()",
        "//(2).设置请求方法和地址",
        "//get请求的数据直接添加在url的后面 格式是 url?key=value",
        "xhr.open('get', '接口url')",
        "//(3).发送请求",
        "xhr.send()",
        "//(4).注册回调函数",
        "xhr.onload = function() {",
        "\tconsole.log(xhr.responseText)",
        "}",
    ],
    "description": "get-原生XMLHTTPRequest实现ajax"
},
"post for XMLHTTPRequest": {
    "prefix": "ajax2",
    "body": [
        "//(1).实例化ajax对象",
        "let xhr = new XMLHttpRequest()",
        "//(2).设置请求方法和地址",
        "xhr.open('post', '$1')",
        "//(3).设置请求头（post请求才需要设置）",
        "xhr.setRequestHeader('Content-type','application/x-www-form-urlencoded')",
        "//(4).发送请求 ： 参数格式  'key=value' ",
        "xhr.send('key=value')",
        "//(5).注册回调函数",
        "xhr.onload = function () {",
        "\tconsole.log(xhr.responseText)",
        "}"
    ],
    "description": "post-原生XMLHTTPRequest实现ajax"
},
"file to ajax": {
    "prefix": "ajax-file",
    "body": [
        "$('提交按钮').on('click',function(e){",
        "\t//禁用表单默认提交事件",
        "\te.preventDefault()",
        "\t//创建FormData对象：参数是表单dom对象",
        "\tlet fd = new FormData('form表单DOM对象')",
        "\t$.ajax({",
        "\t\turl:'',",
        "\t\ttype:'post',",
        "\t\tdataType:'json',",
        "\t\tdata:fd,",
        "\t\tcontentType: false,",
        "\t\tprocessData: false,",
        "\t\tsuccess: function(backData){",
        "\t\t}",
        "\t})",
        "})"
    ],
    "description": "表单提交ajax请求"
},
"express-server": {
    "prefix": "express",
    "body": [
        "//1.导入模块",
        "const express = require('express')",
        "//2.创建服务器",
        "let app = express()",
        "//3.开启服务器",
        "app.listen(3000,()=>{",
        "console.log('success')",
        "})"
    ],
    "description": "快速搭建express服务器"
},
"http-server": {
    "prefix": "http",
    "body": [
        "//1.导入模块",
        "const http = require('http')",
        "\n//2.创建服务器",
        "let server = http.createServer((req,res)=>{\n})",
        "\n//3.开启服务器",
        "server.listen(3000,()=>{",
        "\tconsole.log('服务器开启成功')",
        "})"
    ],
    "description": "快速搭建http服务器"
},
"get element by id": {
    "prefix": "query",
    "body": [
        "let box = document.querySelector('.box')",
    ],
    "description": "根据id获取元素"
},
"enmu arr": {
    "prefix": "fa",
    "body": [
        "for(let i = 0;i<arr.length;i++){",
        "\tconsole.log(arr[i])",
        "}",
    ],
    "description": "数组快速for循环遍历"
},
"遍历对象": {
    "prefix": "fo",
    "body": [
        "for(let key in obj){",
        "\tlet value = obj[key]",
        "}",
    ],
    "description": "遍历对象快捷语法"
},
"axios": {
    "prefix": "axios",
    "body": [
        "axios({",
            "\turl:'请求路径',",
            "\tmethod:'get',",
            "\tdata: { 'post请求参数'},",
            "\tparams: { 'get请求参数'}",
        "}).then(res=>{",
            "\t//成功回调",
            "\tconsole.log(res)",
        "})",
    ],
    "description": "axios请求"
},

"backgroundColor": {
    "prefix": "bgc",
    "body": [
        "backgroundColor",
    ],
    "description": "背景颜色"
},
"vue-router": {
    "prefix": "vr",
    "body": [
        "//1.创建组件",
        "let ym1 = {template:''}",
        "let ym2 = {template:''}",
        "let ym3 = {template:''}",
        "//2.创建路由规则",
        "let routes = [",
            "\t{path:'/ym1',component:ym1},",
            "\t{path:'/ym2',component:ym2},",
            "\t{path:'/ym3',component:ym3},",
        "]",
        "//3.创建路由对象",
        "let router = new VueRouter({routes})",
        "//4.挂载路由",
        "let app = new Vue({",
            "\trouter,",
        "}).$$mount('#app')",
    ],
    "description": "快速生成路由"
},

}

2. 注释颜色

"editor.tokenColorCustomizations":{

    "comments":"#02AAB0"
}