「VS Code」快速上手指南

+

介绍与安装

VS Code 介绍

VS Code 是微软开发并维护的一款代码编辑器,几乎支持所有主流编程语言的代码高亮、智能提示。具备诸多优良的特性:

  • 轻量级
  • 免费开源
  • 跨平台
  • 丰富的扩展
  • 良好的性能

VS Code 使用

VS Code 安装扩展

下面三种方式都可以进入扩展安装面板:

  1. 选择 Code>Preferences>Extensions
  2. 使用快捷键 Shift+Command+X(推荐)
  3. 使用快捷键 Shift+Command+P 进入命令面板,输入 Extensions: Install Extensions

搜索扩展并进行安装:

VS Code 自定义代码片段

选择 Code>Preferences>User Snippets 或使用快捷键 Shift+Command+P 进入命令面板,输入 Preferences: Configure User Snippets 进行自定义代码段的管理。

点击 New Global Snippets file... 新建自定义代码段:

custom.code-snippets

{
    "Author Info": {
        "scope": "php,go",
        "prefix": "author",
        "body": [
            "/**",
            "* $1",
            "* @author 艾逗笔<http://idoubi.cc>",
            "*/",
            "$2"
        ],
        "description": "Author Infomartion"
    }
}

上述自定义代码配置保存后,在 PHP 或 Go 文件中输入 author 即可生成自定义的代码段。

VS Code 自定义快捷键

输入快捷键 Command+K、Command+S,进入快捷键设置界面。搜索关键词寻找指令,点击左侧的修改按钮,绑定自定义的快捷键。

也可以在 keybindings.json 中直接修改:

// Place your key bindings in this file to overwrite the defaults
[
    {
        "key": "cmd+l",
        "Command": "workbench.action.toggleSidebarVisibility"
    },
    {
        "key": "cmd+b",
        "Command": "-workbench.action.toggleSidebarVisibility"
    }
]

VS Code 自定义配置参数

输入快捷键 Command+,,进入配置页面,搜索关键词调整配置参数。

也可以在 settings.json 中编辑自定义的配置:

{
    "editor.fontSize": 14, // 字体大小
    "editor.formatOnSave": true, // 保存时自动格式化
    "files.autoSave": "onFocusChange", // 失去焦点时自动保存文件
    "breadcrumbs.enabled": true, // 显示文件路径
    "window.zoomLevel": 0, // 窗口缩放比例
    "workbench.statusBar.visible": true, // 隐藏底部状态栏
    "workbench.colorTheme": "An Old Hope Italic" // 编辑器主题
}

VS Code 自定义主题

对于一个对颜值有要求的开发者,我们希望能够根据自己的喜好定制编辑器的颜色主题。VS Code 内置诸多不同风格的编辑器主题,输入快捷键 Command+K、Command+T 弹出主题选择界面,可以选择自带的主题。也可以在扩展中心安装第三方主题后再在这里启用。

快捷键大全

