VSCode(visualstudiocode)VSC编辑器(微软出品,js开发的
编辑器)
⼀.选择合适的编辑器,提⾼编程效率
代码编辑器的选择,可以说是开发者社区中⼀个经久不衰的话题,现今编辑器的数量数不胜数,vim,sublime Text,Emacs,Atom等等,那么对于⼀个开发者⽽⾔,挑选⼀个合适的编辑器是可以有效的提⾼编程效率;
选择编辑器时,需要考虑的三个因素:
1.选择的编辑器对⽂本,代码的编程效率要求有多⾼;
2.选择的编辑器对编程语⾳的⽀持如何,配置是否繁琐;
3.选择的编辑器插件⽣态如何,社区是否活跃;
VSCode:是⼀款免费的、开源的、⾼性能的、跨平台的、轻量级的代码编辑器,同时,在性能,语⾔⽀持、开源社区⽅⾯也做的很不错!
⼆.学编辑器,到底应该学什么
编辑器的学习就像编程语⾔的学习类似,⼀开始不熟悉的⼀门编程语⾔的时候,可能会从官⽅⽂档,从头到尾的学习这门语⾔的内容,但是学习过程中⼀些⼩⼩的语法就可能会影响你学习的进度,到之后你完全掌握这门语法的时候,你会发现开始学习时遇到的那点语法问题并不是那么的重要。
在掌握⼀门编程语⾔的时候,你想要学习另外⼀门编程语⾔,并且还是按照第⼀次的学习⽅式去学习这门语⾔,那么说明你并没有从全局理解这门语⾔,也没有再脑海中建⽴“学习框架”。
其实,⼀门新的编程语⾔往往是解决⽼语⾔的某个短板,但是他们的本质其实并没有多⼤的改变,如果你在学习第⼀门语⾔的时候能建⽴⼀套⾃⼰的“学习框架”,之后再学习⼀门新的语⾔的时候就会更有效率。
同时,学习编辑器的学习,也和编辑语⾔⼀样。当使⽤⼀个⼯具时,你最关⼼的应该是它能⽤来做什么,它擅长做什么,以及它不能做什么;换句话说,就是指这个⼯具的‘上限’和‘下限’
⾸先,我们先⼀下编辑器的‘下限’:
1.快捷键的选⽤:
⾸先要考虑编辑器再选⽤快捷键的时候是否会与系统⾃带快捷键有所冲突;
其次,要参考其他开发⼯具对快捷键组合,迎合⽤户习惯;
最后,也是最重要的⼀点,我们要看快捷键的配置是否有统⼀性;
配置的统⼀性:Shift键只能⽤于控制⽂本选择,Ctrl或者Cmd键只能当做辅助键,Tab⽤于控件之间的跳转等。
2.编程语⾔以及框架的⽀持:
选择⼀个编辑器时,我们需要考虑的是它对你必须使⽤的编程语⾔的⽀持情况如何,语法⾼亮是否正确,是否能⾃动补全代码能否直接调试或运⾏测试等;
3.对⼯作流的选择和⽀持(⼯作流:是对⼯作流程及其各操作步骤之间业务规则的抽象、概括描述。)
接着,我们来说说编辑器的‘上限’:
如果说⼀款编辑器⽀持⽤户写插件来定制功能,那么它的‘上限’就很⾼了。像Eclipse这样允许修改任意功能的⼯具来说,它们的‘上限’理论就是⽆限的,但是扩展编辑器这个事,还是需要从社区和个⼈的,能否达到这个⾼度还是个未知数。
Eclipse是最流⾏的java编辑器之⼀,插件的开发语⾔也是java,所以它的插件社区还是很活跃的,但是Eclipse把插件运⾏到主程序中,⼀旦插件的性能堪忧,就会影响到Eclipse的本⾝体验。
VSCode的插件开发语⾔是JavaScript,所以写扩展对于很多⼈来说是没有门槛的,因为⼤多数⼈多少都会写点js,所以对于
VSCode来说插件社区的活跃度还是不⽤担⼼的,主要是要考虑如何避免跳进Eclipse的坑⾥。
关于编辑器的‘上限’和‘下限’,其实就是我们再选择编辑器的时候所需要考虑的因素以及学习的⽅向,当然最重要的就是多动⼿;
三.关于VSCode
VSCode(Visual Studio Code):它是⼀个免费的,开源的跨平台编辑器。之所以强调‘编辑器’,可能是VSCode并⽆意成为⼀个全尺⼨的集成开发环境,也就是IDE。
它是由Erich Gamma把Monaco Editor移植到桌⾯平台上,成为了现今的VSCode。
很多⼈都把编辑器等同于IDE,其实并⾮如此。IDE更为注重编程体验,对代码有很好的理解,同时侧重于为代码调试、测试等提供图形化界⾯的⽀持。因此,可能会显得⽐较笨重;
⽽编辑器则相对更轻量,侧重⽂件或者⽂件夹,语⾔,⼯作流的⽀持更丰富和⾃由,VSCode的定位就是编辑器,但⼜并不局限于此。
开源开发的平台:
⾸先,VSCode的源代码以MIT协议(开源中国)开源,这就意味着我们可以免费获取VSCode的核⼼代码,社区可以基于VSCode的代码,开发⾃⼰的产品;⽽VSCode也经常能从⼀些知名的项⽬中吸取宝贵的经验。
其次,VSCode的源代码托管在GitHub上,同时使⽤GitHub的开发计划和测试,使每个⽤户都可以在GitHub上了解VSCode的开发进度,作为⽤户,可以更好的了解产品的发展情况。
再者,VSCode⾃带了TypeScript和Node.js的⽀持,⽤户下载VSCode后能⽴即获得javascript和nodejs的智能提⽰,且⽆需任何配置即可调试nodejs,然⽽VSCode的团队并不会精通所有的语⾔,那么对于他们不熟悉的语⾔,VSCode该怎么⽀持呢?最好的⽅法就是让专业的⼈来做,所以VSCode为编程⼯作者提供了统⼀的API(即Language Server Protocol和 Code Debugging Protocol),使得每⼀个语⾔都能得到更好的⽀持。
VSCode学习指南
1.VSCode有⼀套⾃⼰的快捷键,你可以通过学习快捷键来了解核⼼编辑器所⽀持的功能。同时,VSCode允许⾃定义快捷键,
使⽤户能更好的使⽤VSCode。VSCode对⿏标,多光标,搜索都有完备的⽀持,对⾃动补全,代码⽚段等都⼀应俱全。
2.学会使⽤⼯作台,⼯作区,VSCode中除了编辑器区域,还有其他很多功能,像是资源管理器。跨⽂件搜索、插件管理等,它
们就组成了统⼀的界⾯,就是⼯作台;这个⼯作台的设计代表了VSCode对⼯作流的选择。VSCode内置的软件版本管理,终端模拟器,调试器等,都能提⾼⼯作效率。
3.VSCode允许定制和开发插件,所以试着把⾃⼰的想法,来满⾜⾃⼰的需求,能更好的提升⾃⼰,了解VSCode;
4.关注每⽉的发布更新⽇志,关注VSCode官⽅博客;
通过以上⼏个步骤,能更好的使⽤好VSCode,提⾼⼯作效率。
总结:VSCode的定位是轻量级的代码编辑器,综合了Eclipse等许多优秀⼯具的优势,同时也解决了它们的弊端,VSCode在性能、语⾔⽀持、社区⽅⾯都很不错;
四.快速上⼿VSCode
安装与版本选择
VSCode有两个发布渠道,⼀个是常⽤的稳定版,每⽉发布⼀个主版本;另⼀个是insiders,每周⼀到周五早上6点发布,也是VSCode内部团队使⽤的版本,⽬的是为了更好的发现Bug。微软内部对这个做法还有个专门的名词:eat your own dog food(吃⾃⼰的狗粮)。
VSCode⽬前在全世界⼤概有⼀万五千名⽤户在使⽤insiders版本。不过刚接触VSCode,稳定版会相对适合。但是如果已经使⽤VSCode⼀段时间的话,可以试⼀试insiders。因为使⽤这个版本可以尽早⽤上最新的功能,⼀般VSCode的新功能会先在insiders上线,等运⾏⼀段时间后才会随着当⽉稳定版发布。改动较⼤的可能会运⾏两个⽉之后才会推向稳定版。
其次,⼀个新功能的添加往往是不成熟的,使⽤insiders可以第⼀时间再GitHub上反馈对新功能的看法及建议,甚⾄能为其提供代码。
下载安装VSCode:
初次使⽤VSCode
VSCode第⼀次启动的时候会显⽰⼀个‘欢迎使⽤’页,主要是为了⽅便快速打开⽂件,⽂件夹以及访问历史⽂件,更换主题⾊,更换快捷键等:
初次使⽤界⾯
这个界⾯有着很多你可能感兴趣的功能:
1.命令⾯板:
我们可以通过快捷键F1或者Ctrl+Shift+P(mac上的Cmd+Shift+P)键打开VSCode的命令⾯板。!
命令⾯板
VSCode的绝⼤部分命令都能从命令⾯板到,所以只要熟悉命令⾯板,就能不⽤⿏标,完全使⽤键盘来完成编码⼯作。
2.界⾯概览:
展⽰VSCode默认界⾯⾥的不同部件的位置,名称和快捷键。VSCode强调⽆⿏标操作,但是记快捷键就会成为很多新⼿的痛点,这个界⾯恰好能解决这个痛点。
界⾯概览
3.交互式演戏场:
打开这个界⾯,我们会看到很多的英⽂教程,它通过各种交互实例,展⽰了⼀些⾼级编辑代码功能的使⽤,每个功能都会有⼀个代码⽚段和编辑器能供我们使⽤。
交互式演戏场
五.VSCode快捷键
光标移动
1.option + ←:移动到单词最前⾯;
2.option + →:移动到单词最末尾;
3.option + ⽅向键:以单词为单位移动;
javascript高级语法
⽂本选择
基于单词,⾏,⽂档的光标操作加上个shift键,就可以移动光标的同时选择⽂本;
删除操作
删除当前选中⽂本内容(Windows:home+shift;macOS:cmd+left+shift)
3.option + delete :把当前单词光标前的字符删除;
4.option + Backspace :删除当前单词光标后的字符;
⾃定义快捷键
打开命令⾯板(F1或ctrl+shift+p)搜索‘打开键盘快捷⽅式’,就可以更换或者删除快捷键;
⾃定义快捷键
六.VSCode快捷键进阶
4.option + ‘上下键’:将当前⾏或者当前选中的⼏⾏代码再编辑器中上下移动;
5.option + shift +‘上下⽅向键’:向上向下复制当前⾏;
移动代码⾏,代码缩进发⽣改变
添加注释
2.option + shift + A :注释⼀整段代码;
格式化代码
1.option + shift + F :格式化代码;
七.⽂件、符号、代码之间的快速跳转
1.Ctrl + Tab(同时按住),继续按着Ctrl键,松开Tab键 :打开当前打开⽂件的列表,选择要打开⽂件,松开Ctrl就能打开对应⽂件;
2.Ctrl + P :打开最近打开⽂件列表,同时列表顶部出现搜索框,搜索⽂件名,回车(Enter),可以再当前窗⼝打开对应⽂件;使
⽤Cmd + Enter会在新的编辑器窗⼝打开这个⽂件。
3.Ctrl + g :⾏跳转,输⼊对应数字回车,可以跳转到当前⽂件的当前⾏。
4.Ctrl + p(输⼊⽂件名 + “:” + ⾏数):跳转到指定⽂件的指定⾏数。
5.Cmd + shift + O :调出当前⽂件的符号(函数名等),使⽤⽅向键或者搜索,回车,就能跳转到你想要的符号;如果输⼊“:”可
以对当前⽂件的所有符号进⾏分类;
6.Ctrl + T :打开多个⽂件,搜索多个⽂件中的符号;
7.F12:跳转到函数的定义处;Cmd + F12 :跳转到函数的实现位置;注:js中没有接⼝的概念,定义和实现是相同的,所以js中
的F12和Cmd + F12效果是⼀样的;
8.Shift + F12 :打开函数引⽤的预览(把光标放在函数或者类上,按Shift+F12可以打开⼀个引⽤列表和内嵌编辑器)
⼋.VSCode中的⿏标操作
1.在VSCode中,单击⿏标左键:把光标移动到响应的位置;双击⿏标左键:将当前光标下的单词选中;三击⿏标左键:选中当
前⾏代码;四次点击⿏标左键:选中整个⽂档。
2.⿏标左键单击⾏号:直接选中所在⾏;按住⿏标左键再⾏号上下移动:可以选中多⾏代码;
3.拖动选中的代码,按住⿏标左键,移动⿏标可以改变代码位置;如果想在拖动时复制⼀份代码,可以按住Ctrl键,操作结果就
能从原来的“剪切+复制”变成“复制+黏贴”。
4.VSCode中,如果⿏标拥有中键,只需要按下⿏标中键,然后对着⼀段⽂档拖出⼀个框,再框中的代码就被选中了,⽽且每⼀
⾏选中的代码,都有⼀个独⽴的光标。
5.悬停提⽰窗⼝:当⿏标移动到某些⽂件上之后,⼀会就会显⽰跟⿏标下⽂本相关的信息;如果⿏标放在某个函数上,按下Ctrl
时,则能再悬停提⽰的窗⼝上看到该函数的实现。
6.代码的跳转和链接:如果我们把⿏标放在函数上时,函数下⽅会出现⼀个下划线,然后当我们按下⿏标左键时,就能跳转到该
函数的定义处。
当我们再编写Markdown这样的⾮编程语⾔的⽂档时,通过Ctrl+⿏标左键能打开超级链接。