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