寻找如下图所示关键字,windows系统一般在C:\Users\用户名\.vscode\extensions里,mac需要先显示隐藏文件夹,然后在.vscode\extensions里,打开主题里的OneDark-Pro.json文件进行修改
主要改了以下4个颜色
"editor.background": "#222",
"editor.lineHighlightBackground": "#333",
"tab.activeBorder": "#88d650",
"tab.hoverBorder": "#30a8f4",
One Dark Pro主题的整体配置(OneDark-Pro.json)
{
"name": "One Dark Pro",
"type": "dark",
"colors": {
"activityBar.background": "#21252B",
"activityBar.foreground": "#D7DAE0",
"activityBarBadge.background": "#4D78CC",
"activityBarBadge.foreground": "#F8FAFD",
"badge.background": "#282c34",
"button.background": "#404754",
"debugToolBar.background": "#21252b",
"dropdown.background": "#1d1f23",
"diffEditor.insertedTextBackground": "#00809B33",
"dropdown.border": "#181A1F",
"editor.background": "#222",
"editorError.foreground": "#c24038",
"editorIndentGuide.activeBackground": "#C8C8C859",
"editorMarkerNavigation.background": "#21252b",
"editorRuler.foreground": "#abb2bf26",
"editor.lineHighlightBackground": "#333",
"editor.selectionBackground": "#67769660",
"editor.selectionHighlightBackground": "#ffffff10",
"editor.selectionHighlightBorder": "#ddd",
"editorCursor.background": "#ffffffc9",
"editorCursor.foreground": "#528bff",
"editorBracketMatch.border": "#515a6b",
"editorBracketMatch.background": "#515a6b",
"editor.findMatchBackground": "#42557B",
"editor.findMatchBorder": "#457dff",
"editor.findMatchHighlightBackground": "#314365",
"editor.wordHighlightBackground": "#484e5b",
"editor.wordHighlightBorder": "#7f848e",
"editor.wordHighlightStrongBackground": "#abb2bf26",
"editor.wordHighlightStrongBorder": "#7f848e",
"editorGroup.background": "#181A1F",
"editorGroup.border": "#181A1F",
"editorGroupHeader.tabsBackground": "#21252B",
"editorIndentGuide.background": "#3B4048",
"editorLineNumber.foreground": "#495162",
"editorActiveLineNumber.foreground": "#737984",
"editorWhitespace.foreground": "#3B4048",
"editorHoverWidget.background": "#21252B",
"editorHoverWidget.border": "#181A1F",
"editorSuggestWidget.background": "#21252B",
"editorSuggestWidget.border": "#181A1F",
"editorSuggestWidget.selectedBackground": "#2c313a",
"editorWidget.background": "#21252B",
"focusBorder": "#21252b",
"input.background": "#1d1f23",
"list.activeSelectionBackground": "#2c313a",
"list.activeSelectionForeground": "#d7dae0",
"list.focusBackground": "#383E4A",
"list.hoverBackground": "#292d35",
"list.highlightForeground": "#C5C5C5",
"list.inactiveSelectionBackground": "#2c313a",
"list.inactiveSelectionForeground": "#d7dae0",
"peekViewEditor.matchHighlightBackground": "#29244b",
"scrollbarSlider.background": "#4e566660",
"scrollbarSlider.activeBackground": "#747D9180",
"scrollbarSlider.hoverBackground": "#5A637580",
"sideBar.background": "#21252b",
"sideBarSectionHeader.background": "#282c34",
"statusBar.background": "#21252B",
"statusBar.foreground": "#9da5b4",
"statusBarItem.hoverBackground": "#2c313a",
"statusBar.noFolderBackground": "#21252B",
"statusBar.debuggingBackground": "#7e0097",
"statusBar.debuggingBorder": "#66017a",
"statusBar.debuggingForeground": "#ffffff",
"tab.activeBackground": "#2c313a",
"tab.activeBorder": "#88d650",
"tab.border": "#181A1F",
"tab.inactiveBackground": "#21252B",
"tab.hoverBackground": "#323842",
"tab.hoverBorder": "#30a8f4",
"tab.unfocusedHoverBackground": "#323842",
"terminal.foreground": "#C8C8C8",
"terminal.ansiBlack": "#2D3139",
"terminal.ansiBlue": "#61AFEF",
"terminal.ansiGreen": "#98C379",
"terminal.ansiYellow": "#D19A66",
"titleBar.activeBackground": "#282c34",
"titleBar.activeForeground": "#9da5b4",
"titleBar.inactiveBackground": "#21252B",
"titleBar.inactiveForeground": "#6B717D"
},
...后面的颜色都没修改,此处省略
如果想把区块注释从斜体改成正常,在128行附近进行修改,italic改成normal即可
{
"name": "Comments",
"scope": "comment, punctuation.definition.comment",
"settings": {
"foreground": "#7F848E",
"fontStyle": "italic"
}
},
还有345行附近,适用于双斜杠的注释,italic改成normal即可
{
"name": "comment",
"scope": "comment.line.double-slash,comment.block.documentation",
"settings": {
"fontStyle": "italic"
}
},
}
常用插件
----------------个人设置------------
{
"workbench.colorTheme": "One Dark Pro",
"window.title": "${activeEditorLong}",
"window.zoomLevel": 0,
"editor.fontSize": 16,
"editor.fontWeight": "100",
"editor.autoClosingBrackets": "never",
"files.autoSave": "off",
"editor.emptySelectionClipboard": false,
"editor.renderIndentGuides": false,
"workbench.activityBar.visible": true,
"workbench.statusBar.visible": true,
"workbench.sideBar.location": "left",
"editor.minimap.enabled": true,
"editor.wordSeparators": "`~!@#$%^&*()=+[{]}\\|;:'\",.<>/?",
"editor.wordWrap": "on" ,
"editor.renderControlCharacters": true,
"editor.selectionHighlight": false,
"highlight-matching-tag.leftStyle": {
"borderWidth": "0 0 0 3px",
"borderStyle": "solid",
"borderColor": "green",
"borderRadius": "0px"
},
"highlight-matching-tag.rightStyle": {
"borderWidth": "0 3px 0 0",
"borderStyle": "solid",
"borderColor": "green",
"borderRadius": "0px"
},
"search.location": "panel",
"editor.colorDecorators": false,
"typescript.updateImportsOnFileMove.enabled": "always",
"javascript.updateImportsOnFileMove.enabled": "always",
"window.titleBarStyle": "custom",
"editor.formatOnType": true,
"editor.detectIndentation": false,
"editor.tabSize": 4,
"editor.find.autoFindInSelection": false,
}
highlight-matching-tag配置
安装highlight-matching-tag插件后,可以在用户设置中自定义配对光标
"highlight-matching-tag.leftStyle": {
"borderWidth": "0 0 0 3px",
"borderStyle": "solid",
"borderColor": "green",
"borderRadius": "0px"
},
"highlight-matching-tag.rightStyle": {
"borderWidth": "0 3px 0 0",
"borderStyle": "solid",
"borderColor": "green",
"borderRadius": "0px"
},
效果如下,配置了绿色border
快捷键设置
安装bracket-pair-colorizer插件后,可配合快捷键ctrl+m快速选中大括号内的所有代码
另外多行注释用了sublime风格的快捷键ctrl+shift+/
// Place your key bindings in this file to overwrite the defaults
[
{
"key": "ctrl+m",
"command": "bracket-pair-colorizer.expandBracketSelection"
},
{
"key": "ctrl+shift+/",
"command": "editor.action.blockComment",
"when": "editorTextFocus && !editorReadonly"
}
]