DEV Community

Cover image for VS Code Extensions to become a more productive Developer 🤓🤓🤓

VS Code Extensions to become a more productive Developer 🤓🤓🤓

Benjamin Mock on October 12, 2020

Want to get better at Web Development 🚀🚀🚀? Subscribe to my weekly newsletter at https://codesnacks.net/subscribe/ These are some of the VS Code...
Collapse
 
oricis profile image
Moisés Alcocer

Markdown Preview Github Styling to visualize Markdown documents
Auto Rename Tag and htmltagwrap to write HTML / JSX
Code Spell Checker to write in English or other languages...
Git Graph to watch your Git history
...

Collapse
 
crocsx profile image
Federico Giacomini

Well I guess after checking this article and installing your new extension, you would find this one SUPER handy. It allow you to save you extension on a github gist, so you can import/export and quickly setup your environment on fresh VSCode installation =>

marketplace.visualstudio.com/items...

Collapse
 
mpressen profile image
Maximilien Pressensé

Settings Sync is now a previewed feature of Vs Code, already available in Vs Code Insiders. It works much better than the extension you're talking about (that I happily removed due to bad UX and bugs).
code.visualstudio.com/docs/editor/...
code.visualstudio.com/insiders/

Collapse
 
benjaminmock profile image
Benjamin Mock

Nice! Thanks for the hint!

Collapse
 
benjaminmock profile image
Benjamin Mock

That's indeed super handy. Thanks for the recommendation!

Collapse
 
yatki profile image
Mehmet Yatkı

Maybe this one helps someone too :)

GitHub logo yatki / vscode-surround

🔥A simple yet powerful extension to add wrapper templates around your code blocks

Surround

Visual Studio Marketplace Visual Studio Marketplace GitHub last commit License


A simple yet powerful extension to add wrapper templates around your code blocks

Features

  • Supports multi selections
  • Fully customizable
  • Custom wrapper functions
  • You can assign shortcuts for each wrapper function separately
  • Nicely formated

Demo 1: Choosing wrapper function from quick pick menu

Demo 1

Demo 2: Wrapping multi selections

Demo 2

How To Use

After selecting the code block, you can

  • right click on selected code
  • OR press (ctrl+shift+T) or (cmd+shift+T)

to get list of commands and pick one of them.

Hint

Each wrapper has a separate command so you can define keybindings for your favourite wrappers by searching surround.with.commandName in the 'Keyboard Shortcuts' section.

List of commands






























Command Snippet

surround.with (ctrl+shift+T)
List of all the enabled commands below
surround.with.if if ($condition) { ... }
surround.with.ifElse if ($condition) { ... } else { $else }
surround.with.tryCatch try { ... } catch (err) { $catchBlock }
surround.with.tryFinally try { ... } finally { $finalBlock




🚀🖖

Collapse
 
marian2js profile image
Mariano Pardo • Edited

Thanks for sharing this one. I'm sure I'm going to use the surrounding in <element></element> a lot.

Collapse
 
nicoespeon profile image
Nicolas Carlo

Oh yeah, Peacock & Prettier are really helpful to me! 🙏

Bracket Pair Colorizer is also the kind of extension you install, then you wonder how life was before!

I'm also the maintainer of an extension that provides automatic refactorings for JS & TS. It's called Abracadabra.

I like how I can extract/inline variables with a single keystroke ⚡

Example of extracting variables with Abracadabra

Collapse
 
boxpiperapp profile image
BOX PIPER

That’s awesome!
Polacode is new !

Collapse
 
flux profile image
Flux • Edited

never thought there is an extension like Peacock, thanks for sharing. by the way, you should try Comment anchors. it's an extensions to make a comments as a checkpoint when your code is just too much. Perfect to pair up with better comments.

Collapse
 
felipeschossler profile image
Felipe Schossler

I never though about some extension like Peacock too, and it's really useful.

Collapse
 
stephanedupuy profile image
Stéphane DUPUY

Thank you Benjamin to share your experiences

Collapse
 
hqjs profile image
hq

How about hqjs? A build tool and smart development server marketplace.visualstudio.com/items...

Collapse
 
chuchhin profile image
Jesús Sánchez

Thank you very much, I have installed many extensions that you recommend.

Collapse
 
benjaminmock profile image
Benjamin Mock

Cool stuff! Thanks for the recommendation! I'll do a part two and definitely add them.

Collapse
 
tabnine profile image
Tabnine

TabNine AI code completion is very helpful. TabNine is based on GPT-2 models, which provide some of the most amazing code predictions

Collapse
 
rakgenius profile image
Rakesh

For whatever reason, the intellisense doesnt work for huge java projects in vscode and forcing it to use it only for smaller projects

Collapse
 
ionutbuzatu profile image
Ionut Buzatu • Edited

Thank you for this article .
Was very helpfuly :)

Collapse
 
ionutbuzatu profile image
Ionut Buzatu

Thank you for this article . Was very helpfuly for me.
My favorite extensions are :

Collapse
 
taufik_nurrohman profile image
Taufik Nurrohman

Vim

Collapse
 
evgenijvasiliev profile image
Evgenij-Vasiliev

Спасибо.

Collapse
 
demaderios profile image
Greg DeMaderios

One more to add to the list: ES7 React/Redux/GraphQL/React-Native snippets.