一个计算机技术爱好者与学习者

0%

VSCode常用快捷键和配置

发表于 更新于 分类于 ， ， ， ，

1. VSCode简介

JetBrains 全家桶非常好用，但是每年 $249 的价格，直接劝退了。然后，VSCode（Visual Studio Code）就成了最好的选择。

VSCode 是一个轻量但功能强大的代码编辑器，适用于 Windows、macOS 和 Linux。它内置了对 JavaScript、TypeScript 和 Node.js 的支持，并为其他语言（如 C++、C#、Java、Python、PHP、Go）和运行时（如 .NET 和 Unity）提供了丰富的扩展生态系统。

本文记录一下 VSCode 常用的一些快捷键和配置，备忘。

2. 快捷键

2.1. 查看快捷键

左下角齿轮（Manage），Keyboard Shortcuts

VSCode的很多快捷键和sublime相同，这个必须点赞。sublime快捷键参考《Sublime Text3》。

2.2. 全局搜索

command-shift-F

2.3. 选择相同内容

选中一部分内容后，command-D可以选中相同内容，进行批量操作，比如print变log。
配合command-左右键，可以批量操作上一行下一行，比如print所在行跳转到行尾，下面一行添加log。

2.4. 同列多行编辑

command-option-上下键

sublime中使用control-shift-上下键

2.5. 自动补全函数返回值

尚未找到解决办法。

想要像《IDEA常用快捷键和配置》一文中的IDEA快捷键一样，自动补全函数返回值，但是尚未找到解决办法。

2.6. 函数跳转

command-单击：跳转函数定义，或跳转函数引用
control-减号：跳回之前位置

对于golang，需要先安装gopls插件，然后重启VSCode，否则无法实现函数跳转。

1
go install golang.org/x/tools/gopls@latest

2.7. 代码格式化

option-shift-F
对于Python代码，第一次执行会提示安装autopep8，安装即可。

1
pip install autopep8

2.8. Python保存文件时自动格式化

Code，Preferences，Settings，Text Editor，Formatting，勾选Format On Save。

或者打开全局配置文件，添加配置：

1
2
3
{
    "editor.formatOnSave": true
}

当 command-S 保存文件时，会自动执行一次代码格式化。

指定使用autopep8进行代码格式化：

1
2
3
4
5
6
7
8
9
10
{
    "[python]": {
        "editor.formatOnType": true,
        "editor.formatOnSave": true,
        "editor.defaultFormatter": "ms-python.autopep8"
    },
    "autopep8.args": [
        "--max-line-length=120"
    ]
}

更多配置参考文档Formatting Python in VS Code

3. 配置

3.1. 打开全局配置文件

command-shift-P，输入settings.json，选择Open User Settings

3.2. 打开当前项目配置文件

当前项目配置文件的优先级，高于全局配置文件。

方法一：
直接打开 .vscode/settings.json 文件

方法二：
command-shift-P，输入settings.json，选择Open Workspace Settings

3.3. terminal配置

Code，Preferences，Settings，User，Features，Terminal

3.4. 设置terminal背景颜色

打开Settings，搜索workbench.colorCustomizations，点击 Edit in settings.json

添加如下内容：

1
2
3
4
5
6
7
{
    "terminal.integrated.allowChords": false,
    "workbench.colorCustomizations": {
        "terminal.foreground" : "#D3D7CF",
        "terminal.background" : "#2E3436"
    }
}

3.5. 解决terminal中文乱码问题

vscode中使用terminal时发现中文乱码，echo $LANG查看locale，值为zh_HANS_cn.UTF-8，需要改成zh_CN.UTF-8。

1
2
3
vim ~/.zshrc
# or
vim ~/.bash_profile

添加：

1
export LANG=zh_CN.UTF-8

3.6. 设置terminal缓存行数

打开Settings，搜索 scrollback，找到 Termial > Integrated: Scollback，行数改为 100000

3.7. 显示大纲视图

View，Open View…，view outline

3.8. 安装插件

左侧边栏，Extensions，搜索插件安装即可。

插件配置方法：Code，Preferences，Settings，搜索插件名称。

3.9. 粘贴时正确缩进

复制一整块代码进行粘贴时，缩进往往不对，需要手动调整，这点还是jetbrains好用。
不过好在vscode插件很多，“Paste and Indent”这个插件就能解决这个问题。

1、安装“Paste and Indent”

2、command-shift-P，打开命令面板。

3、输入keyboard，选择 References: Open Keyboard Shortcuts(JSON)

