系列文章

基础配置

也许你已经使用 Vscode 一段时间了,安装了一些流行的插件,能够满足日常开发需求。这样挺好的,不过如果仅此而已,那么很可能你就与 Vscode 的诸多功能擦肩而过了。

本文记录了 Vscode 的一些小技巧,配置,这些对于前端开发工作而言都有着极大的提升。

主题

颜值是提升开发效率的第一要素,而 Vscode 默认主题的配色着实有点让我欣赏不来。这里我推荐 Material 下的 Ocean High Contrast。

vscode配置pythonpath vscode配置html环境_侧边栏

(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}"

复制代码

代码缩略图

就是这个东西。

vscode配置pythonpath vscode配置html环境_vscode配置pythonpath_02

它可以帮助我们快速定位代码,但这东西着实有点丑,我们可以通过以下配置来稍微美化一下:

"editor.minimap.renderCharacters": false,
"editor.minimap.maxColumn": 200,
"editor.minimap.showSlider": "always"

复制代码

效果还是比较显著的:

vscode配置pythonpath vscode配置html环境_侧边栏_03