Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
My configs for VS Code
/* Sidebar - Explorer items */
.monaco-tree .monaco-tree-rows > .monaco-tree-row {
cursor: default;
}
/* Editor - Scrollbar */
.editor .monaco-scrollable-element > .scrollbar {
width: 12px !important;
}
/* Sidebar - Scrollbar */
.vs-dark .monaco-workbench .sidebar .monaco-scrollable-element > .scrollbar {
width: 6px !important;
}
.vs-dark .monaco-workbench .sidebar .vs-dark .monaco-scrollable-element > .scrollbar > .slider {
width: 6px !important;
}
/* Sidebar - Explorer colors */
.vs-dark .monaco-tree .monaco-tree-row.selected:not(.highlighted),
.vs-dark .monaco-tree.focused .monaco-tree-row.selected:not(.highlighted),
.vs-dark .monaco-tree.focused .monaco-tree-rows > .monaco-tree-row.focused:not(.highlighted),
.vs-dark .monaco-tree.focused .monaco-tree-rows > .monaco-tree-row.focused.selected:not(.highlighted) {
background-color: #363b3e;
color: #fff;
}
.vs-dark .monaco-tree .monaco-tree-row:hover:not(.highlighted):not(.selected):not(.focused) {
background-color: transparent;
color: #fff;
}
.vs-dark .monaco-workbench {
color: #aaa;
}
/* Tabs - Design */
.monaco-workbench > .part.editor > .content > .one-editor-silo > .container > .title .tabs-container > .tab > .tab-close,
.monaco-workbench > .part.editor > .content > .one-editor-silo > .container > .title .tabs-container > .tab > .tab-close .action-label {
opacity: 0.3;
}
.monaco-workbench > .part.editor > .content > .one-editor-silo > .container > .title .tabs-container > .tab > .tab-close:hover,
.monaco-workbench > .part.editor > .content > .one-editor-silo > .container > .title .tabs-container > .tab > .tab-close:hover .action-label {
opacity: 0.9;
}
.vs-dark .monaco-workbench > .part.editor > .content > .one-editor-silo > .container > .title .tabs-container > .tab:not(.active) {
background-color: transparent;
}
.vs-dark .monaco-workbench > .part.editor > .content > .one-editor-silo > .container > .title .tabs-container > .tab:not(.active):hover {
background-color: #2c2c2c;
}
.vs-dark .monaco-workbench > .part.editor > .content > .one-editor-silo > .container > .title .tabs-container > .tab:not(.active):hover .tab-label {
opacity: 0.7 !important;
}
.vs-dark .monaco-workbench > .part.editor > .content > .one-editor-silo > .container > .title.tabs {
background-color: #151515;
}
.vs-dark .monaco-workbench > .part.editor > .content > .one-editor-silo > .container > .title.active .tabs-container > .tab .tab-label a, .vs-dark .monaco-workbench > .part.editor > .content > .one-editor-container > .title.active .title-label a {
cursor: default;
}
.vs-dark .monaco-workbench > .part.editor > .content > .one-editor-silo > .container > .title.tabs:before {
border-top: none;
}
.monaco-editor.vs-dark .scroll-decoration,
.vs-dark .monaco-workbench .monaco-scrollable-element .shadow.top {
display: none;
}
/* Status bar */
.monaco-workbench > .part.statusbar {
background-color: #151515;
}
/* Sidebar - Design */
.vs-dark .monaco-workbench .sidebar,
.vs-dark .monaco-workbench > .sidebar > .title > .title-actions {
background-color: #2c2c2c;
}
.monaco-workbench > .part > .content {
font-size: 12px;
}
/* Activity bar - Colors */
.vs-dark .monaco-workbench > .activitybar > .content {
background-color: #1f1f20;
}
.monaco-workbench > .activitybar > .content .monaco-action-bar .action-label {
opacity: 0.4;
}

Plugins

~ » ls -1 ./.vscode/extensions | awk -F'.' '{print $2}' | sed 's/.[0-9]$//g' | sort | uniq | pbcopy

Oceanic-Next
PostCSS
Theme-OceanKit
annotator
auto-close-tag
beautify
bookmarks
color-highlight
copy-relative-path
editorconfig
ejs-language-support
emoji
file-icons
githistory
gitlens
gruvbox-themes
highlight-matching-tag
html-snippets
nord-visual-studio-code
npm-intellisense
path-intellisense
riot-tag
sort-lines
spacegray-vscode
stylelint
theme-base16-ocean
theme-dracula
theme-karyfoundation-themes-
theme-onedark
theme-onedark-sublime
tslint
vscode-auto-open-markdown-preview
vscode-babel-coloring
vscode-custom-css
vscode-eslint
vscode-great-icons
vscode-jest
vscode-npm-script
vscode-postcss-sorting
vscode-todo-highlight
xml
{
"workbench.activityBar.visible": false,
"editor.fontFamily": "Hack",
"editor.fontSize": 13,
"files.exclude": {
"**/.git": true,
"**/.svn": true,
"**/.hg": true,
"**/.DS_Store": true,
"node_modules/": true,
"build/": true
},
"zenMode.hideTabs": false,
"files.associations": {
"*.pcss": "css"
},
"vscode_custom_css.imports": [
"file:///Users/r3nya/.vscode/custom_style.css"
],
"editor.renderWhitespace": "all",
"files.autoSave": "onFocusChange",
"workbench.colorTheme": "Oceanic Next",
"editor.minimap.enabled": true,
"editor.dragAndDrop": true,
"editor.cursorStyle": "line-thin",
"editor.cursorBlinking": "solid",
"window.zoomLevel": 0,
"workbench.iconTheme": "vscode-great-icons",
"workbench.colorCustomizations": {
"statusBar.background": "#1a1a1a",
"statusBar.noFolderBackground": "#0A0A0D",
"statusBar.debuggingBackground": "#511f1f"
},
"editor.smoothScrolling": true
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.