对于前端开发者来说,一个好的开发工具往往能够事半功倍。比较常见的网页开发工具有Dreamweaver、Sublime、WebStorm、HBuilder、VSCode。看到这么多开发工具,是不是脑袋都要大了?不要担心,我们只需要掌握一款实用性最高的工具即可。而且这些开发工具基本使用方式类似,掌握一款其他的即可触类旁通。
在开始网页开发工具VSCode安装之前,先给大家推荐几套零基础教程看看。
Html5+Css3+移动Web_前端入门教程,Web前端教程零基础前端视频教程哔哩哔哩_bilibiliwww.bilibili.com/video/BV1pE411q7FU

黑马程序员Web前端HTML5+CSS3+移动Web前端全套,零基础自学前端必备教程_哔哩哔哩_bilibiliwww.bilibili.com/video/BV1cf4y1j7hL

黑马程序员JavaScript全套教程,Web前端必学的JS教程,零基础入门JavaScript_哔哩哔哩_bilibiliwww.bilibili.com/video/BV1ux411d75J

黑马程序员web前端基础教程4天从零玩转jQuery哔哩哔哩_bilibiliwww.bilibili.com/video/BV1pt411H7D6

下面我们一起来看看网页开发工具VSCode小白级安装步骤吧!
VSCode安装步骤及基本使用方法介绍,需要掌握安装和卸载VSCode的插件,知道怎么设置VSCode的颜色主题和字体大小。
1、VSCode的基本介绍
全拼是VisualStudioCode(简称VSCode)是由微软研发的一款免费、开源的跨平台代码编辑器,目前是前端(网页)开发使用最多的一款软件开发工具。
2、VSCode的安装
(1)选择对应的安装包进行下载:

(2)根据下载的安装包双击进行安装即可,当然为了更好的使用VSCode还可以安装对应的插件。
3、VSCode的插件安装
(1)汉化插件安装平台选择平台选择


(2)openinbrowser插件安装平台选择注意:如果在VSCode打开的html文档中右击没有出现openinbrowser类型的选项,需要把当前打开的文件关掉,重新打开这个文件就好了。

4、VSCode的插件卸载
点击对应安装的插件,然后再点击卸载按钮即可。
5、VSCode的使用
(1)打开文件夹创建文件平台选择平台选择


(2)快速创建html文档的基本结构平台选择

(3)右击在浏览器打开html文档平台选择

6、设置字体大小


7、设置颜色主题


8、设置默认浏览器[可选]
可以根据自己的需要设置默认使用的浏览器

小结:VSCode是由微软研发的一款免费、开源的跨平台代码编辑器;通过资源管理器打开文件夹创建HTML文件,编写HTML代码;可以根据需要安装对应的插件;可以设置字体大小和颜色主题。
网友评论