前端必备开发编译器详解

一、前言

前端开发编译器有很多，例如：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 常用插件推荐

1. Chinese 中文插件包
2. Error Gutters 报错提示
3. Git History git提交历史
4. GitLens — Git supercharged 每一行修改时间
5. Auto Rename Tag 同步修改标签名
6. 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等编译器，只需要切换成对应快捷键方案即；还可以自定义快捷键。