webstorm 风扇一直响_在 Webstorm 伤透我的心后，我决定尝试 VS Code

本文主要将介绍如何在 VS Code 中使用插件配置出一个顺手的开发环境

一、前言

1.1 没有什么比 Jetbrains 更强大的 IDE 了

我一直相信着这一点，并且是 WebStorm、PyCharm、Android Studio、IDEA、PHPStorm 的忠实拥趸。

但是在今天运行我的 Vue 项目时，我的 WebStorm 失去了对 Element 的代码补全支持。而当我试图让它对整个 node_module 目录进行索引时，它 scanning files to index 差不多一个小时还没有完成的感觉。

而我的 macbook 的风扇已经快要起飞了。

这时我想到，Jetbrains 确实很好，但是是时候尝试下新鲜事物了。

1.2 对于我来说，什么是顺手的开发工具

我认为，只要满足了如下三点要求，我就可以把它作为一个顺手的开发工具：格式化代码能力

丰富的代码提示

重构代码的能力(改名，提函数，文件位置变更)

当然，如果要是有一些非常好用的附加功能，我也是非常愿意的：当正则表达式粘贴进来时的高亮

字符串粘贴进来后的自动补充 / 和 \n

完美的 lint 提示及修复(如自动转变为 lambda 表达式之类的、if 判断语句)

二、从零开始使用 VSCode：通用插件

2.1 Keymap：键盘映射IntelliJ IDEA Keybindings​marketplace.visualstudio.com

虽然我被 WebStorm 伤透了心，但是我依旧是一个使用了 Jetbrains 家产品多年的用户，我希望我可以拥有之前我的熟悉的键位设置。

使用上述插件，就可以完成这一诉求。

如果您是从别的 IDE 或 Editor 切换过来的，您也可以在插件管理器中通过搜索如下内容找到您想要的键盘映射。

@recommended:keymap

2.2 Icon Theme：图标主题Webstorm Icon Theme​marketplace.visualstudio.com

WebStorm 同款图标主题，也是我认为 VS Code 的最令人不分心的图片主题：

2.3 工作区设置与用户设置

VSCode 的编辑器设置文件在 setting.json 中保存。从全局上看，一共有三个 setting.json 正在发挥作用：默认 setting.json

用户 setting.json

工作区 setting.json

其中工作区设置会覆盖用户设置，用户设置会覆盖默认设置。

我们可以通过在当前目录下创建 .vscode 文件夹，并在其中创建 setting.json 来创建工作区配置文件：

也可以通过左下角的按钮，点击设置进入用户以及工作区配置：

如果大家感兴趣我的 setting.json 也可以直接到文末找到，在下配置了一下午才顺手。(MAC-OS 仅限)

2.4 人工智能代码提示：Visual Studio IntelliCodeVisual Studio Int