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](http://w.o.perfowl.com/2018-09-10-command%20palette.gif)
快捷键显示
在命令面板上面的命令,如果设置了快捷键,那么在右边就会显示,如果你忘记了可以通过这种方式查看。
![reference keybindings](http://w.o.perfowl.com/2018-09-10-keyboard%20references.png)
快速打开
快速打开文件
Mac: cmd+p
Windows/Linux: ctrl+p
![Quick open](http://w.o.perfowl.com/2018-09-10-Quick%20Open.gif)
Tip: Type "?" to view help suggestions.
![?](http://w.o.perfowl.com/2018-09-10-061241.png)
命令行工具
使用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 .
![code --help](http://w.o.perfowl.com/2018-09-10-all%20cli%20commands.png)
状态栏
显示错误和警告
能够快速的跳转到错误和警告的位置。
Mac: shift+cmd+m
Windows / Linux: ctrl+shift+m
![status bar](http://w.o.perfowl.com/2018-09-10-errors%20and%20warnings.gif)
修改语言模式
修改当前文件类型为自己想用的语言。如果你想将语言配置保存下来,可以使用configure file association for...
命令将当前文件扩展名与语言相关联
Mac: cmd+k m
Windows / Linux: ctrl+k m
![change language mode](http://w.o.perfowl.com/2018-09-10-change%20syntax.gif)
Customization | 自定义
Vs code有很多自定义选项
- 修改主题
- 修改快捷键
- 自定义设置
- 添加 JSON 验证
- 自定义代码块
- 安装插件
修改主题
- 打开 Command Palette | 命令面板 (command+shift+p)
- 输入"themes",选择修改想用的主题
- 你可以从插件市场下载自己喜欢的主题
![Theme](http://w.o.perfowl.com/2018-09-10-Preview%20themes.gif)
还可以修改文件ICON的主题样式。
![Files Icons](http://w.o.perfowl.com/2018-09-10-File%20icon%20themes.gif)
修改快捷键
macOS
![macOS VS code 快捷键](http://w.o.perfowl.com/2018-09-10-KeyboardReferenceSheet.png)
Windows
![Windows VS code 快捷键](http://w.o.perfowl.com/2018-09-10-0001%202.jpg)
Linux
![Linux VS code 快捷键](http://w.o.perfowl.com/2018-09-10-0001.jpg)
键盘映射
如果你已经用习惯了其他编辑器,类似Vim,Sublime,Emacs,Atom的可以直接从Preferences > Keymap Extensions 进行修改。
自定义快捷键
- 打开 Command Palette | 命令面板 (command+shift+p)
- 输入"keyboard shortcuts."
- 输入自己想用的快捷键
![自定义快捷键](http://w.o.perfowl.com/2018-09-10-customize%20keyboard%20shortcuts.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”
![Fira Code 连字](http://w.o.perfowl.com/2018-09-10-font%20ligatures.png)
自动保存: 你还可以使用最高级别的自动保存,在File > Auto Save
设置
"files.autoSave": "afterDelay"
保存时格式化
"editor.formatOnSave": true,
修改tab长度
"editor.tabSize": 4
空白符号显示
"editor.renderWhitespace": "all"
根据语言设置
之前所有的设置可以根据不同语言分别生效。
"[languageid]": {
}
![language specific settings](http://w.o.perfowl.com/2018-09-10-language%20based%20settings.png)
插件
安装插件
点击VS code 插件市场,就可以安装插件了,还可以选择不同的排序方式,例如按照下载数量排序。
![Install extensions](http://w.o.perfowl.com/2018-09-10-install%20extensions.gif)
插件推荐
在插件设置的位置,可以选择推荐插件,这是VS code 根据当前语言环境推荐给你的插件。
![extension recommendations](http://w.o.perfowl.com/2018-09-10-show%20recommended%20extensions.gif)
制作插件
当然如果你想要做一个自己的插件,你可以根据官方文档自己编写,大神可以自由发挥。
documentation on contribution points
文件/文件夹管理
终端
Windows / Linux / Mac: ctrl+`
![terminal](http://w.o.perfowl.com/2018-09-10-Integrated%20terminal.png)
侧边栏
Mac: cmd+b
Windows / Linux: ctrl+b
![Toggle Sidebar](http://w.o.perfowl.com/2018-09-10-toggle%20side%20bar.gif)
Zen Mode | 专注模式
Mac: cmd+k z
Windows / Linux: ctrl+k z
![zen mode](http://w.o.perfowl.com/2018-09-10-zen%20mode.gif)
并排编辑
Mac: cmd+\ 或在文件管理页面按住cmd并点击鼠标
Windows / Linux: ctrl+\
Linux: ctrl+2
你也可以用鼠标将文件从一个组拖动到另外一组。
![side by side edit](http://w.o.perfowl.com/2018-09-10-split%20editors.gif)
切换编辑器窗口
Mac: cmd+1, cmd+2, cmd+3
Windows / Linux: ctrl+1, ctrl+2, ctrl+3
![switch between editors](http://w.o.perfowl.com/2018-09-10-navigate%20editors.gif)
激活资源管理器窗口
Mac: cmd+shift+e
Windows / Linux: ctrl+shift+e
创建和打开文件
Mac: cmd+鼠标点击
Windows / Linux: ctrl+鼠标点击
![create and open a file](http://w.o.perfowl.com/2018-09-10-create%20and%20open%20file.gif)
关闭当前窗口
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](http://w.o.perfowl.com/2018-09-10-navigate%20history.gif)
文件导航
Mac: cmd+e 或 cmd+p
Windows / Linux: ctrl+e 或 ctrl+p
![navigate to a file](http://w.o.perfowl.com/2018-09-10-navigate%20to%20file.gif)
以上都是VS code的基本使用技巧,更高级的技巧将在下一片内容整理。这些基本技巧看着很多,实际上用的最多的还是打开命令导航和文件导航,剩下的基本都可以在这个基础上打字来解决。
微信公众号:产品看世界 chanpinkanshijie
![产品看世界二维码](http://w.o.perfowl.com/qrcode_for_gh_e4e19aa4bfa5_258.jpg)