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.gif
快捷键显示
在命令面板上面的命令，如果设置了快捷键，那么在右边就会显示，如果你忘记了可以通过这种方式查看。
keyboard references.png
快速打开
快速打开文件
Mac: cmd+p
Windows/Linux: ctrl+p
Quick Open.gif
Tip: Type "?" to view help suggestions.
?
命令行工具
使用Terminal命令快速的启动并设置项目。
安装命令行工具
- 打开 Command Palette | 命令面板 （command+shift+p）
- 输入 "shell command"，点击回车
使用命令行工具
# 使用VS code 打开当前文件夹
code .
# 在最近使用的代码窗口打开当前文件夹
code -r .
# 创建新文件
code -n
# 修改语言
code --locale=es
# 打开 diff 编辑器
code --diff <file1> <file2>
# 查看帮助
code --help
# 禁用所有的插件
code --disable-extensions .
[图片上传失败...(image-925bd4-1536738397728)]
状态栏
显示错误和警告
能够快速的跳转到错误和警告的位置。
Mac: shift+cmd+m
Windows / Linux: ctrl+shift+m
errors and warnings.gif
修改语言模式
修改当前文件类型为自己想用的语言。如果你想将语言配置保存下来，可以使用configure file association for... 命令将当前文件扩展名与语言相关联
Mac: cmd+k m
Windows / Linux: ctrl+k m
change syntax.gif
Customization | 自定义
Vs code有很多自定义选项
- 修改主题
- 修改快捷键
- 自定义设置
- 添加 JSON 验证
- 自定义代码块
- 安装插件
修改主题
- 打开 Command Palette | 命令面板 （command+shift+p）
- 输入" themes"，选择修改想用的主题
- 你可以从插件市场下载自己喜欢的主题
Preview themes.gif
还可以修改文件ICON的主题样式。
File icon themes.gif
修改快捷键
macOS
macOS VS code 快捷键
Windows
Windows
Linux
Linux VS code 快捷键
键盘映射
如果你已经用习惯了其他编辑器，类似Vim，Sublime，Emacs，Atom的可以直接从Preferences > Keymap Extensions 进行修改。
自定义快捷键
- 打开 Command Palette | 命令面板 （command+shift+p）
- 输入"keyboard shortcuts."
- 输入自己想用的快捷键
customize keyboard shortcuts.gif
自定义设置
打开 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”
[图片上传失败...(image-a4b1aa-1536738397728)]
/自动保存/： 你还可以使用最高级别的自动保存，在File > Auto Save设置
"files.autoSave": "afterDelay"
/保存时格式化/
"editor.formatOnSave": true,
/修改tab长度/
"editor.tabSize": 4
/空白符号显示/
"editor.renderWhitespace": "all"
根据语言设置
之前所有的设置可以根据不同语言分别生效。
"[languageid]": {
}
[图片上传失败...(image-c2712e-1536738397728)]
插件
安装插件
点击VS code 插件市场，就可以安装插件了，还可以选择不同的排序方式，例如按照下载数量排序。
install extensions.gif
插件推荐
在插件设置的位置，可以选择推荐插件，这是VS code 根据当前语言环境推荐给你的插件。
show recommended extensions.gif
制作插件
当然如果你想要做一个自己的插件，你可以根据官方文档自己编写，大神可以自由发挥。
documentation on contribution points
文件/文件夹管理
终端
Windows / Linux / Mac: ctrl+`
[图片上传失败...(image-1c963c-1536738397728)]
侧边栏
Mac: cmd+b
Windows / Linux: ctrl+b
toggle side bar.gif
Zen Mode | 专注模式
Mac: cmd+k z
Windows / Linux: ctrl+k z
zen mode.gif
并排编辑
Mac: cmd+\ 或在文件管理页面按住cmd并点击鼠标
Windows / Linux: ctrl+\
Linux: ctrl+2
你也可以用鼠标将文件从一个组拖动到另外一组。
split editors.gif
切换编辑器窗口
Mac: cmd+1, cmd+2, cmd+3
Windows / Linux: ctrl+1, ctrl+2, ctrl+3
navigate editors.gif
激活资源管理器窗口
Mac: cmd+shift+e
Windows / Linux: ctrl+shift+e
创建和打开文件
Mac: cmd+鼠标点击
Windows / Linux: ctrl+鼠标点击
create and open file.gif
关闭当前窗口
Mac: cmd+w
Windows / Linux: ctrl+k f
查看文件编辑历史
查看历史 ctrl+tab
后退
Mac: ctrl+-
Windows / Linux: alt+left
前进
Mac: ctrl+shift+-
Windows / Linux: alt+right
navigate history.gif
文件导航
Mac: cmd+e 或 cmd+p
Windows / Linux: ctrl+e 或 ctrl+p
navigate to file.gif
以上都是VS code的基本使用技巧，更高级的技巧将在下一片内容整理。这些基本技巧看着很多，实际上用的最多的还是打开命令导航和文件导航，剩下的基本都可以在这个基础上打字来解决。
