技术文章 | Technical articles

web前端IDE开发工具哪个好?vscode安装及使用!

工欲善其事,必先利其器。在正式学习前端编程知识之前,我们要先熟悉web前端开发的武器,或者说工具,这个工具就是IDE。什么是IDE呢?IDE也就是集成开发环境。


web前端IDE有很多,包括sublime、atom、vscode等等。这里我们介绍使用vscode,因为vscode是微软开发的,比较轻量级,对电脑配置要求不高,不会造成你的电脑卡慢,功能强大而且免费。


1、vscode简介


vscode的全称是visual studio code,翻译过来就是可视化工作室代码编辑器,简称vs code,它来自微软公司。


2、下载vscode


访问网址code.visualstudio.com下载最新版本的vscode。如果没记住网址,也可以直接在百度搜索vscode关键词下载。


打开上面的网址之后,显示页面如下:


web前端开发工具vscode下载地址


点击“download for Windows”那个蓝色按钮,或者它旁边的向下的白色小箭头,可以选择适合你操作系统的版本进行下载。



vscode下载


3、vscode安装


下载好之后,点击安装就行,选择同意协议,选择自己想安装的磁盘,桌面快捷方式等选项,一步一步傻瓜式安装就好了。


安装好之后,在桌面上就会出现vscode的快捷方式图标,如下:


vscode安装


点击这个图标,打开vscode,打开之后会显示是英文的:


vscode英文界面


4、vscode配置中文


vscode因为是微软开发的,天生是英语界面,如果我们想把它里面的文字配置成中文,怎么做呢?需要安装一个插件。


在插件中心,搜索“Chinese”这个单词,安装相关的插件即可。


vscode的插件中心,在vscode软件打开后的界面最左边竖着排列的第5个图标。


vscode配置中文


点击这个图标(鼠标停在这个图标上,会显示英文Extensions)之后,就打开了插件中心,在搜索框里面可以搜索你想要的插件。


vscode配置中文


我们在搜索框里面输入Chinese,就会出现中文相关插件,我们选择第一个中文(简体),点击install,进行安装。


vscode配置中文插件


点击安装之后,右下角会显示下面一句话:


vscode配置中文


意思是:“为了使用中文简体版的vscode,需要重启vscode”。点击“Restart Now”之后呢,我们会发现vscode里面全都变成中文了。


vscode配置中文


5、vscode颜色主题


我们可以使用Light+这个主题,在“文件-首选项-颜色主题”中,进行更改。


vscode颜色主题


点击颜色主题之后,在下拉列表中选择Light+就可以了。当然vscode提供了很多种颜色主题,你也可以选择其他的自己喜欢的颜色主题。


vscode颜色主题


6、设置ctrl+鼠标滚轮缩放字体大小


用ctrl+鼠标滚轮缩放字体大小会比较方便,这需要我们进行相关的配置,如何配置呢?依次点击“文件-首选项-设置”。


vscode字体大小设置


在搜索框里面输入“滚动”2字,然后找到“按住ctrl键并滚动鼠标滚轮时对编辑器字体大小进行缩放”,把前面的对勾打上。


vscode字体大小设置


然后关闭设置,我们可以测试一下,我们点击“文件-新建文件”,然后在里面随便打点字,然后按住ctrl键,滚动鼠标滚轮,看看字体是否会缩放。


vscode字体大小设置


7、vscode中的快捷键设置


vscode当然也和我们常用的其他软件一样,里面有很多快捷键,使用快捷键能提高我们的开发效率。


和其他所有软件一样,在vscode中:


ctrl+c 复制


ctrl+v 粘贴


ctrl+s 保存


ctrl+z 撤销


ctrl+x 剪切


也就是说,在vscode中,我们可以选中我们编写的代码,然后使用以上快捷键进行复制粘贴等快捷操作。大家可以自行尝试。


8、sublime快捷键扩展插件


sublime是另一个非常著名的编辑器,sublime中的快捷键非常的经典,于是vscode可以集成sublime的快捷键,也就是说vscode和sublime可以互相合作,vscode能使用sublime里面的快捷键。


要在vscode中使用sublime的快捷键,就需要在vscode中安装sublime插件。我们在vscode的插件中心搜索sublime,安装插件即可。


我们还是点击vscode最左边的Extensions那个图标,打开插件扩展中心,输入sublime,在显示结果中选择第一个,点击install安装即可。


sublime快捷键扩展插件


在安装完了sublime快捷键扩展插件之后,我们的vcode就拥有了更多的快捷键:


ctrl+shift+d 复制光标所在的当前行


ctrl+shift+↑ 上移光标所在的当前行


ctrl+shift+↓ 下移光标所在的当前行


大家可以新建一个文件,随便输入一些字,用以上快捷键试试效果。这些快捷键非常有用而且高效。如果你想要在vscode中拥有以上3个快捷键,就必须安装sublime快捷键插件才行哦。


9、vscode多行编辑方法


按住鼠标滚轮,然后下拉,就可进行多行编辑。记住,是按住鼠标滚轮,而不是滚动鼠标滚轮。


按住鼠标滚轮下拉时,光标会跨越多行,此时你打一个字,就会在多行同时显示,你删除一个字,多行同时会删除,这就是所谓的多行编辑。大家可以试试。


vscode多行编辑方法

以上就是web前端IDE开发工具中vscode的安装及使用方法,平时要多熟悉它的一些功能,勤加练习,为了学习web前端开发踏出成功的一大步。

上一篇文章: web前端开发和全栈开发哪个好?
下一篇文章: 为什么web前端工程师的薪资越来越高?

最新发布 | 这里有最新的文章查看更多>>

爱创推荐 | 这里有推荐的文章查看更多>>