1-1-2【HTML基础】0基础前端开发，VS Code的使用

题外话：工欲善其事，必先利其器。有工具就用，别傻乎乎的用个记事本开发。

---

1.为什么要用开发工具？

• 经常在抖音看见，记事本改个后缀就能运行是不是觉得很高大上？实际工作中那就是扯淡！理由如下。
• 开发工具可以：自动补全代码、代码颜色区分、安装各种辅助插件、方便调试找bug等n多优点。
• 记事本可以：装x。

2.前端开发常用开发工具

• Visual Studio Code

• Sublime text3

• WebStorm

• 根据个人喜好选择开发工具即可，笔者喜欢用VS Code，故本篇文章着重介绍VS Code。

3.VS Code的安装及配置

• 从官网下载VS Code安装包
  https://code.visualstudio.com/Download
• 安装完毕后，打开VS Code

• 使用快捷键Ctrl+Shift+p，出现搜索栏，输入language，并点击如图位置

• 出现语言选择框，点击install addtional languages...

• 左侧出现插件搜索栏，输入chinese，点击简体中文栏目中的install

• 重复步骤3，在语言选择栏中，选择zh-cn，重启软件，语言设置完毕。

4.好用插件推荐

在VS Code中，有非常多免费且功能强大的插件，安装他们会让你的开发工作事半功倍！

• 使用快捷键Ctrl+Shift+x，打开插件商店

• Auto Rename Tag插件
  在更改HTML双标签时，该插件只需要更改一个标签，另一个标签自动更改。（学完HTML就明白了）

• Open In Browser插件
  在代码编写过程中，当你希望在浏览器中查看效果时，只需要使用快捷键Alt+b，就能自动用浏览器打开当前网页。

• 持续更新中...

5.创建一个HTML文件

• 点击菜单栏“文件” => "打开"

• 在弹窗中，选择一个文件夹，打开

• 在左侧资源管器中，点击新建图标

• 创建一个后缀名为.html的文件

• 完成

6.常用快捷键

愣着干嘛？去实际操作一下啊！

• ! + tab ：自动生成HTML文件的基本格式

• 标签名*n + tab：自动生成n个相同的标签

• 标签名$*n + tab：自动生成标签名1-标签名n的标签

• Ctrl+backspace：删除光标所在整行代码
• 按住鼠标滚轮选择代码：同列选择

• Ctrl+Enter：在光标处直接换行，且不会影响光标后的代码
• Ctrl+/：注释光标所在整行代码
• 持续更新中...

---

结束语：一花一世界，一木一浮生，诸君共勉！