DEV Community

Cover image for Your best vsc setup
lukas
lukas

Posted on

Your best vsc setup

Hey guys,
this is my first post after reading hundreds.

Today, I want to share with you my vsc setup with all my extensions I find useful. I created the public gist to have a fast vsc setup out of the box ready in under a minute and to not always install the extensions by hand.

From color themes, formatters and assistens to docker, git and bookmarks.

Maybe this setup doesn't fit your needs or it inlcudes to many extensions but it is defenetly a good overview of the top vsc extensions out there to accelerate your development.

Get the VSC Setup

To use this setup you need to config your vsc:

  1. Install Settings Sync in vsc
  2. (optional) Connect your github account by creating a new access token or use your current one (https://github.com/settings/tokens)
  3. Copy the public gist-id 02676ed1c28922c5d72671c2af81d07b and paste it in the 'Gist-ID' Settings Sync input field.

Demo Image

Or install the extensions with powershell by running the commands:

code --install-extension aaron-bond.better-comments
code --install-extension abusaidm.html-snippets
code --install-extension aeschli.vscode-css-formatter
code --install-extension ahmadawais.shades-of-purple
code --install-extension alefragnani.Bookmarks
code --install-extension alefragnani.project-manager
code --install-extension anseki.vscode-color
code --install-extension bradlc.vscode-tailwindcss
code --install-extension christian-kohler.npm-intellisense
code --install-extension christian-kohler.path-intellisense
code --install-extension codezombiech.gitignore
code --install-extension CoenraadS.bracket-pair-colorizer-2
code --install-extension Dart-Code.dart-code
code --install-extension Dart-Code.flutter
code --install-extension dbaeumer.vscode-eslint
code --install-extension donjayamanne.githistory
code --install-extension DotJoshJohnson.xml
code --install-extension dsznajder.es7-react-js-snippets
code --install-extension eamodio.gitlens
code --install-extension ecmel.vscode-html-css
code --install-extension emilast.LogFileHighlighter
code --install-extension enkia.tokyo-night
code --install-extension esbenp.prettier-vscode
code --install-extension file-icons.file-icons
code --install-extension formulahendry.auto-close-tag
code --install-extension formulahendry.auto-complete-tag
code --install-extension formulahendry.auto-rename-tag
code --install-extension foxundermoon.shell-format
code --install-extension golang.go
code --install-extension hollowtree.vue-snippets
code --install-extension kisstkondoros.vscode-gutter-preview
code --install-extension KnisterPeter.vscode-github
code --install-extension mhutchie.git-graph
code --install-extension mikestead.dotenv
code --install-extension ms-azuretools.vscode-docker
code --install-extension ms-dotnettools.csharp
code --install-extension ms-kubernetes-tools.vscode-kubernetes-tools
code --install-extension ms-vscode-remote.remote-containers
code --install-extension naumovs.color-highlight
code --install-extension octref.vetur
code --install-extension oderwat.indent-rainbow
code --install-extension p42ai.refactor
code --install-extension PKief.material-icon-theme
code --install-extension pranaygp.vscode-css-peek
code --install-extension rbbit.typescript-hero
code --install-extension redhat.vscode-yaml
code --install-extension ritwickdey.LiveServer
code --install-extension sdras.night-owl
code --install-extension sdras.vue-vscode-snippets
code --install-extension Shan.code-settings-sync
code --install-extension sidthesloth.html5-boilerplate
code --install-extension streetsidesoftware.code-spell-checker
code --install-extension syler.sass-indented
code --install-extension teabyii.ayu
code --install-extension vsblox.blox
code --install-extension wicked-labs.wvsc-serendipity
code --install-extension xabikos.JavaScriptSnippets
code --install-extension yzhang.markdown-all-in-one
code --install-extension ZainChen.json
code --install-extension Zignd.html-css-class-completion

Top comments (3)

Collapse
 
cavo789 profile image
Christophe Avonture

Settings sync is core since two years, no need to use it anymore.

You can create the same list by running
code --list-extensions | % { "code --install-extension $_" } in a Windows Powershell prompt.

This will generate something like that:

code --install-extension aaron-bond.better-comments
code --install-extension alefragnani.Bookmarks
code --install-extension bajdzis.vscode-twig-pack
code --install-extension bmewburn.vscode-intelephense-client
code --install-extension bobmagicii.autofoldyeah
Enter fullscreen mode Exit fullscreen mode

Share that list instead.

Collapse
 
lukasw12v profile image
lukas • Edited

Thanks for your advice!! But with my solution you can always get the latest version form the gist file by simply pressing Shift + Alt + D

Collapse
 
cavo789 profile image
Christophe Avonture

Yep and this can be a security concern too. Users should trust you. You can remove used extensions or add new ones perhaps bad ones. I really think nobody will work like this. Too risky.