Command 键

  • Command+A 选择全部
  • Command+B 切换侧边栏
  • Command+C 复制
  • Command+D 选择下一个相同的内容
  • Command+F 文件内查找
  • Command+I 选择一行
  • Command+J 切换控制台
  • Command+N 创建新文件
  • Command+O 打开文件
  • Command+P 查找文件
  • Command+Q 退出编辑器
  • Command+S 保存文件
  • Command+V 粘贴
  • Command+W 关闭编辑器/文件
  • Command+X 裁剪
  • Command+Z 撤销
  • Command+/ 行注释切换
  • Command+, 打开配置项
  • Command+] 缩进
  • Command+[ 退格
  • Command+enter 下一行编辑
  • Command+0/1/2/3/4/5/6 分栏窗口

Control 键

  • Control+A 跳到行首
  • Control+B 左移一格
  • Control+D 向右剪切
  • Control+E 跳到行尾
  • Control+F 右移一格
  • Control+G 定位行
  • Control+H 向左剪切
  • Control+J 合并下一行
  • Control+K 删除光标到行尾的内容
  • Control+N 光标下移一行
  • Control+P 光标上移一行
  • Control+Q 切换板面
  • Control+T 光标处字母移动
  • Control+W 切换窗口
  • Control+~ 切换 terminal 控制台
  • Control+- 倒退
  • Control+tab 切换tab

Option 键

  • Option+↑ 向上移动一行
  • Option+↓ 向下移动一行
  • Option+→ 按单词向右移动
  • Option+← 按单词向左移动
  • Option+Z 切换换行

Shift+Command 组合键

  • Shift+Command+F 全局查找
  • Shift+Command+H 全局替换
  • Shift+Command+L 选择全部相同的内容
  • Shift+Command+M 切换 problems 控制台
  • Shift+Command+N 在新窗口打开并创建新文件
  • Shift+Command+P 打开命令面板
  • Shift+Command+S 文件另存为
  • Shift+Command+U 切换 output 控制器
  • Shift+Command+X 安装扩展
  • Shift+Command+Y 切换 debug console 控制台
  • Shift+Command+Z 重做
  • Shift+Command+→ 选择光标到行尾的内容
  • Shift+Command+← 选择光标到行头的内容

Option+Command 组合键

  • Option+Command+F 文件内替换
  • Option+Command+S 保存所有文件
  • Option+Command+0 多栏横屏模式
  • Option+Command+[ 折叠代码
  • Option+Command+] 展开代码
  • Option+Command+↑ 向上添加焦点
  • Option+Command+↓ 向下添加焦点
  • Option+Command+→ 下一个编辑窗口
  • Option+Command+← 上一个编辑窗口

Option+Shift 组合键

  • Option+Shift+A 块注释切换
  • Option+Shift+↑ 向上复制一行
  • Option+Shift+↓ 向下复制一行

Control+Command 组合键

  • Control+Command+space 表情和符号
  • Control+Command+F 切换全屏
  • Control+Command+→ 移到右侧的频幕
  • Control+Command+← 移到左侧的频幕

Control+Shift 组合键

  • Control+Shift+G 打开版本控制

其他

  • Control+Shift+Command+→ 扩大选择
  • Control+Shift+Command+← 缩小选择
  • Command+K Command+S 查找快键捷
  • Command+K Z 切换Zen模式
  • Command+K V 在右边栏预览

配置参数详解

{
    "editor.fontSize": 14, // 字体大小
    "editor.formatOnSave": true, // 保存时自动格式化
    "files.autoSave": "onFocusChange", // 失去焦点时自动保存文件
    "breadcrumbs.enabled": true, // 显示文件路径
    "window.zoomLevel": 0, // 窗口缩放比例
    "workbench.statusBar.visible": true, // 隐藏底部状态栏
    "workbench.colorTheme": "An Old Hope Italic", // 编辑器主题
    "workbench.iconTheme": "eq-material-theme-icons-ocean", // 图标主题
    "workbench.startupEditor": "newUntitledFile", // 编辑器欢迎设置    
    "explorer.confirmDragAndDrop": false, // 移动文件时是否需要确认
    "explorer.confirmDelete": false, // 删除文件时是否需要确认
    // 优化右侧预览地图样式
    "editor.minimap.renderCharacters": false,
    "editor.minimap.maxColumn": 200,
    "editor.minimap.showSlider": "always",
    // go开发配置
    "go.buildOnSave": "workspace",
    "go.lintOnSave": "package",
    "go.vetOnSave": "package",
    "go.buildFlags": [],
    "go.lintFlags": [],
    "go.vetFlags": [],
    "go.coverOnSave": false,
    "go.autocompleteUnimportedPackages": true,
    "go.useLanguageServer": true,
    "go.inferGopath": true,
    "go.docsTool": "godoc",
    "go.gocodePackageLookupMode": "go",
    "go.gotoSymbol.includeImports": true,
    "go.useCodeSnippetsOnFunctionSuggest": true,
    "go.useCodeSnippetsOnFunctionSuggestWithoutType": true,
    "go.formatTool": "goreturns",
    "go.gocodeAutoBuild": false,
    "go.liveErrors": {
        "enabled": true,
        "delay": 0
    },
    "go.gopath": "/data/go",
    "go.goroot": "/usr/local/Cellar/go/1.12.7/libexec",
    // php开发配置
    "php.validate.executablePath": "/usr/local/bin/php",
    "php.suggest.basic": false,
    "php-cs-fixer.executablePath": "/usr/local/bin/php-cs-fixer",
    // git配置
    "git.autofetch": true,
    "gitlens.advanced.messages": {
        "suppressFileNotUnderSourceControlWarning": true
    },
    "diffEditor.ignoreTrimWhitespace": true,
    // vscode-fileheader插件配置
    "fileheader.Author": "艾逗笔",
    "fileheader.LastModifiedBy": "艾逗笔",
    "fileheader.tpl": "/*\r\n * @Author: {author} <http://idoubi.cc>*/\r\n",
}

常用扩展推荐

主题样式

功能扩展

打造 PHP 开发环境

插件推荐

  • PHP DocBlocker:PHP 注释插件,在 PHP 代码中输入 /** 快速生成注释。
  • PHP Intelephense:PHP 智能提示插件,可以完成代码提示、上下文跳转、代码格式化等功能。
  • php cs fixer:PHP 代码格式化专用插件。
  • phpcs:PHP 代码格式校验专用插件,此插件依赖 php-cs-fixer 命令行工具,在 macOS 中可以通过 brew install php-cs-fixer 进行安装。
  • MySQL:MySQL管理插件。
  • PHP Debug:PHP 断点调试插件。

相关配置

{
    "php.validate.executablePath": "/usr/local/bin/php",    // PHP 路径
    "php.suggest.basic": false                              // 防止默认提示与 Intelephense 插件提示冲突
}

打造 Go 开发环境

安装扩展

使用快捷键 Shift+Command+X 打开扩展安装页,安装扩展 Go。

vscode-go

自定义扩展配置

使用快捷键 Command+, 打开自定义配置页,编辑 settings.json,定义与 Go 扩展相关的配置项。

{
    "editor.formatOnSave": true,
    "files.autoSave": "onFocusChange",
    "go.buildOnSave": "workspace",
    "go.lintOnSave": "package",
    "go.vetOnSave": "package",
    "go.buildFlags": [],
    "go.lintFlags": [],
    "go.vetFlags": [],
    "go.coverOnSave": false,
    "go.autocompleteUnimportedPackages": true,
    "go.useLanguageServer": true,
    "go.inferGopath": true,
    "go.docsTool": "godoc",
    "go.gocodePackageLookupMode": "go",
    "go.gotoSymbol.includeImports": true,
    "go.useCodeSnippetsOnFunctionSuggest": true,
    "go.useCodeSnippetsOnFunctionSuggestWithoutType": true,
    "go.formatTool": "goreturns",
    "go.gocodeAutoBuild": false,
    "go.liveErrors": {
        "enabled": true,
        "delay": 0
    },
    "go.gopath": "/data/go",
    "go.goroot": "/usr/local/Cellar/go/1.12.7/libexec"
}

安装依赖

第一次编辑完 Go 代码保存的时候,VS Code 会提示需要安装依赖,点击 Install All 进行安装。如果遇到墙的问题,则需要手动安装依赖,需要先下载依赖源码,再进行安装。

go get -u -v github.com/ramya-rao-a/go-outline
go get -u -v github.com/acroca/go-symbols
go get -u -v github.com/mdempsky/gocode
go get -u -v github.com/rogpeppe/godef
go get -u -v golang.org/x/tools/cmd/godoc
go get -u -v github.com/zmb3/gogetdoc
go get -u -v golang.org/x/lint/golint
go get -u -v github.com/fatih/gomodifytags
go get -u -v golang.org/x/tools/cmd/gorename
go get -u -v sourcegraph.com/sqs/goreturns
go get -u -v golang.org/x/tools/cmd/goimports
go get -u -v github.com/cweill/gotests/...
go get -u -v golang.org/x/tools/cmd/guru
go get -u -v github.com/josharian/impl
go get -u -v github.com/haya14busa/goplay/cmd/goplay
go get -u -v github.com/uudashr/gopkgs/cmd/gopkgs
go get -u -v github.com/davidrjenni/reftools/cmd/fillstruct
go get -u -v github.com/alecthomas/gometalinter
gometalinter --install

部分依赖源码地址:

使用扩展命令

安装完 Go 扩展后,有一些在扩展中自定义的命令可以使用。

快捷键 Shift+Command+P 打开命令面板,输入 Go: 查看所有可以使用的扩展命令。

几个常用的命令:

  • Go: Current GOPATH 查看当前 GOPATH 的路径
  • Go: Show All Commands 查看所有可用的扩展命令
  • Go: Install/Update Tools 安装/更新依赖的工具
  • Go: Browse Packages 浏览包

断点调试

在项目根目录下创建 .vscode/lauch.json 并配置调试参数:

{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "gotest",
            "type": "go",
            "request": "launch",
            "mode": "debug",
            "remotePath": "",
            "port": 10550,
            "host": "127.0.0.1",
            "program": "/data/go/src/test/main.go",
            "env": {
                "GOPATH": "/data/go"
            },
            "args": [],
            "showLog": true
        }
    ]
}

在项目文件中打断点,按 F5 开始进行断点调试。

如果遇到报错:

could not launch process: executables built by Go 1.11 or later need Delve built by Go 1.11 or later

升级安装 delve

go get -u github.com/go-delve/delve/cmd/dlv