4、编辑 keybindings.json，填入内容为

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
// Place your key bindings in this file to override the defaults
[
    {
        "key": "ctrl+v",
        "command": "pasteAndIndent.action",
        "when": "editorTextFocus && !editorReadonly"
    },
    {
        "key": "ctrl+v",
        "command": "editor.action.clipboardPasteAction",
        "when": "!editorTextFocus"
    },
    {
        "key": "ctrl+shift+v",
        "command": "editor.action.clipboardPasteAction",
        "when": "editorTextFocus && !editorReadonly"
    }
]

重启vscode，复制粘贴时，使用ctrl+v就能够自动缩进了。
但是，ctrl+v有时候的表现反而不如常规粘贴（cmd+v），这时可以使用cmd+z进行撤销，就变成了常规粘贴的效果。
这个插件的原理应该是先进行了常规的粘贴，然后进行了缩进格式化，因此cmd+z可以还原常规粘贴的效果。

3.10. Python代码检查

参考文档：《Python代码质量检查》

3.11. 设置Python代码片段

1、打开代码片段配置
Code，Preferences，User Snippets，选择Python
此时会打开一个python.json文件，这就是代码片段模板配置文件。不止可以配置文件头部注释，还可以配置通用内容。

2、填入代码片段配置
百度风格的Python Header Docstring：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
{
    // Place your snippets for python 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"
    // }
    "header": {
        "prefix": "pythonheader",
        "body": [
            "#!/usr/bin/env python3",
            "# -*- coding:utf-8 -*-",
            "#",
            "# Copyright (c) $CURRENT_YEAR voidking.com, Inc. All Rights Reserved",
            "#",
            "\"\"\"",
            "Authors: voidking",
            "Date:    $CURRENT_YEAR/$CURRENT_MONTH/$CURRENT_DATE",
            "\"\"\""
        ]
    }
}

谷歌风格的Python Header Docstring：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
{
    "header": {
        "prefix": "pythonheader",
        "body": [
            "#!/usr/bin/env python3",
            "# -*- coding:utf-8 -*-",
            "#",
            "# Copyright (c) $CURRENT_YEAR voidking.com, Inc. All Rights Reserved",
            "#",
            "\"\"\"A one-line summary of the module or program, terminated by a period.",
            "",
            "Leave one blank line.  The rest of this docstring should contain an",
            "overall description of the module or program.  Optionally, it may also",
            "contain a brief description of exported classes and functions and/or usage",
            "examples.",
            "\"\"\""
        ]
    }
}

参考文档：

3、使用代码片段
新建Python文件，文件头部不会出现注释。
输入pythonheader，根据提示回车，就会自动添加注释了。
这种用法和sublime的Emmet插件很像，!+tab自动生成html5框架。

3.12. 设置Golang代码片段

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
{
    "header": {
        "prefix": "goheader",
        "body": [
            "// Package ${1:packagename} - The purpose of the package",
            "//",
            "// Copyright (c) $CURRENT_YEAR. Your-Company-Name, Inc. All Rights Reserved",
            "//",
            "// This contains an overall description of the module or program. Here you",
            "// can also include a brief description of exported functions, methods, and structs.",
            "//",
            "package ${1:packagename}",
            "",
            "import (",
            "\t// Import necessary packages here",
            ")"
        ]
    }
}

参考文档：

3.13. 自动生成Docstring

1、安装插件 autoDocstring - Python Docstring Generator

2、使用 autoDocstring
在某个函数名下面的第一行，输入command+shift+2，就会自动添加Docstring模板
或者右键，选择Generate Docstring，就会自动添加Docstring模板

默认是风格是google python style，一般不用修改。

修改风格的方法：Code，Preferences，Settings，搜索autoDocstring，找到Auto Docstring: Docstring Format，选择其他风格（例如pep257）。

参考文档：《Python代码风格指南》

3.14. git分支代码比较

git分支代码比较合并，JetBrains中的Show Diff with Working Tree非常好用。vscode上没有能够完美替代这个功能的插件，gitlens只能算差强人意。

1、安装gitlens插件

2、左边栏显示gitlens插件
command-shift-P，打开命令面板。
输入gitlenss，找到 Gitlens: Set Views Layout，点击它。
选择Gitlens Layout，这时gitlens插件就会显示在左边栏。

3、选择分支进行比较
点击gitlens插件，BRANCHS，当前分支会有一个对号。
选中想要对比的分支，option+单击，Compare with Working Tree就会出现在 SEARCH&COMPARE。

4、代码比较
SEARCH&COMPARE，选中Comparing Working…，点击Swap Comparison，让当前代码放在左边（个人习惯）。
x files changed中点击那些存在diff的文件，就可以愉快地进行代码比较了。

5、代码合并
根据左右两边代码的不同，自行修改左边的代码。
和JetBrains相比，本插件最大的缺点是不能通过快捷按钮修改左边的代码。