Visual Studio Code配置指南
本文最后更新于2036天前,其中的信息可能已经有所发展或是发生改变。

Visual Studio Code (简称 VS Code)是由微软研发的一款免费、开源的跨平台文本(代码)编辑器。在我看来它是「一款完美的编辑器」。

本文是有关 VS Code 的特性介绍与配置指南,相关设置主要针对 Mac OS X 平台。在快捷键部分, ⌘ 指 Command 键,⇧ 指 Shift 键,⌃ 指 Control 键,⌥ 指 Option/Alt 键。

1. Visual Studio Code 特性简介

1.1 Git 集成

VS Code Git 集成

如上图所示,VS Code 默认集成了 Git 版本管理。

切换至 Git 面板,点击左侧被修改的文件,即可进行版本对比。默认为左右窗口对比视图(Side by Side View),点击编辑器窗口右上方「…」图标可切换至行内对比视图(Inline View)。

鼠标移至 Git 面板中的文件列表上时,会出现「+」图标,点击后即可将文件添加至暂存区(Stage),点击右上方的「…」图标可以完成常用的 pull/commit 操作。

点击窗口左下角的 git 分支信息,即可快速切换至其他分支。

更多 Git 参考资料请阅读《Git 进阶指南》和 VS Code 官方文档《Version Control》章节。

1.2 多窗口实时编辑与预览

多窗口实时编辑与预览

VS Code 最多可同时开启三个子窗口。若多个子窗口中打开的文件为同一文件时,则修改其中任意窗口内容,其他窗口都可以实时同步变更。

如上图,左侧子窗口是一个 Markdown 文件,右侧子窗口是该文件的 Markdown 预览模式(快捷键 ⇧⌘V),如此即可实现类似 MacDown/Mou 等软件的编写体验。

1.3 代码提示与引用分析

虽然是一款轻量级编辑器,但 VS Code 却有着 IDE 级别的代码高亮、语法检测、引用分析功能,十分适合编程初学者和大型项目开发。在其官网上列出了它默认支持的语言列表。

图:VS Code 支持的编程语言种类

借助 Typings ,VS Code 还支持了 Node.js、ES6、AngularJS、ReactJS,十分适合前端开发人员。为了能更好的和其他开源框架融合,VS Code 有意削弱了原有的 JavaScript 语法校验功能,建议用户使用 ESLint 来定制个性化代码校验需求。

除此之外,VS Code 的 Debug 功能也是十分强大。以下是其 Node.js Debug 的演示:

图:VS Code Node.js Debugging

借助「Debugger for Chrome」插件,还可以直接在编辑器中打断点调试 web。

1.4 命令行调用

VS Code 提供了一个 code 命令,用来在 shell 环境下调用编辑器。使用快捷键 ⇧⌘P(或 F1) 唤起命令面板,输入以下命令即可完成安装。

图:安装 code 命令行

code 命令后可接多个路径或文件:

code pro6.js pro6.scss ../

文件对比:

code -d new-file.js old-file.js

打开文件并跳至指定行:

code -g source/cn/static/global/tracker.js:15

更多 code 命令行使用方法,参见《Additional Command line arguments》。

1.5 更聪明的 Emmet

VS Code 内置了 Emmet,且在其基础之上做了进一步增强,极大的提升了 CSS、HTML 编写效率。
例如,在一个 CSS 选择器中书写以下属性后,按下 tab 键,均可自动补全为 overflow:hidden

ov:h
ove:h
of:h

更多 Emmet 缩写,请参考《Emmet Cheat Sheet》。

2. 快捷键与插件配置

2.1 所有快捷键列表

注:VS Code 的快捷键有很多是 Fn 功能键,不符合 Mac 用户习惯,建议各位通过 Preferences -> Keyboard Shortcuts 重设快捷键。

所有快捷键列表请参见《Key Bindings for Visual Studio Code》,其中较为常用的快捷键有以下这些:

文本选择

  • ⌃⇧⌘→ - AST (Abstract Syntax Tree) 抽象语法树选择展开一级
  • ⌃⇧⌘← - 抽象语法树选择缩小一级
  • F2 - 重命名当前对象,或使用鼠标右键菜单
  • ⌘F2 - 重命名当前字符串(包含作为子字符串的情况),或使用鼠标右键菜单
  • ⌥→ - 以单词为单位向后移动光标
  • ⌥⇧→ - 以单词为单位向后选中文本

单行编辑

  • ⇧⌘K - 单行操作,删除光标所在行
  • ⇧⌥↓ - 复制光标所在行到下一行
  • ⌥↓ - 将光标所在行移至下一行

多行编辑

  • ⌥⌘↓ - 向下插入一个光标,或者使用 ⌥ + Click
  • ⇧⌥ + 鼠标拖动 - 多列区块选择,再配合 ⇧⌘→ 可选中至结尾处
  • ⇧⌘L - 选择相同文本
  • ⌘F2 - 选择相同单词,或者使用 ⌘D 依次加入选中

代码定位

  • ⇧⌘\ - 跳转至对应匹配括号处
  • ⇧⌘O - 跳转至对象、属性、方法
  • ⌃G - 跳转至指定行
  • ⌘↓ - 跳转至文件结尾
  • ⇧⌘M - 显示当前文件的错误与警告信息
  • F12 - 跳转至定义行
  • ⌥F12 - 浮窗打开定义行(可直接修改)
  • ⌥⌘ + Click - 新开侧边窗口跳转至定义行
  • ⇧⌘G - 选中上一次的查找结果

