原生的VS Code自定义设置，做出漂亮的代码

HolyKnightIX
1,147 阅读3分钟

现在市面上的主流代码编辑器有很多，今天给大家介绍几个VsCode代码编辑器上的自定义设置

1、原生自定义代码颜色

早期前端开发，大家一定都用过轻量级的Sublime；其经典的Monokai代码主题配色，在之后的各种开发软件上都有它的身影 image.png 当然在VsCode上也能看到各种各样的Sublime主题配色插件 image.png 甚至连Monokai官方也在VsCode上提供了专业级的Monokai Pro主题 image.png

但是加载插件是需要花费时间的，随着开发时长的增加，插件会越来越多，对于硬件规模较小的机器来说，负荷日益增加；使用原生VsCode自定义颜色，可以解决这个问题（实际上还是下载插件更简单方便，大家想搞点个性化操作可以试试操作）

在VsCode中设置文件settings.json中增加以下代码

    //自定义编辑器语法颜色与字形
    "editor.tokenColorCustomizations": {
        //设置关键字颜色、字体样式（斜体，加粗）
        "keywords": {
            "foreground": "#FF0000",
            "fontStyle": "italic bold"
        },
        //设置变量颜色、字体样式
        "variables": {
            "foreground": "#ffffff",
            "fontStyle": "italic bold",
        },
        //设置字符串颜色、字体样式
        "strings": {
            "foreground": "#fbff00",
            "fontStyle": "italic"
        },
        //设置函数颜色
        "functions": "#00ffff",
        //设置注释颜色
        "comments": "#969696",
    },

以上代码为示例颜色，实际可根据需求自定义

2、原生括号着色与导轨线着色

大多数使用VsCode的开发者对这个插件一定非常熟悉吧 image.png 非常强大实用的功能，能给互相嵌套的括号添加不同的背景色，加强了代码辨识度，在一定程度上提高了开发效率

在那个VsCode还不支持原生括号着色与导轨线着色的年代，这个插件不知道帮助多少人度过了复杂代码阅读的严冬

但是在一些情况下，这个插件有一些bug，例如：

image.png

图片引用自 咲奈的博客

现版本VsCode（v1.60之后的版本都可以）提供了原生的括号着色方法，以及对应括号颜色的导轨线

image.png

    // 开启原生括号着色
    "editor.bracketPairColorization.enabled": true,
    // 开启代码块边缘导轨线着色
    "editor.guides.bracketPairs": "active",
    //覆盖当前所选颜色主题的颜色
    "workbench.colorCustomizations": {
        //缩进参考线的颜色
        "editorIndentGuide.activeBackground": "#f92672",
        //方括号出现意外的前景色
        "editorBracketHighlight.unexpectedBracket.foreground": "#ff0000",
        //括号的前景色，需要启用括号对着色
        //括号导轨线，需要对应括号
        "editorBracketHighlight.foreground1": "#ffff00",
        "editorBracketPairGuide.activeBackground1": "#ffff00",
        "editorBracketHighlight.foreground2": "#f92672",
        "editorBracketPairGuide.activeBackground2": "#f92672",
        "editorBracketHighlight.foreground3": "#00ffff",
        "editorBracketPairGuide.activeBackground3": "#00ffff",
        "editorBracketHighlight.foreground4": "#00ff00",
        "editorBracketPairGuide.activeBackground4": "#00ff00",
    },

需要注意的是，着色导轨线序号必须与括号着色序号相对应，其颜色值也应该相对应 image.png

3、自定义光标颜色与选中高亮

代码编辑器光标颜色：

image.png

 "workbench.colorCustomizations": {
        //光标颜色
        "editorCursor.foreground": "#00ff00",
    },

光标所在行背景颜色与边框颜色：

image.png

 "workbench.colorCustomizations": {
        //光标所在行边框颜色
        //光标所在行背景颜色
        "editor.lineHighlightBorder": "#ffffffa1",
        "editor.lineHighlightBackground": "#ffffff1e",
    },

光标选中文本的背景颜色与选中文本匹配相同值的背景颜色

image.png

    "workbench.colorCustomizations": {
        //光标选中文本的背景颜色
        //光标选中文本时匹配同类型的值的背景颜色
        "editor.selectionBackground": "#ff0000c2",
        "editor.selectionHighlightBackground": "#00ffff80",
    },

如图，选中“editor”背景色呈现“#ff0000c2”色（红色），此时匹配的其他的所有“editor”都将呈现“#00ffff80”色（青色）

avatar
文章
阅读
粉丝