Vscode viene con Diablo Cool, que es bastante bueno, pero los ojos se cansarán después de mucho tiempo. Aquí está el tema del código vs que imita el tema verde suave de HBuilderX. El código es el siguiente.
Primer vistazo al renderizado final
Método de configuración
- ventanas: Ctrl + Shift+P
- macOS: Command + Shift+P
- Seleccione Abrir configuración (JSON) y copie el código en él
Bloque de código
{
"window.zoomLevel": 1, //窗口.缩放级别
"editor.tabSize": 2, //工作台主题颜色
"typescript.updateImportsOnFileMove.enabled": "always",
"editor.formatOnSave": true, // 保存时格式化
"breadcrumbs.enabled": false, // 开启 vscode 文件路径导航
// "tslint.autoFixOnSave": true, // #每次保存的时候将代码按tslint格式进行修复
"eslint.autoFixOnSave": true, // #每次保存的时候将代码按eslint格式进行修复
// "prettier.semi": false,//prettier 设置语句末尾不加分号
"prettier.singleQuote": true, // prettier 设置强制单引号
"vetur.format.defaultFormatter.js": "vscode-typescript", // #让vue中的js按编辑器自带的ts格式进行格式化
"window.enableMenuBarMnemonics": false,
"liveServer.settings.donotShowInfoMsg": true,
// "workbench.colorTheme": "Winter is Coming (Light)", //窗口.不启用菜单栏输入法,修改主题配色
// "workbench.colorTheme": "Visual Studio Light",
"workbench.colorTheme": "Default Light+",
//代码注释部分颜色
"editor.tokenColorCustomizations": {
"comments": "#95a3ab"
},
"workbench.colorCustomizations": {
"editorGroupHeader.tabsBackground": "#FFFAE8", // 标题栏未使用的地方
"editorLineNumber.foreground": "#9F9371", //代码行号颜色
"editor.lineHighlightBackground": "#E8DFC4", //代码选中高亮颜色
"editor.selectionBackground": "#BCD68D",
"editor.background": "#FFFAE8",
"editorIndentGuide.background": "#cecdc2", //代码对齐线颜色
//标题栏颜色设置
"titleBar.activeBackground": "#fffef9",
"titleBar.inactiveBackground": "#fffef9", //失去焦点时titlebar颜色
//活动栏颜色
//"activityBar.background": "#FFFAE8", //设置这个颜色图标显示不清楚
"activityBar.background": "#539c5f", //最左边的活动栏背景颜色
"activityBar.activeBorder": "#41A863", //好像没有什么用
//选项卡颜色设置
"tab.activeModifiedBorder": "#41A863",
"tab.hoverBackground": "#daeace",
"tab.border": "#fffae8",
"tab.activeBackground": "#41A863",
"tab.activeForeground": "#ffffff",
"tab.inactiveBackground": "#fffae8",
"tab.inactiveForeground": "#41A863",
//侧边栏颜色设置
"sideBarSectionHeader.background": "#FFFAE8",
"sideBar.background": "#FFFAE8",
"sideBarSectionHeader.foreground": "#AB7E05",
"sideBar.border": "#d8ca9e",
"sideBar.foreground": "#46433c",
"sideBarTitle.foreground": "#46433c",
//底部状态栏颜色设置
"statusBar.background": "#fffdf4",
//滚动条颜色
"scrollbarSlider.background": "#cfb56a",
"scrollbarSlider.hoverBackground": "#cfb56a",
"scrollbarSlider.activeBackground": "#cfb56a",
//终端窗口面板颜色设置
"panel.background": "#fffcf3",
"panel.border": "#d8ca9e",
//弹出小窗口：选项设置提示窗口，源代码补全窗口
"editorWidget.background": "#BCD68D", // 弹出小窗口的背景
"editorSuggestWidget.selectedBackground": "#e8dfc4", //代码提示选中行高亮
"list.hoverBackground": "#e8dfc4", // 鼠标所在行的颜色
"editorWidget.border": "#BCD68D", // 弹出小窗口的边框
"list.activeSelectionBackground": "#41A863", //侧边栏选中高亮
"list.inactiveSelectionBackground": "#d8ca9e" //侧边栏选中未获得焦点颜色
},
"editor.fontSize": 18,
"files.autoSave":"afterDelay",
"editor.wordWrap":"on",
}
SmartyPants
editor.rangeHighlightBackground resalta el color de fondo del rango, como las funciones "Apertura rápida" y "Buscar"
SmartyPants convierte los caracteres de puntuación ASCII en entidades HTML de puntuación impresas "inteligentes". P.ej:
| Icono | nombre del parámetro | efecto |
|---|---|---|
| 1 | activityBar.foreground | El color de primer plano de la barra de actividades (por ejemplo, para los iconos) |
| 2 | activityBar.background | Color de fondo de la barra de actividad |
| 3 | sideBarSectionHeader.background | El color de fondo del título de la sección de la barra lateral |
| 4 | sideBar.foreground | Color de primer plano de la barra lateral |
| 5 | fondo de la barra lateral | Color de fondo de la barra lateral |
| 6 | tab.inactiveForeground | El color de primer plano de la pestaña inactiva en el grupo activo |
| 7 | tab.inactiveBackground | El color de fondo de la pestaña inactiva |
| 8 | tab.activeForeground | El color de primer plano de la pestaña activa en el grupo activo |
| 9 | tab.activeBackground | El color de fondo de la pestaña activa |
| 10 | editorLineNumber.foreground | Color del número de línea del editor |
| 11 | editorGutter.background | El color de fondo de la línea de navegación del editor, la línea de navegación incluye símbolos de borde y números de línea |
| 12 | editor.background | Color de fondo del editor |
| 13 | editor.foreground | Color de primer plano predeterminado del editor |
| 14 | editorCursor.foreground | Color del cursor del editor |
| 15 | editor.lineHighlightBackground | El color de fondo del texto resaltado en la línea del cursor |
| dieciséis | editorBracketMatch.background | Coincide con el color de fondo de los corchetes |
| 17 | statusBar.background | Color de fondo de la barra de estado estándar |
| 17 | statusBar.noFolderBackground | El color de fondo de la barra de estado cuando la carpeta no está abierta |
| 17 | statusBar.debuggingBackground | El color de fondo de la barra de estado al depurar el programa |
| editor.findMatchBackground | El color de la coincidencia de búsqueda actual | |
| editor.findMatchHighlightBackground | Color de otras coincidencias de búsqueda | |
| editor.selectionBackground | Color de la selección del editor | |
| editor.selectionHighlightBackground | El color del área con el mismo contenido que el contenido seleccionado | |
| editor.rangeHighlightBackground | Resalte el color de fondo del rango, como las funciones "Apertura rápida" y "Buscar" |
Puede personalizar el color de acuerdo con el código de parámetro anterior.