代码编辑器

VScode

我们不可能一直用记事本来写代码，它具备的功能太单一，不能满足开发要求

常见的代码编辑器，哪一款更好用呢

在综合免费、轻量、功能考量，推荐微软开发的VSCode

官网：https://code.visualstudio.com/

VSCode有丰富且优秀的插件，免费届的天花板

说明

插件类似小霸王学习机，玩什么游戏插什么卡

如果有喜欢和熟悉的编辑器也可以用自己的，只是个编辑器，不用过于纠结

安装

我们在官网下载后安装，只要别装C盘

附加任务中，倒数第二个不要勾

说明

虽然它能关联文件，但是会覆盖你其他已经选好的关联程序

避免出现这类问题，取消就行

安装成功，打开即可

使用介绍

注意

安装好，可以先去装一个中文汉化插件

这个启动也不喜欢，可以取消下面的勾，下次启动就不会出现了

打开方式可以通过，打开文件夹，但是我更推荐后者

鼠标对着项目文件夹右键-通过vs code打开

大纲 将代码结构进行一个呈现，不想显示可以点上面的...隐藏

时间线 对文件修改做一个追踪，能看见历史修改记录，不想显示可以点上面的...隐藏

字体觉得太小，可以在左下角小齿轮-设置-字体

vscode的便捷在于，能快速识别我们要输入的代码比如：<title>

不用我们写结尾标签，自动填充

页面上方是斜字体，表示文件会被下次点击替换，双击就可以了

插件

VScode分为三个区：导航区、菜单区、工作区

导航区有5个：资源管理器、搜索、版本控制、debug调试、拓展管理器(插件商店)

说明

资源管理器：查看管理文件

搜索：搜索整个项目中的某一个代码

版本控制和 debug调试会在以后的课程中用到，现在不讲

拓展管理器：我们的插件就都在里面下载安装

汉化插件

中文汉化插件搜：Chinese

安装好后，点击右下角的弹窗 Restart 重启

主题插件

图标主题推荐 vscode-icons ，然后安装

说明

颜色主题可以自己搜

这样我们就换好了

说明

小齿轮-设置-文件图标主题，可以改回

不想用可以禁用或者卸载，在上方小漏斗可以查看已安装的插件

在线服务器插件

插件商店搜：Live Server

安装好，我们在代码编写区右键 open with live server

注意

必须要在文件夹中打开某个文件，直接打开单文件服务器不工作

这时候，浏览器自动打开了本地端口的网页

仔细看路径是不一样的，一个是文件路径，一个是服务器路径

它是将电脑作为一个服务器，生成了一个本地IP5500端口的链接

优势是可以热更新，边写变更新，在无需手动刷新网页

且更符合项目上线的环境，推荐使用此方式

还有些人喜欢自动保存的，可以在设置中搜：自动保存

说明

个人建议直接 Ctrl+S 手动保存，这是个好习惯！

afterDelay：等待一定时间后保存，时间需自行，单位为毫秒，1000ms=1s

onFocusChange：焦点改变保存，限页签以外

onWindowChange：窗口切换保存，限vscode以外