购买
下载掌阅APP,畅读海量书库
立即打开
畅读海量书库
扫码下载掌阅APP

1.3.1 代码编辑工具—VSCode

JavaScript程序可以使用任何一种文本编辑器进行编辑,例如VSCode(Visual Studio Code)、WebStorm、HBuilder、Sublime等软件。VSCode是一款免费开源的现代化轻量级代码编辑器,支持主流开发语言的语法高亮、智能代码补全、自定义热键、括号匹配、代码片段等特性,支持插件扩展,并针对网页开发和云端应用开发做了优化。本书使用VSCode作为代码编辑工具。VSCode软件界面如图1-6所示。

图1-6 VSCode软件界面

1.VSCode的安装

登录VSCode官网首页,选择与自己计算机系统对应的版本下载,如图1-7所示。

图1-7 VSCode官网下载界面

双击下载的文件,按照提示一步一步地安装即可,非常方便。

2.VSCode插件

VSCode插件是VSCode的一种扩展功能,它利用VSCode开放的一些API进行开发,以解决开发中的一些问题,提高生产效率。这些插件可以丰富VSCode的功能,满足用户不同的需求。例如官网下载的VSCode默认是英文语言,可以选择一款中文汉化插件进行汉化,步骤如下:打开VSCode,在左侧边栏中单击“扩展”图标按钮,在搜索框输入“Chinese”,然后单击Install按钮就可以完成插件的安装,如图1-8所示。

图1-8 安装VSCode插件

以下是VSCode中常见的一些插件:

●Open in Browser:用于快速在浏览器中打开网页文件,查看其渲染效果。

●ESLint:用于JavaScript代码的语法检查和风格检查,它可以帮助开发人员遵循一致的编码规范,提高代码的可读性和可维护性。

●Live Server:提供一个本地开发服务器,以便实时预览和调试网页应用程序。

●TODO Highlights:用于帮助开发人员识别和管理代码中的待办事项。

●VSCode Icons:为文件和文件夹添加图标,以增强编辑器的可视化效果和可识别性。

在使用插件时,可以通过VSCode的插件市场进行搜索和安装。同时,也需要注意插件的来源和可靠性,避免安装恶意插件对计算机和个人信息造成威胁。

3.新建HTML文件

使用VSCode建立HTML文件,可以选择“文件”菜单中的“新建文本文件”命令,这时会创建一个“Untitled-1”纯文本文件,它还不是HTML类型的文件。将它保存到计算机上,选择“文件”菜单中的“保存”命令,此时会弹出一个对话框,选择一个文件夹来保存该文件,并将该文件命名为“1.html”。此时VSCode会根据文件的扩展名将该文件识别为HTML类型的文件,并且“Untitle-1”也变成了“1.html”,如图1-9所示。

图1-9 新建HTML文件

创建空白文件后,输入“html”并选择“html:5”,或输入“!”,可以快速生成HTML代码。自动生成的代码如图1-10所示。

图1-10 自动生成代码

在浏览器中查看页面渲染效果,可以单击菜单中的“调试”命令,或在右键菜单中选择“Open in Browser”选项。 9YeH/rzEtsyI97JlVp7IEtRicrxEgnX5rxFXrz4OwXKJDpvbbgFfH5uFJKzu8drs

点击中间区域
呼出菜单
上一章
目录
下一章
×