一、前言
前端开发编译器有很多，例如：WebStorm、VS Code、HBuilder X、Sublime Text等等。在这里就不一一介绍了，这里主要讲解VS Code和HBuilder X 编译器。
二、VS Code
Visual Studio Code (简称 VS Code) 是一款免费开源的现代化轻量级代码编辑器，支持几乎所有主流的开发语言的语法高亮、智能代码补全、自定义快捷键、有着强大的插件扩展；通过插件扩展可以大大提升开发效率，还有丰富的主题插件使你的编辑器更加酷炫。很多人都说插件安装过多会卡，这个不必担心反正我目前没有感受到卡顿。
2.1 下载
官网地址：https://code.visualstudio.com/
下载地址： https://az764295.vo.msecnd.net/stable/e2816fe719a4026ffa1ee0189dc89bdfdbafb164/VSCodeUserSetup-x64-1.75.0.exe
注意：从官网下载会发现下载缓慢，这是因为获取的是国外资源服务器的安装包；
解决方案： 将下载地址中的 az764295.vo.msecnd.net 更换为 vscode.cdn.azure.cn 使用国内的镜像服务器加速
2.2 安装
安装这里没有太多需要注意的地方，选择常用的盘符安装即可，也可以傻瓜式安装；
2.4 基本功能介绍
2.4 常用插件推荐
- Chinese 中文插件包
- Error Gutters 报错提示
- Git History git提交历史
- GitLens — Git supercharged 每一行修改时间
- Auto Rename Tag 同步修改标签名
- ESLint 代码审查
注意：更多插件下载推荐连接
2.5 常用快捷键
点击文件 --> 首选项–> 键盘快捷方式便可进入看到 VS Code提供的快捷键。我们也可以搜索和自定义所有快捷键。下面介绍常用快捷键：
| 快捷键 | 功能 |
|---|---|
| Ctrl+B | 切换侧栏可见性★★★ |
| ctrl + f | 查找★★★ |
| ctrl + shift + f | 全局查找★★★ |
| ctrl + h | 替换★★★ |
| ctrl + d | 选择相同的单词 |
| ctrl + g | 快速定位到某一行 |
| Ctrl + [ | 增加缩进 |
| Ctrl + ] | 减少缩进 |
| Ctrl + ←/→ | 光标定位到单词首/单词尾 |
| ctrl + + / - | 放大缩小整个编辑器界面★★★ |
| Ctrl + Shift+` | 创建新终端★★★ |
| Ctrl + Backspace | 删除上一个单词 |
| ctrl + Alt + ↑/↓ | 添加多个光标 |
| Ctrl + / | 单行注释★★★ |
| Ctrl+Shift+W | 关闭窗口/实例★★★ |
| Ctrl+Enter | 在下面插入行★★★ |
| Shift + Alt + F | 格式化文档★★★ |
| 按住alt + shift 然后拖动鼠标 | 选择某个区块 |
| Shift + Ctrl + [ | 折叠鼠标所在区域 |
| Shift + Ctrl + ] | 展开鼠标所在区域 |
| shift+alt+ ↑/↓ | 快速复制一行★★★ |
| Home/End | 光标定位到行首/行未 |
| Shift+PgUp / PgDown | 向上/向下滚动页面 |
| Ctrl+Home / End | 滚动到顶部/底部★★★ |
三、HBuilder X
HBuilder X，H是HTML的首字母，Builder是构造者，X是HBuilder的下一代版本。我们也简称HX。 HX是轻如编辑器、强如IDE的合体版本。主要用于uniapp混合开发，VUE开发、小程序开发等。有着庞大的插件市场，同时支持java插件、nodejs插件，并兼容了很多vscode的插件及代码块。
3.1 下载安装
官网地址： https://www.dcloud.io/hbuilderx.html
下载地址： https://download1.dcloud.net.cn/download/HBuilderX.3.6.18.20230117.zip
注意： 这里下载是一个压缩包，HBuilder X不需要安装，可以直接解压后点击HbuilderX.exe运行。
3.2 基本功能介绍
3.3 插件安装
选择需要的插件进行安装即可
3.4 快捷键介绍
这里只需要将快捷键方案切换为VS Code即可，又或者说你之前用ide、Webstorm等编译器，只需要切换成对应快捷键方案即；还可以自定义快捷键。
