开发工具之 VSCode-CSDN博客

你必须在生命的轮回中，找到自己的位置！ ------ 木法沙

前言

《决战紫禁之巅》叶孤城介绍自己的剑：此剑乃海外寒剑精英，吹毛断发，剑锋三尺三，净重六斤四两。So,我也比较熟悉我的剑——VsCode。

VsCode

代码片段

代码片段可以自定义一些经常用到的操作。比如我在函数声明和打印 log 时经常用到

{
    "Lamda 表达式": {
        "prefix": "arrow",

        "body": ["($1) => {$2}"],

        "description": "箭头函数"
    },
    "注释模板": {
        "prefix": "zhushi",
        "body": ["/**", "* @author: 张攀钦", "* @description: $1", " */"],
        "description": "注释"
    },
    "forof循环": {
        "prefix": ["for", "forof"],
        "body": ["for (const ${2:item} of ${1:array}) {", "\t$0", "}"],
        "description": "forof循环"
    },
    "forin循环": {
        "prefix": ["forin", "fori"],
        "body": ["for (const ${2:item} in ${1:array}) {", "\t$0", "}"],
        "description": "forof循环"
    },
    "函数声明模板": {
        "prefix": ["funct", "func", "function"],
        "body": ["function ${1:name} ($2) { ", "\t$3", "}"],
        "description": "函数声明模板"
    },
    "函数表达式模板": {
        "prefix": ["cfunct", "cfunc", "cfunction"],
        "body": ["const ${1:func} = function ${2:name}($3) { ", "\t$4", "}"],
        "description": "函数表达式模板"
    },
    "方法注释模板": {
        "prefix": "fzhushi",
        "body": [
            "/**",
            "* @author: 张攀钦",
            "* @description: $1",
            "* @param {$2} $3",
            "* @returns {$4} $5",
            " */"
        ],
        "description": "注释方法"
    },
    "打印日志": {
        "scope": "javascript,typescript",
        "prefix": ["logl", "log"],
        "body": ["console.log($1);", "$2"],
        "description": "console.log打印日志"
    }
}
复制代码

代码片段文件中为 json

{
    "打印日志": {
        // 作用域，html,js
        "scope": "javascript,typescript",
        // 拼写匹配字段
        "prefix": ["logl", "log"],
        // 代码片段内容 $1 下次输入的位置占位，tab 奇幻 $1 $2
        "body": ["console.log($1);", "$2"],
        // 匹配的时候的说明
        "description": "console.log打印日志"
    }
}
复制代码

// settings.json 添加以下属性，自定义的代码片段总是优先显示，不然总是被 VsCode 或插件的排到前面，很不方便
    "editor.snippetSuggestions": "top",
    "editor.tabCompletion": true,
复制代码

快捷捷

作为一个 IDEA 重度使用者，我将 VsCode 的快捷键尽可能适配到 IDEA 了。就不推荐我的按键了。应该是最近增加的这个 keymaps 功能，可以将别的开发工具的快捷键搬到 VsCode 里面。真贴心啊 ??

经常用到的快捷键

F1 查看所有命令

Shift + F12 查看引用,鼠标右键即可查看

Shift + Alt + F12 查看所有引用

alt + F12 查看定义,鼠标右键即可查看

F12 转到定义,鼠标右键即可查看,很容易找到方法定义

触发建议我自定义了，就不推荐了

触发参数提示我自定义了，就不推荐了

前进和后端查看代码调用 Alt + -> Alt + <-

ctrl + ~ 打开或关闭终端

打开上一个编辑器，打开下一个编辑器 Ctrl + Alt + <- ,Ctrl + Alt + ->

VsCode 插件

VsCode 开发工具丰富的插件提升开发效率真的是不要不要的

Chinese (Simplified) Language Pack for Visual Studio Code

这个应该是每个不习惯英语的开发的福音了 ????

Settings Sync

在强迫症折磨下，我是非常喜欢这个插件的，一键同步所有 VsCode 配置。而且作为一名在 Mac 和 Windows 环境下切换的又高又帅的全栈，mmp，所有的常用的快捷键必须适配 windows，不然真会疯的，??，给微软粑粑点个赞

Todo Tree

这个插件可以显示代码中 TODO ，当你有功能没有做完，或者做代码标记是很方便的

Local History

如果你代码变更了，但是没有添加到 git 中，而且又想找回，一定要使用 Local History 哦，文件的变更每个都有副本哦，代码丢失不存在的哦，记得将 .history 加入到 .gitignore

Code Runner 和调试

这个可以运行 js 代码片段，对于学习 api 还是很有帮助的。不过是基于 Node 运行环境将,不过问题不大。

在调试下，可以查看代码运行，对于学习的时候，了解 js 执行上下文和闭包等等很有用

// settings.json 添加以下配置
"launch": {
        "configurations": [
            {
                "type": "node",
                "request": "launch",
                "name": "app.js",
                "program": "${workspaceFolder}/app.js"
            },
            // 调试当前 js 文件
            {
                "type": "node",
                "request": "launch",
                "name": "current",
                "program": "${file}"
            }
        ]
    }
复制代码