前端开发利器VSCODE推荐

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也可以进行代码的拉取上传推送等常规操作。如图所示

Git对比

3、代码统一格式化,通过格式化插件能够将代码按照统一的风格进行格式化,代码的可读性以及观感会大大提升,对于代码之间的括号会用不同颜色进行标注,能够快速区分代码块的区域,不会再因为括号打错地方导致报错。如图所示

代码格式

4、友好的文件图标以及管理,在安装文件图标插件后能够简单的显示出不同文件夹不同文件的作用,使用者不再拘泥于通过看每个文件的后缀来选择,视觉化的方式将减轻切换文件所带来的疲劳感,如图所示

文件图标

5、便捷的全局搜索以及文件打开停留,在观看别的代码文件时,代码窗体会处于暂留状态,会被自动覆盖,但需要编辑的文件会一直停留在编辑器中,减少关闭操作。参考别的代码再也不会麻烦啦!全局搜索功能快速便捷,由于VSCODE属于轻量级编辑器,所以启动速度以及占用电脑内存等方面相对于Visual Studio简化了很多,此条可能需要亲自体验才能够了解到多么实用,也是本人推荐VSCODE的相当重要的一个方面。如图所示

窗体停留

6、文件变动指示,文件有修改新增移除等操作时,该文件以及上级文件(夹)都会进行提示,能够快速定位到文件修改位置,这样就不会误修改到标准代码,直接定位修改区域,无文件的文件夹自动合并,减少浏览文件的视觉疲劳。如图所示

修改提示

7、GIT提交记录按条件查询,能够按照作者、更改、文件等信息直接查找git记录,在查找问题以及修改记录时十分有用,查找的信息也十分详细,更多内容可以进行挖掘。如图所示

Git信息

8、简单的插件同步安装,以上很多功能都基于插件安装,很多人觉得很麻烦,实际上,五分钟即可安装所有插件以及同步插件配置,大大简化门槛高度,通过同一个gist可以使所有人使用同一套完善的插件,不需要个人额外配置,并且自动同步自动上传,这里没图

9、快捷键自由配置,如果忍受够了Visual Studio的双重组合快捷键,可以来试试VSCODE,基本都基于两个键或者三个键组合,十分方便也容易记忆和使用

10、单词、语法、变量提示,VSCODE会根据JS标准语法、以及你输入过的变量自动提示,减少因为输错一个变量导致调试失败的尴尬局面,可根据个人需求安装额外插件,对英文单词进行校对。如图所示

单词校验
变量校验

11、便捷的CSS颜色设置,看图就行

CSS颜色查看

12. 配置一键同步,以上描述了VSCODE等等优点,但大多数需要插件以及VSCODE本身进行配置,对许多人来说可能需要一定的时间进行配置与测试。现在通过setting sync插件可以将已经配置好的VSCODE插件以及选项进行下载(基于github账号)。

13. 待补充

VSCODE的优点还有很多很多,这里不一一列举,对于前端开发还有很多插件以及功能待开发,也是我强烈推荐的原因,如果觉得有帮助可以收藏该文章

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 202,529评论 5 475
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,015评论 2 379
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 149,409评论 0 335
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,385评论 1 273
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,387评论 5 364
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,466评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,880评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,528评论 0 256
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,727评论 1 295
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,528评论 2 319
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,602评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,302评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,873评论 3 306
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,890评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,132评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,777评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,310评论 2 342