1,916 次浏览

自定义 VSCode 的编辑器配置

打开 VSCode 后,按快捷键 F1 打开 Command palette, 搜索 Open Settings (JSON) 即可启动配置页面,如下图所示。

在上图右侧蓝色方框内添加对 VSCode 编辑器的配置,比如,持续显示左侧代码折叠控件等,以下是一些常见的配置。你也可以点击图片左侧橙色方框出的超链接,打开图形化配置器。

对于各项配置的含义,可以查看左侧的英文说明,也可以参考这里

{
    //
    // Editor
    //
    // 控制编辑器在空白字符上显示符号的方式。
    // - boundary: 除了单个空格,在空白字符上显示符号。
    "editor.renderWhitespace": "boundary",
    // 控制编辑器是否显示控制字符。
    "editor.renderControlCharacters": true,
    // 按住 `Ctrl` 键并滚动鼠标滚轮时对编辑器字体大小进行缩放。
    "editor.mouseWheelZoom": true,
    // 启用 Tab 补全。
    // - on: 在按下 Tab 键时进行 Tab 补全,将插入最佳匹配建议。
    "editor.tabCompletion": "on",
    // 控制编辑器是否在滚动时使用动画。
    "editor.smoothScrolling": true,
    // 控制是否启用平滑插入动画。
    "editor.cursorSmoothCaretAnimation": true,
    // 控制是否自动隐藏导航线上的折叠控件。
    "editor.showFoldingControls": "always",
    // 控制折行的缩进。
    // - none: 没有缩进。折行从第 1 列开始。
    // - same: 折行的缩进量与其父级相同。
    // - indent: 折行的缩进量比其父级多 1。
    // - deepIndent: 折行的缩进量比其父级多 2。
    "editor.wrappingIndent": "none",
    // 控制编辑器的当前行进行高亮显示的方式。
    // - all: 同时突出显示导航线和当前行。
    "editor.renderLineHighlight": "all",
    // 执行单词相关的导航或操作时作为单词分隔符的字符。
    "editor.wordSeparators": "`~!@#$%^&*()=+[{]}\\|;:'\",.<>/?",
    // 控制折行的方式。
    // "editor.wordWrap": "on"
    //
    // Workbench
    //
    // "workbench.editor.labelFormat": "default",
    "workbench.sideBar.location": "right",
    // 控制是否绘制已修改 (存在更新) 的编辑器选项卡的顶部边框。
    "workbench.editor.highlightModifiedTabs": true,
    // 指定在工作台中使用的图标主题,或指定 "null" 以不显示任何文件图标。
    "workbench.iconTheme": "material-icon-theme",
    // 覆盖当前所选颜色主题的颜色。
    "workbench.colorCustomizations": {
        // "editorIndentGuide.background": "#ffffaa"
    },
    //
    // Files
    //
    // 配置排除的文件和文件夹的 glob 模式。例如,文件资源管理器将根据此设置决定要显示或隐藏的文件和文件夹。可在[此处](https://code.visualstudio.com/docs/editor/codebasics#_advanced-search-options)阅读有关 glob 模式的详细信息。
    "files.exclude": {
        "*.bak": true,
        "*.suo": true,
        "*.user": true,
        "**/.vs": true,
        "**/bin": true,
        "**/obj": true,
        "**/packages": true
    },
    // 启用后,将在保存文件时剪裁尾随空格。
    "files.trimTrailingWhitespace": true,
    //
    // Others
    //
    // 不显示文件浏览器当前已打开的文件列表
    "explorer.openEditors.visible": 0,
    // 控制是否显示搜索结果所在的行号。
    "search.showLineNumbers": true,
    // 完成函数的参数签名。
    "javascript.suggest.completeFunctionCalls": true,
    // 完成函数的参数签名。
    "typescript.suggest.completeFunctionCalls": true,
    // 当处于调试过程中时,在编辑器中内联显示变量值。
    "debug.inlineValues": true,
    // 启用/禁用导航路径
    "breadcrumbs.enabled": true,
}

About nista

THERE IS NO FATE BUT WHAT WE MAKE.

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注