- 剑指大前端全栈工程师(全2册)
- 贾志杰 史广 赵东彦编著
- 447字
- 2024-12-28 11:22:28
1.4 Web前端开发工具
用于开发Web前端应用的工具有很多,如VS Code、WebStorm、Sublime Text、HBuilder、Dreamweaver等,如图1-6所示,可以根据使用习惯进行选择。
![](https://epubservercos.yuewen.com/43D7E8/31398373707833606/epubprivate/OEBPS/Images/Figure-P20_4939.jpg?sign=1739179386-fjTKa0qU6mx4CCJ1FQ2ptrY8qStoirOZ-0-aeb2df348a6d9c3d931f3d968d45480f)
图1-6 Web前端开发工具
本书使用的开发工具是VS Code,它是一款免费开源的现代化轻量级代码编辑器,使用方便快捷,功能强大,支持各种的文件格式,跨平台支持Windows、macOS及Linux。接下来就介绍VS Code的安装方法。
1.下载VS Code工具
VS Code官网网址为https://code.visualstudio.com/。
VS Code官方文档网址为https://code.visualstudio.com/docs。
可以在VS Code官网首页下载对应系统(支持Windows、Linux、macOS)的软件,如图1-7所示。
![](https://epubservercos.yuewen.com/43D7E8/31398373707833606/epubprivate/OEBPS/Images/Figure-P20_4943.jpg?sign=1739179386-H5KpMKJDd8EPiWoxVz0WZzcscX9CgeXJ-0-8162e78995075e3df762d36b0fce0ce5)
图1-7 VS Code官网
也可以打开下载页面https://code.visualstudio.com/download下载想要的格式包,如图1-8所示。
![](https://epubservercos.yuewen.com/43D7E8/31398373707833606/epubprivate/OEBPS/Images/Figure-P21_4950.jpg?sign=1739179386-cQQQDyjq8pfftDrTaF9JCTsLaWK4MtoE-0-811223138ba7d721b2f8ca091c0544bc)
图1-8 VS Code版本
2.VS Code安装
本书以Windows为例,找到已下载的VS Code安装文件,双击“运行”,如图1-9所示。
![](https://epubservercos.yuewen.com/43D7E8/31398373707833606/epubprivate/OEBPS/Images/Figure-P21_4954.jpg?sign=1739179386-42ftXcatMI4JbbFD4J4ZIpgTiHAit71S-0-0ef0fe6a725c71e46ffdfbd6e90ff044)
图1-9 VS Code安装文件
VS Code安装很简单,一直单击“下一步”按钮即可。
3.安装汉化包
VS Code安装汉化包很简单,打开VS Code,单击“安装扩展”,在搜索框输入Chinese,然后单击Install按钮,如图1-10所示。
![](https://epubservercos.yuewen.com/43D7E8/31398373707833606/epubprivate/OEBPS/Images/Figure-P21_4958.jpg?sign=1739179386-q3wK3HWCnkQ7bDlDNFYnNUm4u3KDRn45-0-5edf2ab8f696689332296434d4658c50)
图1-10 汉化
VS Code的扩展功能非常强大,我们可以找到开发所需的工具,当然也可以自己开发。
4.界面说明
以下是VS Code启动后的界面,简单说明如图1-11所示。
![](https://epubservercos.yuewen.com/43D7E8/31398373707833606/epubprivate/OEBPS/Images/Figure-P22_4965.jpg?sign=1739179386-URNxXH7veUUWDIgIBQ3ICn3ATvb1bUx6-0-ba3b16412a33670aa44e7648afcdc43c)
图1-11 VS Code启动后的界面