HTML5开发环境搭建 VSCODE安装与配置

r囧r小猫 2024-05-31 05:48 150阅读 0赞

**VSCODE** **安装步骤**

**Vscode****是一款轻量级html编码工具。**

1.  ## 下载、安装、启动 ##

*  打开下载网页

[https://code.visualstudio.com/updates/v1\_48][https_code.visualstudio.com_updates_v1_48]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2Nhb2hvbmd4aW5n_size_16_color_FFFFFF_t_70][]

*  根据操作系统选择相应安装程序

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2Nhb2hvbmd4aW5n_size_16_color_FFFFFF_t_70 1][]

*  解压zip文件

解压到D盘根目录下（也可是其他盘，建议在根目录下方便查找）

*  启动程序

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2Nhb2hvbmd4aW5n_size_16_color_FFFFFF_t_70 2][]

如上图所示，到解压目录下，双击code.exe启动程序。打开界面如下

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2Nhb2hvbmd4aW5n_size_16_color_FFFFFF_t_70 3][]

##  **2.配置** ##

*  ### 界面字体大小设置 ###

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2Nhb2hvbmd4aW5n_size_16_color_FFFFFF_t_70 4][]

*  ### 界面汉化插件安装 ###

点击【install】，安装完成后重启。下面就是汉化之后的界面

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2Nhb2hvbmd4aW5n_size_16_color_FFFFFF_t_70 5][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2Nhb2hvbmd4aW5n_size_16_color_FFFFFF_t_70 6][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2Nhb2hvbmd4aW5n_size_16_color_FFFFFF_t_70 7][]

*  View in browser 插件安装

该插件可以帮助我们在vscode中启动浏览器查看网页

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2Nhb2hvbmd4aW5n_size_16_color_FFFFFF_t_70 8][]

在插件商店中选择一个评分较高的插件进行安装

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2Nhb2hvbmd4aW5n_size_16_color_FFFFFF_t_70 9][]![20200916234210682.png][]

安装插件前 安装插件后

*  ### View in browser 默认浏览器的设置 ###

1.  点击菜单 文件 -> 首选项 -> 设置

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2Nhb2hvbmd4aW5n_size_16_color_FFFFFF_t_70 10][]

2.在搜索框中输入 “view in browser”

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2Nhb2hvbmd4aW5n_size_16_color_FFFFFF_t_70 11][]

*  ### 界面风格设置 ###

点击菜单 文件->首选项->颜色主题

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2Nhb2hvbmd4aW5n_size_16_color_FFFFFF_t_70 12][]

点击你喜欢的主题

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2Nhb2hvbmd4aW5n_size_16_color_FFFFFF_t_70 13][]

*  ## 使用 ##
    
    1.  打开工作文件夹

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2Nhb2hvbmd4aW5n_size_16_color_FFFFFF_t_70 14][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2Nhb2hvbmd4aW5n_size_16_color_FFFFFF_t_70 15][]

*  ### 创建网页文件 ###

![20200916234514899.png][]

![20200916234541496.png][]

在文件中输入“！”后点击回车键，就可以创建一个简单html页面了（注意一定要是英文输入法情况下）

![20200916234549243.png][]

生成的基本网页如下所示

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2Nhb2hvbmd4aW5n_size_16_color_FFFFFF_t_70 16][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2Nhb2hvbmd4aW5n_size_16_color_FFFFFF_t_70 17][]

*  ### 打开网页 ###

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2Nhb2hvbmd4aW5n_size_16_color_FFFFFF_t_70 18][]

*  ### 修改和刷新页面 ###

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2Nhb2hvbmd4aW5n_size_16_color_FFFFFF_t_70 19][]

[https_code.visualstudio.com_updates_v1_48]: https://code.visualstudio.com/updates/v1_48
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2Nhb2hvbmd4aW5n_size_16_color_FFFFFF_t_70]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/31/8fcea9d0f8da4444a037a0eecf880570.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2Nhb2hvbmd4aW5n_size_16_color_FFFFFF_t_70 1]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/31/d5506dad931f450b979c0cd30f9e5ee5.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2Nhb2hvbmd4aW5n_size_16_color_FFFFFF_t_70 2]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/31/66344812530c40ea897f08d1f141ef40.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2Nhb2hvbmd4aW5n_size_16_color_FFFFFF_t_70 3]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/31/9c76a5b7cc114ce9af18b7471530f1e2.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2Nhb2hvbmd4aW5n_size_16_color_FFFFFF_t_70 4]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/31/4bd223f265394fec94362e571e1d70b6.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2Nhb2hvbmd4aW5n_size_16_color_FFFFFF_t_70 5]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/31/aaa4e23cb8204b2c854ca9d0e962e691.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2Nhb2hvbmd4aW5n_size_16_color_FFFFFF_t_70 6]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/31/7bba62f06dc34e75bf8e93d129169ed1.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2Nhb2hvbmd4aW5n_size_16_color_FFFFFF_t_70 7]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/31/34d06bac85a64e3e8e960e4a72fa516a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2Nhb2hvbmd4aW5n_size_16_color_FFFFFF_t_70 8]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/31/b966e4030e9d4c42af3652dacfc9444c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2Nhb2hvbmd4aW5n_size_16_color_FFFFFF_t_70 9]: https://img-blog.csdnimg.cn/20200916234147769.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2Nhb2hvbmd4aW5n,size_16,color_FFFFFF,t_70
[20200916234210682.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/31/786288310eac4570944248d36bde5cec.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2Nhb2hvbmd4aW5n_size_16_color_FFFFFF_t_70 10]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/31/5d23ead0c14a4277bada595e6708b24e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2Nhb2hvbmd4aW5n_size_16_color_FFFFFF_t_70 11]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/31/e6559f79d7b3496fb6f110dab58a71bb.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2Nhb2hvbmd4aW5n_size_16_color_FFFFFF_t_70 12]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/31/c3e3782e10c040ec99af66da74a4e9c2.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2Nhb2hvbmd4aW5n_size_16_color_FFFFFF_t_70 13]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/31/69c5653d878a4293965950e9e94a4957.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2Nhb2hvbmd4aW5n_size_16_color_FFFFFF_t_70 14]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/31/c12ac151093e47c1b2e2a2fab3def3ae.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2Nhb2hvbmd4aW5n_size_16_color_FFFFFF_t_70 15]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/31/49699a3f6e7a4062933117d96a85a3ef.png
[20200916234514899.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/31/7e8e0e32eea0409d9e7b497632d3b38c.png
[20200916234541496.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/31/c838e19ada694ab69cb7eb376519d66a.png
[20200916234549243.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/31/39d07deef1ca455f8546cd3ae06ab082.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2Nhb2hvbmd4aW5n_size_16_color_FFFFFF_t_70 16]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/31/e4c2070051374d0fbc5a0ac2890ad231.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2Nhb2hvbmd4aW5n_size_16_color_FFFFFF_t_70 17]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/31/c81af29b9d744eb8ae191a5c79c7a313.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2Nhb2hvbmd4aW5n_size_16_color_FFFFFF_t_70 18]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/31/2f573721ef5646eca16ad03495fc386b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2Nhb2hvbmd4aW5n_size_16_color_FFFFFF_t_70 19]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/31/de66f7ce8b7e49e78078af94f851fb3a.png