My VSCode Config

#vscode #config #tooling #webdev

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

https://www.smashingmagazine.com/2018/01/visual-studio-code/

That's all for my first post folks. Thanks for reading and have a nice day! ✨

Top comments (15)

Athreya aka Maneshwar • Feb 19

Project Dashboard was good.

I'll share a few extensions which helped me.

Name: autoDocstring - Python Docstring Generator Link: marketplace.visualstudio.com/items...
Name: Better Comments Link: marketplace.visualstudio.com/items...
Name: Code Spell Checker Link: marketplace.visualstudio.com/items...
Name: Color Highlight Link: marketplace.visualstudio.com/items...
Name: Image preview Link: marketplace.visualstudio.com/items...
Name: Live Preview Link: marketplace.visualstudio.com/items...
Name: VSCode Great Icons Link: marketplace.visualstudio.com/items...
Name: WakaTime Link: marketplace.visualstudio.com/items...
Name: Window Colors Link: marketplace.visualstudio.com/items...
Name: Remote - SSH Link: marketplace.visualstudio.com/items...

Shwetha • Feb 19

👀 Definitely see some items on this list that I want to check out, thanks for the info!

Danish Saleem • Feb 21

Here's mine VSCode configuration settings. It's not that pretty fancy:

{
  "editor.renderWhitespace": "all",
  "editor.snippetSuggestions": "top",
  "editor.fontLigatures": true,
  "editor.formatOnSave": true,
  "files.trimTrailingWhitespace": true,
  "files.trimFinalNewlines": true,
  "workbench.iconTheme": "material-icon-theme",
  "terminal.integrated.defaultProfile.windows": "PowerShell",
  "terminal.integrated.fontFamily": "'FiraCode Nerd', 'Inconsolata for Powerline', monospace",
  "php.validate.executablePath": "C:/xampp/php/php.exe",
  "eslint.run": "onType",
  "[html]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[css]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[jsonc]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  }
}

Shwetha • Feb 21

No judgement here, minimalist configs rule!

Danish Saleem • Feb 22

Yep, I like to keep it minimalistic.

Walfal • Feb 20

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,

"code-runner.saveFileBeforeRun": true,
"code-runner.executorMap": {
    "javascript": "node",
    "java": "cd $dir && javac $fileName -d ../bin/ && cd ../bin; java $fileNameWithoutExt; cd ../src",
    "c": "cd $dir && gcc $fileName -o $fileNameWithoutExt && $dir$fileNameWithoutExt",
    "cpp": "cd $dir && g++ $fileName -o $fileNameWithoutExt && $dir$fileNameWithoutExt",
    "objective-c": "cd $dir && gcc -framework Cocoa $fileName -o $fileNameWithoutExt && $dir$fileNameWithoutExt",
    "php": "php",
    "python": "python3 -u",
    "go": "go run",
    "shellscript": "bash",
    "csharp": "scriptcs",
    "typescript": "ts-node",
    "r": "Rscript"
},
"liveServer.settings.donotVerifyTags": true,
"liveServer.settings.donotShowInfoMsg": true,

"emmet.showSuggestionsAsSnippets": true,
"emmet.excludeLanguages": ["markdown", "php"],
"emmet.triggerExpansionOnTab": true,
"github.copilot.enable": {
    "*": false,
    "yaml": false,
    "plaintext": false,
    "markdown": false
},
"git-graph.defaultColumnVisibility": {
    "Commit": true,
    "Date": true,
    "Author": true
},
"javascript.updateImportsOnFileMove.enabled": "always",
"rust-analyzer.hover.actions.references.enable": true,
"[json]": {
    "editor.defaultFormatter": "vscode.json-language-features",
    "editor.tabSize": 2
},
"[rust]": {
    "editor.defaultFormatter": "rust-lang.rust-analyzer"
},
"vsintellicode.modify.editor.suggestSelection": "choseToUpdateConfiguration",
"diffEditor.hideUnchangedRegions.enabled": true

}