前端学习的编辑器介绍

文章被收录于专栏：https://www.dcloud.io/hbuilderx.html 。进入链接之后，点击下载，不管是mac电脑或者是win系统都一样的，然后你会看到如下的界面。

HBuilder下载界面

那么此时，会有一个正式版和一个Alpha版本让你选择。Alpha版比正式版更新频率更高，新功能会优先在Alpha版上发布。Alpha独立于正式版，建议电脑上保持正式版和Alpha 2个版本，不要互相覆盖。Alpha和正式版各自有独立的升级机制，不会互相影响。Alpha和正式版共用相同的用户配置，如主题、快捷键设置、代码块设置。但插件需要各自安装。Alpha和正式版能同时启动一个。先开启正式版，再启动Alpha版会激活已经开启的正式版。反之亦然。总结下来就是对于刚入门的小伙伴，正式版够了，别贪，HBuilder第一次运行代码的话是有点慢的，因为它会自动帮你下载一些插件，所以莫慌，等待就好了。

第二种、VScode编辑器，我用的最多的编辑器，不是说它有多好，实在是一直在用这个编辑器，有感情了哈哈，我不会说是因为它是免费的。同样的，这款编辑器同样支持mac系统和win系统。下载链接传送门： https://code.visualstudio.com/ 。因为是国外的网站，所以打开的时候略慢。进入网站之后点击右上角的Download，你会看到下面的界面，然后根据你是什么系统对应的下载就完事了。

VScode下载界面

因为我主要用这个编辑器，所以有必要讲一下vscode的插件其实还是非常强大的，也给没有用过的小伙伴们讲解一下。首先，它的标识不要认错了,长的是下面这个样子的。

Vscode编辑器

打开我们的刚下的VScode编辑器，我们来安装一些好用的插件。视线看向编辑器的左边，你会看到下面的界面。

VScode编辑器左边的页面

我们点击倒数第二个，也就是四个方块的功能键，这个就是专门去下载一些插件的地方，之后我们在上面搜索我们要下载的插件，然后进行下载就OK了，这里我提醒一下，你第一次进入必定是全英文的，你要去下载中文的插件，然后你装完插件之后要再次运行编辑器才能使用刚刚装的插件。实在看不懂建议你第一个就去装中文包，也就是下面的这张图，安装的按钮叫install。

中文包下载

至于还有一些别的好用的插件，在这里我都写出来，不用去知道有什么用，先下载日后再说，请看下面推荐的插件，依次下载：

1.Auto Close Tag (必备)

　　自动闭合HTML/XML标签

2.Auto Rename Tag (必备)

　　自动完成另一侧标签的同步修改

3.Beautify (必备)

      格式化 html ,js,css

4.Bracket Pair Colorizer (必备)

　　给括号加上不同的颜色，便于区分不同的区块，使用者可以定义不同括号类型和不同颜色

5.Debugger for Chrome (推荐)

　　映射vscode上的断点到chrome上，方便调试

6.ESLint (推荐)

　　js语法纠错，可以自定义配置，不过配置较为复杂，建议使用网上一些广泛使用的eslint配置，日后我也会专门针对eslint配置写一篇文章。

7.GitLens(使用git的必备)

　　方便查看git日志，git重度使用者必备

8.HTML CSS Support (必备)

　　智能提示CSS类名以及id 

9.HTML Snippets (必备)

　　智能提示HTML标签，以及标签含义

10.JavaScript(ES6) code snippets (必备)

　　ES6语法智能提示，以及快速输入，不仅仅支持.js，还支持.ts，.jsx，.tsx，.html，.vue，省去了配置其支持各种包含js代码文件的时间

11.jQuery Code Snippets (推荐)

　　jQuery代码智能提示

12.Markdown Preview Enhanced (推荐)

　　实时预览markdown，markdown使用者必备

13.markdownlint (推荐)

　　markdown语法纠错

14.Material Icon Theme (推荐)

　　vscode图标主题，支持更换不同色系的图标，值得点出的是，该插件更新极其频繁，基本和vscode更新频率保持一致

       极简主义是不需要的

15.open in browser (必备)

　　vscode不像IDE一样能够直接在浏览器中打开html，而该插件支持快捷键与鼠标右键快速在浏览器中打开html文件，支持自定义打开指定的浏览器，包括：Firefox，Chrome，Opera，IE以及Safari

16.Path Intellisense (必备)

　　自动提示文件路径，支持各种快速引入文件

17.React/Redux/react-router Snippets (推荐)(react必备)

　　React/Redux/react-router语法智能提示

18.Vetur (推荐)(vue必备)

　　Vue多功能集成插件，包括：语法高亮，智能提示，emmet，错误提示，格式化，自动补全，debugger。vscode官方钦定Vue插件，Vue开发者必备。

19.Dracula Official (推荐)

20.filesize (了解)

　　查看文件大小

21.HTMLHint(了解)

　　 静态检查规则

22. Class autocomplete for HTML (推荐)

     智能提示HTML class =“”属性（必备）

23. IntelliSense for CSS class names (推荐)

     智能提示 css 的 class 名

24.  Npm Intellisense(node必备)

     require 时的包提示

好用的插件确实不少，综上这么多，我觉得是比较常用的，也是看了一篇大佬的文章摘抄过来的，至于怎么用，详细的介绍会在另外的文章里，我会一一介绍各种实用的插件，这里的话刚入门的小伙伴们先装，还有一点建议就是最好浏览器安装一个就够了，最多最多两个。

至于vscode的使用方法有一些比较常用的快捷方式，在这里我也给大家拓展一下，因为我主要都是用mac来写代码的，所以我就写个mac电脑的操作快捷键位：

全局

