vs code使用指南
1.楔子
在 Build 2015 大会上,微软了宣布推出免费跨平台,支持30多种语言的开箱代码编辑器 Visual Studio Code!
Visual Studio Code (简称 VS Code / VSC) 是一款免费开源的现代化轻量级代码编辑器,支持语法高亮、智能代码补全、自定义热键、括号匹配、代码片段、代码对比 Diff、GIT 等特性,并针对网页开发和云端应用开发做了优化。软件跨平台支持 Win、Mac 以及 Linux,运行流畅,可谓是微软的良心之作。
VS Code只是一款轻量级的代码编辑器,而不是一个重量级的完整 IDE (集成开发环境),它的竞争对手将会是 Sublime Text、Atom、VIM、Notepad++ 等产品。
帮助文档:
https://code.visualstudio.com/docs
2.VS Code的下载和安装
官方网站为:https://code.visualstudio.com/,下载安装即可。
本次安装的版本如下所示
3.VS Code的简单介绍和使用
3.1界面介绍
3.2 快捷键
- 页面搜索:
Ctrl + F
- 全局搜索:
Ctrl + Shit + F
- 输入行号可以跳转到指定的行:
Ctrl + G
- 打开命令输入框:
Ctrl + Shift + P
或者F1
- Markdown预览:
Ctrl + Shift + V
- 快速的切换文件:
Ctrl + Tab
- 输入内容来搜索文件:
Ctrl + p
- 列模式:
shift+alt+鼠标
- folding折叠
Fold (Ctrl+Shift+[) 折叠所在的这个部分
Unfold (Ctrl+Shift+]) 取消所在部分的折叠
Fold All (Ctrl+K Ctrl+0) 折叠当前编辑文件的所有可折叠部分
Unfold All (Ctrl+K Ctrl+J) 取消当当前文件所有折叠
Fold Level X (Ctrl+K Ctrl+2 for level 2) 折叠所有level x(还可以用 ctrl+3、ctrl+4等)的缩进去(除了当前编辑位置所在的)
- 加/解注释:
ctrl+/
3.3 版本控制
要想使用Gi,必须先初始化,点击那个Initialize git repository按钮,初始化Git仓库。
初始化结果如下:
3.4 使用技巧
- 文件类型
使用快捷键,Ctrl + Shift + P,打开命令输入框,输入language - 文件编码
Ctrl + Shift + P打开命令面板,输入encoding - MarkDown
VS Code也支持markdown的书写和预览,如果要预览的话,要先保存文件,然后按下快捷键Ctrl + Shift + V,就可以预览了。 - 快速的切换文件
当我们编写多个文档时,经常需要在多个文件直接切换,用鼠标点击来切换是一个很奢侈的做法,我们通常都喜欢用快捷键。在Vs Code中,我们可以用Ctrl + Tab键来快速的切换文件
按住Ctrl键不要松,不断的按下Tab键来切换选择文件。当然,这只适用于比较少的文件时,文件多了,这样就不好用了。
文件多的时候,我们可以使用Ctrl + p快捷键,打开和上面一样的输入框,不过这个时候我们可以输入内容来搜索文件,然后选择打开。 - 支持打开一个文件夹
当我们编辑一个项目中的文件时,同时打开一个文件夹可是非常爽的功能,其他很多文本编辑器都不具备这样的特色。
4. 插件
Vs Cod 有着丰富的插件库,能够满足日常所有的需求,下面简绍一些常用的插件。
插件库如下所示:
4.1 怎么安装插件
-
方法一:
按F1或Ctrl+Shift+p,输入extensions,点击第一个就可以 -
方法二:
ctrl + P 然后输入 >ext install -
方法三:
点击图中位置
4.2代码美化 Beautify
Beautify 插件可以快速格式化你的代码格式,让你在编写代码时杂乱的代码结构瞬间变得非常规整,代码强迫症必备,较好的代码格式在后期维护以及他人阅读时都会有很多的便利。
插件支持的语言非常多,基本堵盖了目前所有的语言,而且你还可以自定义代码格式化的结构。
4.3 文件图标 vscode-icons
首先为了我们在编码时有一个高效、易用的界面,我们需要对一些不明了的组件做一些美化。
vscode-icons 插件可以实现对各种文件类型的文件前的图标进行优化显示,这样我们在查看长长的文件列表的时候,可以直接通过文件的图标就可以快速知道文件的类型,而不是去看文件的后缀。
4.4 代码拼写检查 Code Spell Checker
此插件安装后就不用管就好了,在你代码中有单词拼写错误时,你就会发现它的好处,因为我们写代码毕竟都是大量的英文单词变量定义,插件还可以给出错误拼写单词的建议。
4.5 Settings Sync
最好用的插件,没有之一,一台电脑配置好之后,其它的几台电脑都不用配置。新机器登录一下就搞定了。再也不用折腾环境了,
使用GitHub Gist同步多台计算机上的设置,代码段,主题,文件图标,启动,键绑定,工作区和扩展。
4.6 中文(简体)语言包
Chinese (Simplified) Language Pack for Visual Studio Code
将界面转换为中文,对英语不好的人,非常友好。
4.7 guides
显示代码对齐辅助线,很好用
4.8Rainbow Brackets
为圆括号,方括号和大括号提供彩虹色。这对于Lisp或Clojure程序员,当然还有JavaScript和其他程序员特别有用。
4.9 Bracket Pair Colorizer
用于着色匹配括号
5. 总结
简单的总结一下Vs Code的有点:
1、 支持30多种常用语言的语法高亮, 并对html、 js、 css、 Angular等很好的语法支持, 并且还支持MarkDown的预览!
2、 体积小, 功能强大, 当然性能也是很好的, 打开超大型的文本文件也不会卡死, 大家可以和其他的一些文本编辑器对比一下。
3、 支持命令操作(Ctrl + Shift + P) 和鼠标操作, 还有大量的快捷键, 可以适应各种开发者的操作习惯。
4、 支持Git版本控制器, 可以完成创建分支、 解决冲突、 提交修改等操作;
5、 强大的搜索功能, 并且支持多文件搜索;
6、 最大的有点, 当然是跨平台、 免费;