对于前端开发者来说,一个好的开发工具往往能够事半功倍。比较常见的网页开发工具有Dreamweaver、Sublime、WebStorm、HBuilder、VSCode。看到这么多开发工具,是不是脑袋都要大了?不要担心,我们只需要掌握一款实用性最高的工具即可。而且这些开发工具基本使用方式类似,掌握一款其他的即可触类旁通。
在开始网页开发工具VSCode安装之前,先给大家推荐几套零基础教程看看。
Html5+Css3+移动Web_前端入门教程,Web前端教程零基础前端视频教程哔哩哔哩_bilibiliwww.bilibili.com/video/BV1pE411q7FU
![](https://img.haomeiwen.com/i19834796/a02f226c54f1b9b9.jpg)
黑马程序员Web前端HTML5+CSS3+移动Web前端全套,零基础自学前端必备教程_哔哩哔哩_bilibiliwww.bilibili.com/video/BV1cf4y1j7hL
![](https://img.haomeiwen.com/i19834796/4744e120e3161b42.jpg)
黑马程序员JavaScript全套教程,Web前端必学的JS教程,零基础入门JavaScript_哔哩哔哩_bilibiliwww.bilibili.com/video/BV1ux411d75J
![](https://img.haomeiwen.com/i19834796/15c9db58151df081.jpg)
黑马程序员web前端基础教程4天从零玩转jQuery哔哩哔哩_bilibiliwww.bilibili.com/video/BV1pt411H7D6
![](https://img.haomeiwen.com/i19834796/3de969d70ea93bfb.jpg)
下面我们一起来看看网页开发工具VSCode小白级安装步骤吧!
VSCode安装步骤及基本使用方法介绍,需要掌握安装和卸载VSCode的插件,知道怎么设置VSCode的颜色主题和字体大小。
1、VSCode的基本介绍
全拼是VisualStudioCode(简称VSCode)是由微软研发的一款免费、开源的跨平台代码编辑器,目前是前端(网页)开发使用最多的一款软件开发工具。
2、VSCode的安装
(1)选择对应的安装包进行下载:
![](https://img.haomeiwen.com/i19834796/654674efdc8fefad.png)
(2)根据下载的安装包双击进行安装即可,当然为了更好的使用VSCode还可以安装对应的插件。
3、VSCode的插件安装
(1)汉化插件安装平台选择平台选择
![](https://img.haomeiwen.com/i19834796/8ede303ceb4b2a3b.png)
![](https://img.haomeiwen.com/i19834796/7a4679b0fed074e2.png)
(2)openinbrowser插件安装平台选择注意:如果在VSCode打开的html文档中右击没有出现openinbrowser类型的选项,需要把当前打开的文件关掉,重新打开这个文件就好了。
![](https://img.haomeiwen.com/i19834796/80cc82b470384e7a.png)
4、VSCode的插件卸载
点击对应安装的插件,然后再点击卸载按钮即可。
5、VSCode的使用
(1)打开文件夹创建文件平台选择平台选择
![](https://img.haomeiwen.com/i19834796/a807f27996aa527e.png)
![](https://img.haomeiwen.com/i19834796/a6a1f2e5c9a64af4.png)
(2)快速创建html文档的基本结构平台选择
![](https://img.haomeiwen.com/i19834796/dcbc02976d883bbf.png)
(3)右击在浏览器打开html文档平台选择
![](https://img.haomeiwen.com/i19834796/a5a979f3ab4c6871.png)
6、设置字体大小
![](https://img.haomeiwen.com/i19834796/940edc14c0422dcc.png)
![](https://img.haomeiwen.com/i19834796/1819ed2e710c52dc.png)
7、设置颜色主题
![](https://img.haomeiwen.com/i19834796/7eb9acfbde79c32d.png)
![](https://img.haomeiwen.com/i19834796/97a3927d4ac2c0c3.png)
8、设置默认浏览器[可选]
可以根据自己的需要设置默认使用的浏览器
![](https://img.haomeiwen.com/i19834796/693e8945cc034470.png)
小结:VSCode是由微软研发的一款免费、开源的跨平台代码编辑器;通过资源管理器打开文件夹创建HTML文件,编写HTML代码;可以根据需要安装对应的插件;可以设置字体大小和颜色主题。
网友评论