Hi fellow devs,
For my first post, I'm just documenting my VSCode configurations here for posterity's sake or just for my reference later. Keep in mind that this list is going to be language agnostic and more so utility/aesthetic suggestions (though these are inevitably tied to what languages I work with, so take that as you will). Please feel free to suggest any good extensions that I've missed out on or your absolute must-haves!
Extensions
- Duplicate selection or line - keyboard shortcut for duplication (cmd/ctrl+d)
- GitLens - essential when working with teams
- Error Lens - inlines errors for better dev experience
- Import Cost - tells you the size of imported package, pretty useful for performance improvements
- Kill Process - kill a process from vscode menu
- Project Dashboard - quick overview of all your projects for easy navigation
- Decompiler - decompiles stuff, useful for debugging
- Toggle Zen Mode - adds a button for enabling zen mode so you don't have to remember the shortcut
- Bracket Select - quickly select code in between brackets
- Auto Rename Tag - rename pair of tags automatically
- vscode-icons - icons for most file extensions you can think of
- Dracula Official - my preferred VSCode theme
Now, on to aliases. This isn't part of VSCode; it's git. But I've included it here anyway as the two do complement each other. Here's the alias section of my .gitconfig file.
[alias]
ac = !git add -A && git commit -m
cd = !git checkout develop
cm = !git checkout master
pd = !git pull origin develop
pm = !git pull origin master
cn = !git checkout -b
Additional Resources
That's all for my first post folks. Thanks for reading and have a nice day! ✨
Top comments (15)
Project Dashboard was good.
I'll share a few extensions which helped me.
👀 Definitely see some items on this list that I want to check out, thanks for the info!
Here's mine VSCode configuration settings. It's not that pretty fancy:
No judgement here, minimalist configs rule!
Yep, I like to keep it minimalistic.
Here is my settings.json, if you want to take some ideas:
{
"editor.cursorStyle": "line",
"editor.cursorBlinking": "expand",
"editor.fontSize": 20,
"editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.formatOnSave": true,
"editor.formatOnSaveMode": "modificationsIfAvailable",
"editor.suggestSelection": "first",
"editor.tabCompletion": "on",
"editor.insertSpaces": true,
"editor.tabSize": 4,
"editor.detectIndentation": false,
"editor.minimap.enabled": false,
"editor.fontFamily": "'Fira Code'",
"editor.fontLigatures": "'ss01', 'cv14', 'ss04', 'cv18', 'cv31', cv29', 'cv30', 'cv21', 'cv25', 'cv28', 'cv32', 'cv27', 'ss10', 'zero', 'onum'",
"editor.fontWeight": 400,
"editor.tokenColorCustomizations": {
"comments": "#55f",
"strings": "#0f0",
"keywords": "#c0c",
"types": "#f84",
"variables": "#aff",
"functions": "#0ff",
"numbers": "#ff0",
"textMateRules": [
{
"scope": "keyword.operator",
"settings": {
"foreground": "#f00"
}
},
{
"scope": "punctuation",
"settings": {
"foreground": "#f00"
}
},
{
"scope": "variable.other.constant",
"settings": {
"foreground": "#5bc"
}
},
{
"scope": "variable.other.property",
"settings": {
"foreground": "#ccc"
}
},
{
"scope": "variable.parameter",
"settings": {
"foreground": "#fc7"
}
}
]
},
"editor.bracketPairColorization.enabled": true,
"editor.guides.bracketPairs": true,
"editor.guides.bracketPairsHorizontal": true,
"editor.guides.highlightActiveBracketPair": true,
"editor.inlineSuggest.enabled": true,
"editor.unicodeHighlight.nonBasicASCII": false,
"editor.language.colorizedBracketPairs": [
["[", "]"],
["(", ")"],
["{", "}"],
[" <", ">\n"]
],
"workbench.editor.tabSizing": "shrink",
"workbench.iconTheme": "material-icon-theme",
"workbench.sideBar.location": "right",
"workbench.colorCustomizations": {
"[Default Dark+]": {
"editor.background": "#000"
},
"editorBracketHighlight.foreground1": "#c000ff",
"editorBracketHighlight.foreground2": "#00f",
"editorBracketHighlight.foreground3": "#00c0ff",
"editorBracketHighlight.foreground4": "#00ff80",
"editorBracketHighlight.foreground5": "#ffff00",
"editorBracketHighlight.foreground6": "#ff4000",
"editorBracketHighlight.foreground7": "#ff0080",
"editorBracketHighlight.unexpectedBracket.foreground": "#f00"
},
"indentRainbow.colors": [
"rgba(192, 0, 255, .25)",
"rgba( 0, 0, 255, .25)",
"rgba( 0, 192, 255, .25)",
"rgba( 0, 255, 128, .25)",
"rgba( 64, 255, 0, .25)",
"rgba(255, 255, 0, .25)",
"rgba(255, 64, 0, .25)",
"rgba(255, 0, 128, .25)"
],
"files.exclude": {
"/.classpath": false,
"/.project": true,
"/.settings": true,
"/.factorypath": true
},
"files.autoSave": "afterDelay",
"javascript.format.insertSpaceAfterConstructor": false,
"prettier.printWidth": 120,
"prettier.useTabs": true,
"prettier.withNodeModules": true,
"prettier.singleQuote": true,
"prettier.bracketSpacing": false,
}
Thanks for the contribution! Definitely can see some extensions I use here, textmate is an extension as well, I'm assuming?
Hi Shewtha,
No, it's inside the "editor.tokenColorCustomizations", "textMateRules" is for configuring advanced types of text
Thank you for sharing !!
Informative! I love it.
Thank you for the kind words!
pack frontend marketplace.visualstudio.com/items...
Ohh this is cool! Can we pick specifically which ones we want here? Definitely have to try this out sometime.
This is a 🔥 config. Love this.
Thank you! :D