VSCODE:一个运行于 Mac OS X、Windows和 Linux 之上的,针对于编写现代 Web 和云应用的跨平台源代码编辑器。
注意:VSCODE适用于前端开发,仅仅是一个编辑器,并不是类似于Visual Studio 2015一样的IDE,是面向于前端开发的,这点不可混肴。
优点:
1、插件丰富,大大简化前端调试,可以直接在代码中进行断点,避免频繁切换谷歌控制台断点调试。谷歌调试配置:在浏览器快捷方式命令行中添加--remote-debugging-port=9222(注意最前面有空格),在VSCODE点击左侧如下图所示的图标,点击设置图标,打开launch.json,加入以下配置。运行选择Attach to Chrome,选择对应的网页,效果如图
,{
"type": "chrome",
"request": "attach",
"name": "Attach to Chrome",
"port": 9222,
"webRoot": "${workspaceFolder}"
}
2、方便的GIT管理,可以逐行查看代码的编辑者以及更改之前的上个版本的状态。查看单个文件的git记录以及实时与当前版本或者跨版本进行对比、还原等操作。不通过SourceTree也可以进行代码的拉取上传推送等常规操作。如图所示
3、代码统一格式化,通过格式化插件能够将代码按照统一的风格进行格式化,代码的可读性以及观感会大大提升,对于代码之间的括号会用不同颜色进行标注,能够快速区分代码块的区域,不会再因为括号打错地方导致报错。如图所示
4、友好的文件图标以及管理,在安装文件图标插件后能够简单的显示出不同文件夹不同文件的作用,使用者不再拘泥于通过看每个文件的后缀来选择,视觉化的方式将减轻切换文件所带来的疲劳感,如图所示
5、便捷的全局搜索以及文件打开停留,在观看别的代码文件时,代码窗体会处于暂留状态,会被自动覆盖,但需要编辑的文件会一直停留在编辑器中,减少关闭操作。参考别的代码再也不会麻烦啦!全局搜索功能快速便捷,由于VSCODE属于轻量级编辑器,所以启动速度以及占用电脑内存等方面相对于Visual Studio简化了很多,此条可能需要亲自体验才能够了解到多么实用,也是本人推荐VSCODE的相当重要的一个方面。如图所示
6、文件变动指示,文件有修改新增移除等操作时,该文件以及上级文件(夹)都会进行提示,能够快速定位到文件修改位置,这样就不会误修改到标准代码,直接定位修改区域,无文件的文件夹自动合并,减少浏览文件的视觉疲劳。如图所示
7、GIT提交记录按条件查询,能够按照作者、更改、文件等信息直接查找git记录,在查找问题以及修改记录时十分有用,查找的信息也十分详细,更多内容可以进行挖掘。如图所示
8、简单的插件同步安装,以上很多功能都基于插件安装,很多人觉得很麻烦,实际上,五分钟即可安装所有插件以及同步插件配置,大大简化门槛高度,通过同一个gist可以使所有人使用同一套完善的插件,不需要个人额外配置,并且自动同步自动上传,这里没图
9、快捷键自由配置,如果忍受够了Visual Studio的双重组合快捷键,可以来试试VSCODE,基本都基于两个键或者三个键组合,十分方便也容易记忆和使用
10、单词、语法、变量提示,VSCODE会根据JS标准语法、以及你输入过的变量自动提示,减少因为输错一个变量导致调试失败的尴尬局面,可根据个人需求安装额外插件,对英文单词进行校对。如图所示
11、便捷的CSS颜色设置,看图就行
12. 配置一键同步,以上描述了VSCODE等等优点,但大多数需要插件以及VSCODE本身进行配置,对许多人来说可能需要一定的时间进行配置与测试。现在通过setting sync插件可以将已经配置好的VSCODE插件以及选项进行下载(基于github账号)。
13. 待补充
VSCODE的优点还有很多很多,这里不一一列举,对于前端开发还有很多插件以及功能待开发,也是我强烈推荐的原因,如果觉得有帮助可以收藏该文章