持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第10天，点击查看活动详情

---

前端常用编辑器介绍

Visual Studio Code

• 简介：微软研发，号称现今前端使用率最高的编辑器，开源项目，并且免费使用。
• 优点：开源，插件丰富，社区活跃，版本迭代更新频繁。尤其是插件的安装和卸载，可直接在编辑器内操作，十分方便。

Sublime Text

• 简介：它是一个文本编辑器（收费软件，可以无限期试用，但是会有激活提示弹窗），同时也是一个先进的代码编辑器。Sublime Text 是由程序员 Jon Skinner 于 2008 年 1 月份所开发出来，它最初被设计为一个具有丰富扩展功能的 Vim。
• 优点：轻量级编辑器，内存占用比较小，很适合打开一些临时查看的文件。
• 缺点：安装插件比较繁琐，插件社区不活跃。

WebStorm

• 简介：WebStorm 是 jetbrains 公司旗下一款 JavaScript 开发工具。已经被广大中国 JS 开发者誉为“Web 前端开发神器”、“最强大的 HTML5 编辑器”、“最智能的 JavaScript IDE”等。与 IntelliJ IDEA 同源，继承了 IntelliJ IDEA 强大的 JS 部分的功能。
• 优点：自动保存，历史记录方便回退，插件、快捷键齐全，集成 Git。可直接使用自带的控制台编译打包代码。
• 缺点：收费工具，且占用内存高，软件比较大。

HBuilder

• 简介：这是一款国人自己研发的编程软件，DCloud（数字天堂）推出的一款支持HTML5的Web开发IDE。 [1] HBuilder的编写用到了Java、C、Web和Ruby。HBuilder本身主体是由 Java 编写。
• 优点：快，是 HBuilder 的最大优势，通过完整的语法提示和代码输入法、代码块等，大幅提升 HTML、JS、CSS 的开发效率。
• 缺点：闪退、一些问题官方不能及时处理。

Visual Studio Code 的安装及插件介绍

安装

• 去官网直接下载安装包安装便可

实用插件

Vetur

Vetur 是为 Vue 开发量身打造的插件。

当你新建一个空的 Vue 文件，在文件内输入 vue 关键字，能联想一些 vue 文件的快速模板，帮助你快速生成 vue 模板页面，大大提高了开发效率。

Live Server

carbon-now-sh

• 将代码生成一张图片

• 使用

  • 选中需要生成图片的代码
  • 打开命令行托盘

   - Window - `Ctrl + Shift + P`
   - Mac - `Cmd + Shift + P`
  

  • 输入 “Carbon”，点击它

Turbo Console Log

• 选中变量之后 Ctrl + Alt + l
• 删除所有 console.log Alt + Shift + d
• 注释所有 conosle.log Alt + Shift + c
• 启用所有 console.log Alt + Shift + u

open-in-browser

• 写好页面，打开默认浏览器的功能

Import Cost

• 每当你引入一个 npm 包，都会在包的后面带上文件的大小，以及打包 gzip 后的文件大小

Browser Preview

• 可以在 VS Code 内直接打开浏览器，边编辑代码边预览网页效果