尋找如下圖所示關鍵字,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": "`
 
[email protected]#$%^&*()=+[{]}\\|;:'\",.<>/?",
    "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"
    }
]