DEV Community

Cover image for My VSCode Config
Shwetha
Shwetha

Posted on • Edited on

My VSCode Config

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

  1. Duplicate selection or line - keyboard shortcut for duplication (cmd/ctrl+d)
  2. GitLens - essential when working with teams
  3. Error Lens - inlines errors for better dev experience
  4. Import Cost - tells you the size of imported package, pretty useful for performance improvements
  5. Kill Process - kill a process from vscode menu
  6. Project Dashboard - quick overview of all your projects for easy navigation
  7. Decompiler - decompiles stuff, useful for debugging
  8. Toggle Zen Mode - adds a button for enabling zen mode so you don't have to remember the shortcut
  9. Bracket Select - quickly select code in between brackets
  10. Auto Rename Tag - rename pair of tags automatically
  11. vscode-icons - icons for most file extensions you can think of
  12. 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
Enter fullscreen mode Exit fullscreen mode

Additional Resources

  1. 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)

Collapse
 
lovestaco profile image
Athreya aka Maneshwar

Project Dashboard was good.

I'll share a few extensions which helped me.

  1. Name: autoDocstring - Python Docstring Generator Link: marketplace.visualstudio.com/items...
  2. Name: Better Comments Link: marketplace.visualstudio.com/items...
  3. Name: Code Spell Checker Link: marketplace.visualstudio.com/items...
  4. Name: Color Highlight Link: marketplace.visualstudio.com/items...
  5. Name: Image preview Link: marketplace.visualstudio.com/items...
  6. Name: Live Preview Link: marketplace.visualstudio.com/items...
  7. Name: VSCode Great Icons Link: marketplace.visualstudio.com/items...
  8. Name: WakaTime Link: marketplace.visualstudio.com/items...
  9. Name: Window Colors Link: marketplace.visualstudio.com/items...
  10. Name: Remote - SSH Link: marketplace.visualstudio.com/items...
Collapse
 
namingthingsishard profile image
Shwetha

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

Collapse
 
mrdanishsaleem profile image
Danish Saleem

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"
  }
}

Enter fullscreen mode Exit fullscreen mode
Collapse
 
namingthingsishard profile image
Shwetha

No judgement here, minimalist configs rule!

Collapse
 
mrdanishsaleem profile image
Danish Saleem

Yep, I like to keep it minimalistic.

Collapse
 
walfal profile image
Walfal

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
Enter fullscreen mode Exit fullscreen mode

}

Collapse
 
namingthingsishard profile image
Shwetha

Thanks for the contribution! Definitely can see some extensions I use here, textmate is an extension as well, I'm assuming?

Collapse
 
walfal profile image
Walfal

Hi Shewtha,
No, it's inside the "editor.tokenColorCustomizations", "textMateRules" is for configuring advanced types of text

Collapse
 
yogini16 profile image
yogini16

Thank you for sharing !!

Collapse
 
best_codes profile image
Best Codes

Informative! I love it.

Collapse
 
namingthingsishard profile image
Shwetha

Thank you for the kind words!

Collapse
 
mohmmadview profile image
mohammadRahgoshahi
Collapse
 
namingthingsishard profile image
Shwetha

Ohh this is cool! Can we pick specifically which ones we want here? Definitely have to try this out sometime.

Collapse
 
get_pieces profile image
Pieces 🌟

This is a 🔥 config. Love this.

Collapse
 
namingthingsishard profile image
Shwetha

Thank you! :D