|
{ |
|
// Set the file editor button, search button, git, to show up at the bottom left rather than in the massive sidebar on the left side. Opens up a lot more space. |
|
"customizeUI.activityBar": "bottom", |
|
// Matching brackets will have the same color |
|
"editor.bracketPairColorization.enabled": true, |
|
// Code actions on save. You can see the available options by starting to type "source" in the JS object |
|
"editor.codeActionsOnSave": { |
|
// Adds missing imports on save |
|
"source.addMissingImports": true, |
|
// Executes all fixes such as missing a semicolon, other eslint complaints, etc. |
|
"source.fixAll": true, |
|
}, |
|
// Change editor font |
|
"editor.fontFamily": "'Fira Code', Menlo, Monaco, 'Courier New', monospace", |
|
// fontLigatures are when multiple characters appear into a single character. Personally I prefer to just have the default behavior of the text |
|
"editor.fontLigatures": false, |
|
// Changes how large the font size will be in the editor |
|
"editor.fontSize": 16, |
|
// Formats using our formatter after cmd + s (saving) |
|
"editor.formatOnSave": true, |
|
// Formats using our formatter after pasting code |
|
"editor.formatOnPaste": true, |
|
// When you edit an HTML tag the corresponding tag will get updated - only works in HTML files atm. As an intermediate "hack" you can use cmd + D twice while on a HTML tag or JSX/TSX element |
|
"editor.linkedEditing": true, |
|
// Disabled the right hand window showing where you are within the file. Personally I find it distracting but its personal preference. |
|
"editor.minimap.enabled": false, |
|
// Brightens a little bit the active level of indentation so you can see which level of indent you are on |
|
"editor.guides.highlightActiveIndentation": true, |
|
// Change default tab size to 2 since its a generally accepted standard. It seems like the VSCode default is 4 for some reason |
|
"editor.tabSize": 2, |
|
// Personal preference. Emmet is a set of keyboard shortcuts to auto generate various templates. I don't use it but others may. This just cleans up autocomplete a bit if you don't use it. |
|
"emmet.excludeLanguages": ["typescript", "typescriptreact", "javascript"], |
|
// Don't ask for confirmation when moving a file |
|
"explorer.confirmDragAndDrop": false, |
|
// Will constantly save your changes as you type (default delay is 1000ms). Note: This doesn't run formatters or auto imports, you need to manually do cmd + s for that. |
|
"files.autoSave": "afterDelay", |
|
// Trim trailing whitespace on save |
|
"files.trimTrailingWhitespace": true, |
|
// Gitlens settings: all personal preference. I honestly don't even remember setting these. |
|
"gitlens.blame.avatars": false, |
|
"gitlens.blame.compact": false, |
|
"gitlens.blame.format": "${author|10} ${date}", |
|
"gitlens.blame.heatmap.enabled": false, |
|
"gitlens.blame.highlight.locations": ["gutter", "line", "overview"], |
|
"gitlens.codeLens.enabled": false, |
|
// I remember setting this one. This disables the view of seeing the author within the code. I didn't want to constantly see the blame annotations as I'm typing. |
|
// I see the blame annotation at the bottom right of my screen to the left of the current line / column info |
|
"gitlens.currentLine.enabled": false, |
|
"gitlens.defaultDateFormat": "DD/MM/YYYY", |
|
"gitlens.defaultDateShortFormat": "DD/MM/YYYY", |
|
"gitlens.hovers.currentLine.over": "line", |
|
"gitlens.hovers.enabled": false, |
|
"html.autoClosingTags": true, |
|
// Tell VSCode to use the prettier standard & config when running formatting. |
|
"[javascriptreact]": { |
|
"editor.defaultFormatter": "esbenp.prettier-vscode" |
|
}, |
|
// these are needed so that when auto importing via autocomplete suggest or "quick fix", the correct absolute path import is provided as the path |
|
"javascript.preferences.importModuleSpecifier": "non-relative", |
|
"javascript.suggest.autoImports": true, |
|
"javascript.updateImportsOnFileMove.enabled": "always", |
|
"typescript.preferences.importModuleSpecifier": "non-relative", |
|
"typescript.suggest.autoImports": true, |
|
"typescript.updateImportsOnFileMove.enabled": "always", |
|
// Helps the Jest Runner extension. Jest Runner provides a tiny little UI with a "run" and "debug" button above jest tests so you can run that test with one click. |
|
"jestrunner.jestCommand": "yarn test", |
|
// Safe to ignore |
|
"security.workspace.trust.untrustedFiles": "open", |
|
// Changes the font size of the |
|
"terminal.integrated.fontSize": 14, |
|
// The zoom level changes how large everything appears within the window. Default is 0 so I increased it slightly to make it easier on my eyes to read the top file bar, the sidebar, etc. |
|
"window.zoomLevel": 0.75, |
|
// These are some custom colors that I ported over from my settings in Jetbrains IDE that I like, but all personal preference. |
|
"workbench.colorCustomizations": { |
|
"editor.background": "#202c33", |
|
// "sideBar.foreground": "#fff", |
|
// "sideBar.background": "#393d3e", |
|
// "sideBarSectionHeader.border": "#393d3e", |
|
"tab.activeBackground": "#424d42", |
|
"tab.hoverBackground": "#212324" |
|
// "tab.inactiveBackground": "#393d3e", |
|
// "titleBar.activeBackground": "#393d3e" |
|
}, |
|
// Preferred color theme |
|
"workbench.colorTheme": "One Dark Pro", |
|
// Your last searched thing in the command palette will pop up and highlighted so that you don't need to type the same thing again if you close it |
|
"workbench.commandPalette.preserveInput": true, |
|
// I disabled all the "preview" stuff because I didn't really like the interface of previewing a block of code and I'd rather navigate to the file directly |
|
"workbench.editor.enablePreview": false, |
|
"workbench.editor.enablePreviewFromQuickOpen": false, |
|
"workbench.editor.enablePreviewFromCodeNavigation": false, |
|
// These 2 values ensure that we don't have more than 8 files open in the top editor at a time. I ran into an issue of having a ton of overflow before so this forces me to "not have too many tabs" |
|
"workbench.editor.limit.enabled": true, |
|
"workbench.editor.limit.value": 8, |
|
// Not sure what this does |
|
"workbench.editor.untitled.hint": "hidden", |
|
// If there isnt enough room for the files display at the top, it will wrap the tabs rather than overflowing on one line |
|
"workbench.editor.wrapTabs": true, |
|
// This enables horizontal scrolling in the file explorer on the left side. Useful for highly nested files. |
|
"workbench.list.horizontalScrolling": true, |
|
// Sets an icon theme to the vs-nomo-dark. I prefer vs-nomo-dark purely because it supports better differentation between js(x) and ts(x) than material does. If you prefer material icon theme, go with that. |
|
"workbench.iconTheme": "vs-nomo-dark", |
|
// Your last searched thing in the file search will pop up and highlighted so that you don't need to type the same thing again if you close it |
|
"workbench.quickOpen.preserveInput": true, |
|
// Some material icon theme customizations. |
|
"material-icon-theme.folders.theme": "classic", |
|
"material-icon-theme.folders.color": "#90a4ae", |
|
"material-icon-theme.activeIconPack": "react", |
|
"workbench.preferredDarkColorTheme": "One Dark Pro", |
|
// You can add CSS to VSCode to make certain custom styles |
|
"customizeUI.stylesheet": { |
|
// https://stackoverflow.com/a/70026531 |
|
// This style which I added ensures that the command palette widget / file search will show up a part way down your screen so you don't need to look up so high to see it |
|
".quick-input-widget": "top: 30% !important;border-radius:10px!important;" |
|
// ".quick-input-widget .quick-input-header": "padding:0px!important;margin-bottom:10px;", |
|
// ".quick-input-widget .monaco-inputbox": "padding:10px !important;border-radius:5px!important;", |
|
// ".quick-input-widget .monaco-list-rows": "top: 0 !important;max-height:670px;min-height:300px;", |
|
// ".quick-input-widget .monaco-list-row": "position:static!important;border-bottom: 1px solid #333942;padding:5px!important;height:auto!important;", |
|
// ".quick-input-widget .quick-input-list-entry": "position:relative;padding:0 5px 0px 15px;", |
|
// ".quick-input-widget .quick-input-list-entry .codicon[class*=codicon-]": "font-size:12px;", |
|
// ".quick-input-widget .quick-input-list-entry .monaco-action-bar": "position:absolute;left:0;", |
|
// ".quick-input-widget .quick-input-list-entry .quick-input-list-label": "max-width: 80%;", |
|
// ".quick-input-widget .quick-input-list .quick-input-list-entry.quick-input-list-separator-border": "border-top-width:0px!important;" |
|
}, |
|
} |
"customizeUI.activityBar": "bottom",
is now"workbench.activityBar.location": "bottom"