都21世纪了还在用传统console.log?

大家好,标题党一下哈哈,本文的内容主要是介绍如何通过vscode的自定义代码更好的使用console.log去调试我们的项目。

在vscode中用户可以通过自定义代码模板和设置自定义代码快捷键。在前端开发领域,一些好的自定义代码能够加快我们的开发进度,提升开发效率。下面推荐一些常用的自定义代码片段。

设置自定义代码文件(snippets)

通过vscode个人设置的Snippets选项选择或者创建一个自定义snippets文件。

snippets的文件格式类似JSON,文件中key的含义如下:

prefix:设置自定义代码对应的快捷键。

body:自定义代码片段主体,为数组形式,具体可参考后续代码。

description:对该段自定义代码片段的描述。

自定义代码片段

logs: 在实际开发过程中,console.log是常用的调试方法之一,通过自定义代码片段能够快速的生成调试代码 `

bash 复制代码
//$1 $1 为两个同名占位符,触发自定义代码段后两个占位符同时出现光标
"logs": {
"prefix": "logs",
"body": \[
"console.log('!!!这是$1', $1);"
],
"description": "控制台打印变量"
},
    `

实际效果:

logg: `

php 复制代码
//$CLIPBOARD$1能够自动识别剪切板的内容,强烈推荐!!!
"paste to log": {
    "prefix": "logg",
    "body": [
            "console.log('!!!这是$CLIPBOARD$1', $CLIPBOARD$1);"
    ],
    "description": "打印出剪切板内容"
    },`

实际效果:

其他推荐自定义片段

vue3: 设置该快捷键可以一键生成vue文件的基础框架 `

swift 复制代码
"vue3": {
    "prefix": "vue3",
    "body": [
            "<template>",
            "    <div>",
            "$1",
            "    </div>",
            "</template>\n",
            "<script lang=\"ts\" setup>",
            "import { ref } from \"vue\" ",
            "$2",
            "</script>\n",
            "<style lang=\"less\" scoped>",
            "$3",
            "</style>"
    ],
    "description": "vue3"
},`

实际效果:

完整代码

为了方便铁铁们的使用和调试,因此贴出完整代码,如下所示(好使的话点个赞吧,球球了):

dart 复制代码
    `{
        "vue3": {
                "prefix": "vue3",
                "body": [
                        "<template>",
                        "    <div>",
                        "$1",
                        "    </div>",
                        "</template>\n",
                        "<script lang=\"ts\" setup>",
                        "import { ref } from \"vue\" ",
                        "$2",
                        "</script>\n",
                        "<style lang=\"less\" scoped>",
                        "$3",
                        "</style>"
                ],
                "description": "vue3"
        },
        "logs": {
                "prefix": "logs",
                "body": [
                        "console.log('!!!这是$1', $1);"
                ],
                "description": "控制台打印变量"
        },
        "let": {
                "prefix": "let",
                "body": [
                        "let ${2:key} = ${3:value};"
                ],
                "description": "let声明变量"
        },
        "paste to log": {
                "prefix": "logg",
                "body": [
                        "console.log('!!!这是$CLIPBOARD$1', $CLIPBOARD$1);"
                ],
                "description": "打印出剪切板内容"
        },}`
相关推荐
Smile_Gently1 小时前
前端:最简单封装nmp插件(组件)过程。
前端·javascript·vue.js·elementui·vue
luckycoke8 小时前
小程序立体轮播
前端·css·小程序
一 乐8 小时前
高校体育场管理系统系统|体育场管理系统小程序设计与实现(源码+数据库+文档)
前端·javascript·数据库·spring boot·高校体育馆系统
懒羊羊我小弟8 小时前
常用Webpack Loader汇总介绍
前端·webpack·node.js
祈澈菇凉8 小时前
ES6模块的异步加载是如何实现的?
前端·javascript·es6
我爱学习_zwj9 小时前
4.从零开始学会Vue--{{组件通信}}
前端·javascript·vue.js·笔记·前端框架
顾比魁9 小时前
XSS盲打:当攻击者“盲狙”管理员
前端·网络安全·xss
黑客老李9 小时前
新手小白如何挖掘cnvd通用漏洞之存储xss漏洞(利用xss钓鱼)
java·运维·服务器·前端·xss
晚风予星9 小时前
简记|LogicFlow自定义BPMN元素节点
前端
Json____10 小时前
使用html css js 开发一个 教育机构前端静态网站模板
前端·css·html·js·前端学习·企业站·教育机构网站