2022新版前端开发工具（教程）

工欲善其事，必先利其器 ！

对于我们每一位软件工程师来说，都要有自己顺手的IDE开发工具，它就是我们的武器。

一个好用的IDE不仅能提升我们的开发效率，还能让我们保持愉悦的心情，这样才是非常Nice的状态 ^_^

那么，什么是IDE呢 ？目前，前端开发主流的 IDE 有以下5个：IDE名称公司是否免费功能强大度

Visual Studio Code

微软

是

强大（推荐）

Sublime

个人开发者

是（需要注册）

适中

Atom

GitHub

是

适中

WebStorm

JetBrains

否

非常强大

HBuilder

DCloud

是

非常强大

为什么现在不用 Dreamweaver 了 ？

故事得从2017年说起

第一次关注到微软公司的 VSCode ，还是在Vue创始人尤雨溪的社交账号上看到尤大说 "正式转投VSCode了" ，从那时起自己也开始慢慢用起来，确实越用越Nice了。

事实上目前VSCode已经成为了各大厂前端开发人员的首选IDE开发工具了

Vue创始人尤雨溪社交平台截图

下边我们开始玩转VSCode：

VSCode 下载

在官方网站：

下载最新版本的 VSCode即可

蓝色按钮会自动识别电脑操作系统，到适合的版本，只需要点击下载即可

window 版 VScode 安装流程1、下载 Vscode 安装文件

点击上面的下载之后，它会跳转至一个新页面

2、下载完成单击运行，然后我们开始进行安装

3、选择安装的位置

4、选择开始菜单文件夹

5、选择附加任务

6、准备安装

7、安装完成后，第一次打开VScode

VSCode常见插件安装

1、简体中文语言包

2、编辑器主题选择、设置

3、vscode-icons 显示代码图标

4、open in brower 通过编辑器直接打开默认浏览器

5、Live Server 开启本地服务器

6、Auto Rename Tag 自动修改标签对名称

7、carbon-now-sh 将代码生成一张图片

8、prettier 格式化代码

VSCode 相关设置

1、字体设置

注：

在 VSCode 中 "控制字体系列" 添加字体名称 （优先级：从左至右）

同时还要在对应的电脑操作系统中安装字体才能生效

下载字体

JetBrains Mono 官方下载地址 ：

点击 Download font 下载

在电脑中安装字体

在VSCode中启用查看以下字体（非常好看）

如需下载 Consolas 字体，地址如下：

2、光标设置，平滑插入动画

3、关闭代码缩略图，不占用新资源

4、Ctrl + 鼠标滚轮缩放字体大小

VSCode 快捷键1、Window 版快捷键

移动行：alt + up/down

显示/隐藏左侧目录栏 ctrl + b

复制当前行：shift + alt + up/down

删除当前行：shift + ctrl + k

控制台终端显示与隐藏：ctrl + ~

查找文件/安装vscode插件地址：ctrl + p

代码格式化：shift + alt + f

新建一个窗口：ctrl + shift + n

多行编辑：Ctrl + Alt + up/down

2、Mac 版快捷键

作为优秀的开发者，能熟练的用好快捷键也是非常重要的技能之一

Emmet 语法