系列文章
基础配置
也许你已经使用 Vscode 一段时间了，安装了一些流行的插件，能够满足日常开发需求。这样挺好的，不过如果仅此而已，那么很可能你就与 Vscode 的诸多功能擦肩而过了。
本文记录了 Vscode 的一些小技巧，配置，这些对于前端开发工作而言都有着极大的提升。
主题
颜值是提升开发效率的第一要素，而 Vscode 默认主题的配色着实有点让我欣赏不来。这里我推荐 Material 下的 Ocean High Contrast。
（tip：还可以在命令面板搜索 accent 来更改主题的高亮色。）
另外，Material Theme Icons 也是非常不错的文件图标主题。
字体
选择合适的字体能让代码看起来更加赏心悦目，我常年在用的字体是 FiraCode，下载安装之后在 settings.json 中配置：
"editor.fontFamily": "Fira Code",
"editor.fontLigatures": true,
"editor.fontSize": 18
缩进
可能 tabs vs spaces 之争困扰着不少人，但不论你是 tabs，还是 spaces，你都可以这样配置：
"editor.detectIndentation": true,
"editor.insertSpaces": true
"editor.tabSize": 2
秒开文件
用过 Vscode 的人都知道，当我们使用 Ctrl + P 打开一个文件的时候，文件名是斜体的，这代表当前处于预览模式，通常这个时候我们再打开别的文件，这个预览的文件就丢失了，而通过以下配置可以省去预览这一步，直接打开文件：
"workbench.editor.enablePreviewFromQuickOpen": false
清理侧边栏
侧边栏默认会有一栏打开的编辑器窗格，个人体验认为使用场景并不算多，并且会影响美观，让侧边栏看起来杂乱无章，通过以下配置就可以隐藏这个窗格（当然也可以直接在侧边栏中通过右键菜单隐藏）
"explorer.openEditors.visible": 0
自定义标题栏
Vscode 默认的标题栏只显示当前文件名和项目名，我们可以参考官网提供的配置选项做出如下配置来进行优化：
"window.title": "${dirty} ${activeEditorMedium}${separator}${rootName}"
代码缩略图
就是这个东西。
它可以帮助我们快速定位代码，但这东西着实有点丑，我们可以通过以下配置来稍微美化一下：
"editor.minimap.renderCharacters": false,
"editor.minimap.maxColumn": 200,
"editor.minimap.showSlider": "always"
效果还是比较显著的：
插件
当然，之所以选择 Vscode，除了本身强大以外，更重要的是那完整的生态，丰富的插件——事实上，如果不考虑这些，也许我会用 Atom。
indent-rainbow
这个插件主要作用是为文本前面的缩进着色，默认着色如下：
javascript console utils
在开发中，要么在控制台里打断点调试，要么是简单的 console.xxx()。通常前者适用于比较复杂的情况，而逻辑比较简单的时候，显然第二种调试手段效率更高一些。
本插件通常有两种操作：
| 快捷键 | 操作 |
|---|---|
| Ctrl/Cmd + Shift + L | 输出固定格式 Log |
| Ctrl/Cmd + Shift + D | 删除本页 Log |
（tip：多人协作中，往往会出现很多别人输出的 log，为了快速定位自己的 log，可以借助 %c 占位符插入样式。当然，如果每一个 log 都需要手动添加样式，那就舍本逐末了，所以可以稍微改进一下这个插件，具体方法可以参考VSCode折腾log插件）
最后输出日志效果如下：
Live Server
这是一个非常棒的插件，无需配置，开箱即用。它可以帮助你启动一个本地开发服务器，为静态和动态页面提供实时重新加载功能。
vscode-faker
有了这个插件，就再也不用抠破头皮去想假数据了。
REST Client
作为 Web 开发人员，我们需要经常使用 REST api，当然 postman 也是不错的选择，Vscode 也能轻松地满足我们的需求。
Prettier - Code formatter
这是一款我爱不释手的插件，配合
"editor.formatOnSave": true
做到在保存的时候自动格式化代码，妈妈再也不用操心我代码格式化的问题了：
Eslint
说到 Prettier 自然不能少了它的好伙伴 Eslint，二者配合更是美滋滋。
关于详细配置可以参考使用ESLint+Prettier来统一前端代码风格。
npm Intellisense
这个插件可以在导入语句自动补全 npm 模块名称。
GitLens — Git supercharged
这也是一个强大的变形的插件，不必多言，直接上图：
Color Highlight
这个插件能够直观的查看你所定义的颜色：
Vetur
Vue 开发必备插件，Pine Wu 大佬出品，必属精品。
Better Comments
这是个人较为喜欢的一款插件，用于编写更为人性化的注释。
Settings Sync
最后是 Settings Sync，用于多端同步我们的 Vscode 插件以及配置，而不用每换一次环境就去把 Vscode 重新配一遍。
使用下面的 ID 可以同步我目前使用的 VScode 配置。
65639bb6b9e63dd43ce44efb21010a98
