[ 从零开始配置一个 Windows 前端开发环境 ] - 二：vscode

系列文章

• [ 从零开始配置一个 Windows 前端开发环境 ] - 一：WT + WSL

基础配置

也许你已经使用 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 也能轻松地知足咱们的需求。