最终效果预览
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 } }
推荐第三方插件
-
Paste and Indent
带格式的粘贴
# 1. 修改文件 keybindings.json,追加以下设置(ctrl+v 带格式;ctrl+shift+v 原样) [ { "key": "cmd+v", "command": "pasteAndIndent.action", "when": "editorTextFocus && !editorReadonly" }, { "key": "cmd+v", "command": "editor.action.clipboardPasteAction", "when": "!editorTextFocus" }, { "key": "cmd+shift+v", "command": "editor.action.clipboardPasteAction", "when": "editorTextFocus && !editorReadonly" } ] # 2. 修改用户配置 Preferences > Settings,追加如下设置 "pasteAndIndent.selectAfter": true,
-
PHP IntelliSense
PHP 语法检查、提示加强等
"php.executablePath": "/usr/local/bin/php", "php.suggest.basic": false,
-
PHP Debug
PHP 断点调试,详细配置单击这里
-
PHP DocBlocker
PHP 快速注释工具
-
Bracket Pair Colorizer
括号高亮
"editor.matchBrackets": false, "bracketPairColorizer.highlightActiveScope": true, "bracketPairColorizer.activeScopeCSS": [ "borderStyle : none", "backgroundColor : {color}; opacity: 0.5" ],