Command + Shift + P 显示命令面板 Command + P 快速打开 Command + Shift + N 打开新窗口 Command + W 关闭窗口

基本

Command + X 剪切（未选中文本的情况下，剪切光标所在行） Command + C 复制（未选中文本的情况下，复制光标所在行） Option + ↑ 向上移动行 Option + ↓ 向下移动行 Option + Shift + ↑ 向上复制行 Option + Shift + ↓ 向下复制行 Command + Shift + K 删除行 Command + Enter 下一行插入 Command + Shift + Enter 上一行插入 Command + Shift + \ 跳转到匹配的括号 Command + [ 减少缩进 Command + ] 增加缩进 Command + Shift + [ 切换到上一个已打开文件标签 Command + Shift + ] 切换到下一个已打开文件标签 Control + - 切换到上一个已打开文件标签 Control + Shift + - 切换到下一个已打开文件标签 Command + K Command + J 展开全部代码块 Command + K Command + C 添加行注释 Command + / 添加、移除行注释 Option + Shift + A 添加、移除块注释 Command + Shift + D 复制光标所在整行，插入在该行之前 Command + K U 选中单词改为大写 Command + K L 选中单词改为小写 Command + Option + [ 代码折叠 Command + Option + ] 代码展开

多光标与选择

Command + ↑ 跳转至文件开头 Command + ↓ 跳转至文件结尾 Command + 点击 插入多个光标 Option + 左键按住不放，拖动鼠标 添加多个光标 Command + U 撤销上一个光标操作 Option + Shift + I 在所选行的行尾插入光标 Control + Shift +↑ 向上面一行添加游标 Control + Shift + ↓ 向下面一行添加游标 Command + J 删除当前行与下一行内容合并成一行（光标未选中多行内容的时候） 或 将多行内容合并成一行（已选择需要合并的多行时） Option + Shift +↑ 向上复制一行 Option + Shift + ↓ 向下复制一行 Option + → 以单词为单位向后移动光标 Option + Shift + → 以单词为单位向后选中文本

查找替换

Command + F 查找 Command + Option + F 替换 Command + Shift + F 在文件中查找 Command + Shift + H 在文件中替换 Command + G 查找下一个 Command + Shift + G 查找上一个 Option + Enter 选中所有匹配项 Command + D 向下选中相同内容 Command + K Command + D 移除前一个向下选中相同内容

进阶

Option + Shift + F 格式化代码 Command + K Command + X 删除行尾多余空格 Command + kk \ Control + kk 删除光标至当前行尾内容

导航

Control + R 跳转到当前文件的某一符号位置 Control + G 跳转至某行 Command + P 跳转到某个文件 Command + M 光标移动至括号内开始或结束的位置 Command + Shift + O 跳转到某个符号 Command + Shift + M 打开问题面板

编辑器管理

Command + W 关闭编辑器 Command + \ 编辑器分屏 Command + 1 切换到第一分组 Command + 2 切换到第二分组 Command + 3 切换到第三分组 Command + K Left 激活左侧编辑组 Command + K Right 激活右侧编辑组

文件管理

Command + N 新建文件 Command + O 打开文件 Command + S 保存文件 Command + Shift + S 另存为 Command + Option + S 全部保存 Command + W 关闭 Command + K Command + W 全部关闭 Command + Shift + T 重新打开被关闭的编辑器 Control + Tab 打开下一个 Control + Shift + Tab 打开上一个 Command + K R 在资源管理器中查看当前文件 Command + K O 新窗口打开当前文件

调试

Command + Shift + D 调试 Command + Shift + X 安装插件

显示

Command + Ctrl + F 全屏、退出全屏 Command + + 放大 Command + - 缩小 Command + B 显示、隐藏侧边栏 Command + Shift + F 显示搜索框 Command + Shift + X 显示插件面板 Command + Shift + H 全局搜索替换 Command + Shift + J 显示、隐藏高级搜索 Command + Shift + U 显示、隐藏输出面板

集成终端

Control + 显示终端 Control + Shift + 新建终端 Command + Shift + U 输出 Command + Shift + Y 调试控制台

ps：当然了，其实window的使用方法也就是把上面的command换成是control就行了，基本上的话没有太大的出入，如果有时间的话我会详细的介绍一下两个系统分别的操作模式和方法。

第三种、WebStome编辑器，比起前两个呢，之前用的很多，毕竟当时破解是真的soeasy，之后呢，就用的少了，因为不好破解了，强制我必须支持正版，就很难受，但我不得不承认，香还是挺香的，挺好用的，就是要花钱，当然了喜欢支持正版的小伙伴也可以去某宝买一个，如果你特别有钱，那当我没说吧。下载编辑器传送门https://www.jetbrains.com/webstorm/download/。

也是mac系统和win系统都能下的，好像是有三十天的免费体验吧。

WebStome下载界面

根据步骤安装，最后会有一个让你填写密钥的界面，这就不用我多说了，因为我也用的不多，所以就不详细介绍了。

总结一下这章的内容，除了VScode编辑器，其余的两个WebStome和HBuilder都是粗略的介绍了一下，其实我觉得编辑器都是差不多的，主要看你习惯用什么，然后看有些公司的要求是用哪个，我的公司的话没有强制，但是基本全是VScode，当然了如果你以后是写uniapp的话，那么HBuilder的一些使用你也是要会的，最主要，最常用的也就是这三款了，仅代表个人观点(此处强烈的求生欲望)，当然了有人会觉得Sublime Text也挺好用的，确实 ，但是安装插件太让我无奈，懂得都懂。

最后的最后，送大家一句英文的心灵鸡汤。You think you can, you can.你认为你行，你就行。

感谢大家的阅读，可以点个赞吗？