代码展示

  • ⌥Z - 开启/关闭代码自动换行,还可通过 editor.wrappingColumn 配置单行最大字符数
  • ⌥⌘[ - 代码折叠,⌘K ⌘0 为全部折叠
  • ⌥⌘] - 代码展开,⌘K ⌘J 为全部展开
  • ⇧⌥F - 代码格式化

窗口操作

  • ⌘1 ⌘2 ⌘3 - 切换至对应的子窗口
  • ⌃Tab - 切换当前子窗口的标签页
  • ⌃` - 打开内置 Terminal 窗口
  • ⌘⇧U - 打开/关闭 Output 窗口,可查看 Extensions/Git/Task 输出
  • ⌘0 - 焦点进入侧边栏项目目录,进入使用快捷键 J 向上、K 向下、H 折叠、L 打开
  • ⌘K E - 焦点进入侧边栏当前文件列表,进入后使用快捷键同上

2.2 插件推荐

3. 常见问题

3.1 如何支持 PHP Smarty Template 语法

VS Code 能识别大部分主流代码文件,当需要进行关联语法设置时,可通过 Preferences -> Workspace Settings (或 User Settings)配置文件进行设置。

例如,以下代码可以将后缀为 .tpl 的 Smarty 模板文件关联成 PHP 语法:

"files.associations":{
	"*.tpl": "php"	
}

3.2 如何在 sidebar 隐藏编译后文件

设置 Preferences -> Workspace Settings (或 User Settings)配置文件,将需要隐藏的文件按 glob 匹配模式进行配置,例如以下是 Angular2 TypeScript 项目中隐藏 .js 与 .js.map 文件的配置:

{
    "files.exclude": {
        "**/._*": true,
        "node_modules/": true,
        "app/*.js.map": true,
        "app/*.js": true
    }
}

3.3 如何搜索 node_modules 文件夹中的文件

VS Code 的默认搜索规则中会排除 **/.git, **/.DS_Store, **/bower_components, **/node_modules 目录,可以在用户配置文件(User Settings)中加入以下配置,来关闭或启用这些规则:

{
	"search.exclude": {
		"**/node_modules": false,
		"**/bower_components": true
	}
}

3.4 使用 VIM 插件有哪些注意事项?

如果你熟悉 VIM ,可以尝试 VIM for VS Code 插件。插件安装后,通过 Toggle VIM Mode 命令可以开启/关闭 VIM 模式。

  • 长按 hjkl 方向键无法响应的问题,解决方法终端运行defaults write com.microsoft.VSCode ApplePressAndHoldEnabled -bool false
  • 如何让 VIM yank 至剪切板的内容通过 ⌘V 粘贴出来,配置如下 setting:"vim.useSystemClipboard": true,
  • 系统默认的 ⌘D 向后删除键失效了。在 Keyboard Shortcuts 中清除掉 extension.vim_ctrl+d 的按键绑定即可
  • ctrl+f, ctrl+b 等方向键失效。在 settings 中增加以下配置,让这些快捷键不被 vim 插件复写"vim.handleKeys": { "<C-a>": false, "<C-e>": false, "<C-b>": false, "<C-f>": false },

点击数:195

    评论

    1. mondayice
      博主
      Windows Chrome 73.0.3683.86
      6年前
      2019-5-12 9:06:36

      GOOD

    2. mondayice
      博主
      Windows Chrome 73.0.3683.86
      6年前
      2019-5-12 9:10:29

      TEST

    3. mondayice
      博主
      Windows Chrome 73.0.3683.86
      6年前
      2019-5-12 9:14:05

      test02

    4. mondayice
      博主
      Windows Chrome 73.0.3683.86
      6年前
      2019-5-12 9:23:41

      test03

    发送评论 编辑评论

    
    				
    |´・ω・)ノ
    ヾ(≧∇≦*)ゝ
    (☆ω☆)
    (╯‵□′)╯︵┴─┴
     ̄﹃ ̄
    (/ω\)
    ∠( ᐛ 」∠)_
    (๑•̀ㅁ•́ฅ)
    →_→
    ୧(๑•̀⌄•́๑)૭
    ٩(ˊᗜˋ*)و
    (ノ°ο°)ノ
    (´இ皿இ`)
    ⌇●﹏●⌇
    (ฅ´ω`ฅ)
    (╯°A°)╯︵○○○
    φ( ̄∇ ̄o)
    ヾ(´・ ・`。)ノ"
    ( ง ᵒ̌皿ᵒ̌)ง⁼³₌₃
    (ó﹏ò。)
    Σ(っ °Д °;)っ
    ( ,,´・ω・)ノ"(´っω・`。)
    ╮(╯▽╰)╭
    o(*////▽////*)q
    >﹏<
    ( ๑´•ω•) "(ㆆᴗㆆ)
    😂
    😀
    😅
    😊
    🙂
    🙃
    😌
    😍
    😘
    😜
    😝
    😏
    😒
    🙄
    😳
    😡
    😔
    😫
    😱
    😭
    💩
    👻
    🙌
    🖕
    👍
    👫
    👬
    👭
    🌚
    🌝
    🙈
    💊
    😶
    🙏
    🍦
    🍉
    😣
    Source: github.com/k4yt3x/flowerhd
    颜文字
    Emoji
    小恐龙
    花!
    上一篇
    下一篇