艾逗笔

有梦想爱学习的实力派

「分分钟上手 VS Code」基本使用指南

艾逗笔's Avatar 2019-08-01 系列分享

  1. 1. VS Code 介绍
  2. 2. VS Code 使用
  3. 3. VS Code 安装扩展
  4. 4. VS Code 自定义代码片段
  5. 5. VS Code 自定义快捷键
  6. 6. VS Code 自定义配置参数
  7. 7. 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 艾逗笔",
            "*/",
            "$2"
        ],
        "description": "Author Infomartion"
    }
}

上述自定义代码配置保存后,在 phpgo 文件中输入 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 弹出主题选择界面,可以选择自带的主题。也可以在扩展中心安装第三方主题后再在这里启用。

本文最后更新于 天前,文中所描述的信息可能已发生改变