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

系列文章

基础配置

也许你已经使用 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"

复制代码

效果还是比较显著的：

关于找一找教程网

本站文章仅代表作者观点，不代表本站立场，所有文章非营利性免费分享。

本站提供了软件编程、网站开发技术、服务器运维、人工智能等等IT技术文章，希望广大程序员努力学习，让我们用科技改变世界。

[[ 从零开始配置一个 Windows 前端开发环境 ] - 二：vscode]http://www.zyiz.net/tech/detail-123019.html