Sign in Subscribe
Tools | 工具

VS Code 基本使用技巧整理

Tim Wu

• 7 min read
VS Code 基本使用技巧整理

Visual Studio Code（简称VS Code）是微软开发的文本编辑器，同时支持Windows、Linux和macOS操作系统，并且是开源的。从2015年发布到现在，因为功能强大，扩展性强，并且使用体验非常好，用的人是越来越多。我也是从原来的sublime迁移到atom到
现在VS code。在这里整理了一下对于刚入坑非常有帮助的一些基础技巧。希望能有些帮助，高级复杂一点的编辑技巧会在下一片内容进行整理，希望大家多关注我。

命令面板

随时随地显示命令面板，并操作

Mac: cmd+shift+p or f1
Windows / Linux: ctrl+shift+p or f1
Command Palette

快捷键显示

在命令面板上面的命令，如果设置了快捷键，那么在右边就会显示，如果你忘记了可以通过这种方式查看。

reference keybindings

快速打开

快速打开文件

Mac: cmd+p
Windows/Linux: ctrl+p
Quick open
Tip: Type "?" to view help suggestions.
?

命令行工具

使用Terminal命令快速的启动并设置项目。

安装命令行工具

  1. 打开 Command Palette | 命令面板 （command+shift+p）
  2. 输入 "shell command"，点击回车

使用命令行工具

# 使用VS code 打开当前文件夹
code .

# 在最近使用的代码窗口打开当前文件夹
code -r .

# 创建新文件
code -n

# 修改语言
code --locale=es

# 打开 diff 编辑器
code --diff <file1> <file2>

# 查看帮助
code --help

# 禁用所有的插件
code --disable-extensions .
code --help

状态栏

显示错误和警告

能够快速的跳转到错误和警告的位置。

Mac: shift+cmd+m
Windows / Linux: ctrl+shift+m
status bar

修改语言模式

修改当前文件类型为自己想用的语言。如果你想将语言配置保存下来，可以使用configure file association for... 命令将当前文件扩展名与语言相关联

Mac: cmd+k m
Windows / Linux: ctrl+k m
change language mode

Customization | 自定义

Vs code有很多自定义选项

  • 修改主题
  • 修改快捷键
  • 自定义设置
  • 添加 JSON 验证
  • 自定义代码块
  • 安装插件

修改主题

  1. 打开 Command Palette | 命令面板 （command+shift+p）
  2. 输入"themes"，选择修改想用的主题
  3. 你可以从插件市场下载自己喜欢的主题
Theme

还可以修改文件ICON的主题样式。

Files Icons

修改快捷键

macOS

macOS VS code 快捷键

Windows

Windows VS code 快捷键

Linux

Linux VS code 快捷键

键盘映射

如果你已经用习惯了其他编辑器，类似Vim，Sublime，Emacs，Atom的可以直接从Preferences > Keymap Extensions 进行修改。

自定义快捷键

  1. 打开 Command Palette | 命令面板 （command+shift+p）
  2. 输入"keyboard shortcuts."
  3. 输入自己想用的快捷键
自定义快捷键

自定义设置

打开 settings.json

Mac: cmd+,
Windows / Linux: File > Preferences > Settings

粘贴时格式化

"editor.formatOnPaste": true

改变字体大小

"editor.fontSize": 18

设置缩放等级

"window.zoomLevel": 5

编程字体连字

"editor.fontFamily": "Fira Code",
"editor.fontLigatures": true
需要安装字体“Fira Code”
Fira Code 连字

自动保存： 你还可以使用最高级别的自动保存，在File > Auto Save设置

"files.autoSave": "afterDelay"

保存时格式化

"editor.formatOnSave": true,

修改tab长度

"editor.tabSize": 4

空白符号显示

"editor.renderWhitespace": "all"

根据语言设置

之前所有的设置可以根据不同语言分别生效。

"[languageid]": {

}
language specific settings

插件

安装插件

点击VS code 插件市场，就可以安装插件了，还可以选择不同的排序方式，例如按照下载数量排序。

Install extensions

插件推荐

在插件设置的位置，可以选择推荐插件，这是VS code 根据当前语言环境推荐给你的插件。

extension recommendations

制作插件

当然如果你想要做一个自己的插件，你可以根据官方文档自己编写，大神可以自由发挥。

documentation on contribution points

文件/文件夹管理

终端

Windows / Linux / Mac: ctrl+`
terminal

侧边栏

Mac: cmd+b
Windows / Linux: ctrl+b
Toggle Sidebar

Zen Mode | 专注模式

Mac: cmd+k z
Windows / Linux: ctrl+k z
zen mode

并排编辑

Mac: cmd+\ 或在文件管理页面按住cmd并点击鼠标
Windows / Linux: ctrl+\
Linux: ctrl+2

你也可以用鼠标将文件从一个组拖动到另外一组。

side by side edit

切换编辑器窗口

Mac: cmd+1, cmd+2, cmd+3
Windows / Linux: ctrl+1, ctrl+2, ctrl+3
switch between editors

激活资源管理器窗口

Mac: cmd+shift+e
Windows / Linux: ctrl+shift+e

创建和打开文件

Mac: cmd+鼠标点击
Windows / Linux: ctrl+鼠标点击
create and open a file

关闭当前窗口

Mac: cmd+w
Windows / Linux: ctrl+k f

查看文件编辑历史

查看历史 ctrl+tab

后退

Mac: ctrl+-
Windows / Linux: alt+left

前进

Mac: ctrl+shift+-
Windows / Linux: alt+right
file history

文件导航

Mac: cmd+e 或 cmd+p
Windows / Linux: ctrl+e 或 ctrl+p
navigate to a file

以上都是VS code的基本使用技巧，更高级的技巧将在下一片内容整理。这些基本技巧看着很多，实际上用的最多的还是打开命令导航和文件导航，剩下的基本都可以在这个基础上打字来解决。

微信公众号：产品看世界 chanpinkanshijie

产品看世界二维码