题外话：工欲善其事，必先利其器。有工具就用，别傻乎乎的用个记事本开发。
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+/：注释光标所在整行代码
- 持续更新中...
结束语：一花一世界，一木一浮生，诸君共勉！
网友评论