系列文章
基础配置
也许你已经使用 Vscode 一段时间了,安装了一些流行的插件,能够满足日常开发需求。这样挺好的,不过如果仅此而已,那么很可能你就与 Vscode 的诸多功能擦肩而过了。
本文记录了 Vscode 的一些小技巧,配置,这些对于前端开发工作而言都有着极大的提升。
主题
颜值是提升开发效率的第一要素,而 Vscode 默认主题的配色着实有点让我欣赏不来。这里我推荐 Material 下的 Ocean High Contrast。
(tip:还可以在命令面板搜索 accent 来更改主题的高亮色。)
字体
选择合适的字体能让代码看起来更加赏心悦目,我常年在用的字体是 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"
复制代码
效果还是比较显著的: