Visual Studio Code 基础设置

Visual Studio Code

最终效果预览

Visual Studio Code

PS：预览图中的最终效果，基于图标主题 Material Icon Theme 和颜色主题 One Monokai Theme 定制，详见以下配置。

持续更新地址：https://github.com/whorusq/vscode-settings.git

自定义配置

基础设置

{
    //--------------------------------------------------
    // 软件基本设置
    //--------------------------------------------------

    // 自定义标题栏
    "window.nativeTabs": true, // 仅适用于 macOS Sierra
    "window.title": "${activeEditorLong}${separator}${rootName}",

    // 保存文件时，去除行尾空格
    "files.trimTrailingWhitespace": true,

    // 隐藏最左侧的工具栏
    // "workbench.activityBar.visible": false,

    // 隐藏左侧边栏上的 OpenEditors
    "explorer.openEditors.visible": 0,

    // terminal 光标样式
    "terminal.integrated.cursorBlinking": true,
    "terminal.integrated.cursorStyle": "line",

    // 软件主题配色
    "workbench.iconTheme": "material-icon-theme", // 图标主题
    "workbench.colorTheme": "One Monokai", // 颜色主题
    "workbench.colorCustomizations": {
        "[One Monokai]": {
            // 编辑区域背景
            "editor.background": "#2E2E2E",
            // 侧边栏
            "sideBar.background": "#2b2b2b",
            "sideBar.foreground": "#999",
            "sideBar.border": "#2b2b2b",
            // 侧边栏列表
            "list.inactiveSelectionBackground": "#32363d",
            "list.inactiveSelectionForeground": "#dfdfdf",
            "list.hoverBackground": "#32363d",
            "list.hoverForeground": "#dfdfdf",
            // peek 窗口
            "peekView.border": "#5b99fc9c",
            // 顶部 tab 栏
            "tab.border": "#2e2e2e",
            "tab.activeBackground": "#2e2e2e",
            "tab.activeForeground": "#cfcfcf",
            "tab.activeBorder": "#5b99fcb9",
            "tab.hoverBackground": "#2e2e2e",
            "tab.hoverBorder": "#5b99fcb9",
            "tab.inactiveForeground": "#8e8e8e",
            // 最左侧工具栏
            "activityBar.background": "#2e2e2e",
            // 状态栏
            "statusBar.background": "#2a2a2a",
            // panel 窗口
            "panelTitle.activeBorder": "#5b99fc5b",
            "panelTitle.activeForeground": "#cfcfcf",
            // 光标
            "editorCursor.foreground": "#7bfc5bb9",
            // 当前行
            "editor.lineHighlightBackground": "#32363d",
            // 行号栏的当前行
            "editorActiveLineNumber.foreground": "#9CA5B4",
            // 行号
            "editorLineNumber.foreground": "#777",
            // 标尺
            "editorRuler.foreground": "#3f3f3f",
            // 快捷提示窗口
            "editorSuggestWidget.highlightForeground": "#7bfc5ba2",
            "editorSuggestWidget.selectedBackground": "#333f5c",
            // 单击一个词时，其它相同单词
            "editor.selectionHighlightBackground": "#ffe7921c",
            "editor.selectionBackground": "#434e61c9",
            // "editor.selectionHighlightBorder": "#90e97259",
            // terminal 中的光标
            "terminalCursor.foreground": "#7bfc5bb9",
            // 侧边栏中一块区域的标题
            "sideBarSectionHeader.background": "#32363d",
            // 区域获取焦点时
            "focusBorder": "#5b99fc36"
        }
    },

    // 快速打开文件时，关闭预览模式，直接打开文件
    "workbench.editor.enablePreviewFromQuickOpen": false,

    // 单击侧边栏打开文件时，关闭预览模式，直接打开文件
    // "workbench.editor.enablePreview": false,

    // 隐藏右下角的笑脸、反馈按钮
    "workbench.statusBar.feedback.visible": false,

    // 隐藏 tab 栏文件名左侧的文件类型图标
    // "workbench.editor.showIcons": false,

    // 使用 ctrl 或 command 多选
    "editor.multiCursorModifier": "ctrlCmd",

    "workbench.startupEditor": "newUntitledFile",

    "diffEditor.ignoreTrimWhitespace": true,

    //
    "editor.snippetSuggestions": "top",

    // 字号
    "editor.fontSize": 14,

    // 字体
    // "editor.fontFamily": "Menlo, Monaco, 'Courier New', monospace",

    // 每行输入字符长度提示线
    "editor.rulers": [80, 100],

    // 光标宽度
    "editor.cursorWidth": 2,
    "editor.cursorBlinking": "smooth",

    // 当前行对应的行号栏也高亮显示
    "editor.renderLineHighlight": "all",

    // 右侧的 minimap
    // "editor.minimap.enabled": false, // 隐藏
    "editor.minimap.showSlider": "always", // 一直显示滚动条

    // 平滑滚动
    "editor.smoothScrolling": true,

    // 禁止滚动到文件最后一行后还能继续滚动
    "editor.scrollBeyondLastLine": false,

    // 禁止连接文字可点击，取消下划线
    "editor.links": false,

    // 基于编辑器设置的颜色主题，自定义语法着色
    "editor.tokenColorCustomizations": {
        "[One Monokai]": {
            "comments": "#6e7a70ea",
            "keywords": "#EB404EF7",
            "variables": "#FD971F",
            "strings": "#e2d75dbd",
            "functions": "#5b99fcc9",
            "numbers": "#AE81FF",
            "textMateRules": [
                // {
                //     "scope": "log,
                //     "settings": {
                //         "foreground": "#FF0000"
                //     },
                // }
            ]
        }
    }
}

内置插件设置

// Emmet 支持 react
"emmet.triggerExpansionOnTab": true,
"emmet.includeLanguages": {
    "javascript": "javascriptreact",
},

// html 中 style 属性里写 css 快速提示
"[html]": {
    "editor.quickSuggestions": {
        "other": false,
        "comments": false,
        "strings": true
    }
}

Visual Studio Code 基础设置

自定义配置

推荐第三方插件

猜你喜欢