首页>前端资源>工具

推荐Visual Studio Code(vscode)编辑器,集大成于一身

上完了设计课,又进入前端第一阶段课程,以前用的DW,想着更新成最新版的CC 2018,毕竟新版的flex布局,ES6支持,bootstrap支持还是挺诱人的。

可惜下载了破解版始终安装不上,烦人的很,又想起了上次没有安装成功的vscode,听说很好用,微软的良心之作,想着都要折腾,还不如折腾这个vscode呢。

安装了几次vscode,每次一打开软件就报错,说the window is no longer responding窗口无响应,问了几个朋友,都说没有碰到过这种情况,于是干脆重装系统,换了一个新的win7系统,安装后软件立马跑起来了。看来重装系统还真不是一个锅。

邪魅一笑.png

软件体积小,开源免费,自主性强,可以根据需要自行配置语言和插件,运行流畅快捷,比起每次找DW的破解版,和动不动1个G以上的体量,还是觉得vscode有很多值得安利的点。

1、界面很好看,可以自选主题。

我试了好几个,最后还是觉得默认的深黑就挺好。

vscode界面.png

2、可以导入你以前常用的软件的快捷键,比如sublime、Atom等的。

常用快捷键:

打开命令行:ctrl+shift+P

打开文件:ctrl+P,利用↓箭头和→箭头,可以打开多个文件。

全部保存文件:ctrl+K S(按了ctrl+K后再按一下S)

关闭文件:ctrl+W

关闭全部文件:ctrl+K W

切换行注释:ctrl+/

切换块注释:shift+Alt+A

向上复制行:shift+Alt+↑

向下复制行:shift+Alt+↓

移动到上行:Alt+↑

移动到下行:Alt+↓

向下选择行:shift+↓

向上选择行:shift+↑

扩大选择范围:shift+Alt+→

逐步扩大选择范围:shift+→

缩小选择范围:shift+Alt+←

逐步缩小选择范围:shift+←

展开代码:ctrl+shift+]

展开全部代码:ctrl+K ctrl+J

折叠代码:ctrl+shift+[

折叠全部代码:ctrl+K ctrl+0

折叠块注释:ctrl+K ctrl+/

打开快捷键文件:ctrl+K S

感觉和以前的DW的快捷键还是差别有点大。

3、根据自己的需要安装语言或者框架。

想要C++,JavaScript,都可以自己安装,想要Vue框架,自己安装,所以可以随心所欲啊。这也是软件本身轻便,但是不要贪多,安装用不上的语言造成体积臃肿了。

安装框架.png

4、常用插件安装

刚开始用的时候,如何把html发布到浏览器中都不知道,百度了才明白需要安装一些常用插件。

比如第一个就是:Open HTML in Default Browser

这样点击右键的时候就有“在浏览器中打开”的命令了。

常用插件还有:

Chinese (Simplified) Language Pack for Visual Studio Code : 本地汉化成简体中文版,中国人的福音啊

Auto Rename Tag :改开始标签,自动修改结束标签

CSS Peek :  选择id,class名称,可以转到对应的样式,只对外部样式表有用

minify:压缩css,js,html成min文件

Color Info:可以显示颜色的各种值,比如RGB,HSB,十六进制等信息。

应用商店就是一个宝库,有好多各种插件供你选择,刚开始用,以后再慢慢挖掘。

5、Emmet缩写

通过设置CSS形式的能够动态被解析的表达式,根据你所输入的缩写来得到相应的内容。

Emmet是很成熟的并且非常适用于编写HTML/XML 和 CSS 代码的前端开发人员。

以前用DW的时候,要用此插件,需要安装,而且Adobe的产品安装插件,有一个专门的extension manager软件来管理各个软件的插件,比如DW,PS,反正麻烦的一匹。

而vscode是默认内置了该插件的,是不是太贴心。

Emmet插件到底有啥好呢,比如你输入!,再按一下tab,html文档标准结构就输入了。

输入div.box,就显示<div class="box"></div>,输入ul>li*3,就显示有3个li的ul列表。

具体文档可以看官方的:

https://docs.emmet.io/

如果看不懂英文版的,还有翻译过来的中文版:

https://www.w3cplus.com/tools/emmet-cheat-sheet.html

我也是新用,还有好多功能有待发掘中。不过从它的开源和对各种编译语言的支持来看,比如对php,java等的支持,就说明微软已经不再那么垄断和封闭,这是一个好事情。

点赞


3
保存到:

相关文章

Top