Are you trying to setup your workspace so as to ease your work and boost your productivity? This is for you
When I started out, there was an overwhelming urge to test out every code editor there was, try out every shortcut and install every extension. Yeah, the excitement was immense!π .
Here are some extensions that I have found truly useful in my learning journey.
PS: The text editor used here is visual studio codes...did I say that already?
1. Prettier
Prettier integrates with your editor, so your code is tidied up every time you save your changes. It makes the code more readable and consistent with your project's style guide.
2. Linked Editing
VS code now has a built-in, called linked editing, separate from auto rename tag extension for editing a tag when its matching closing tag is modified.The command to enable linked editing is Start Linked Editing (Ctrl+Shift+F2) and Escape disables linked editing mode.
Or on the UI, search for editor.linkedEditing your settings and enable it
3. Live server
This extension automatically refreshes the browser whenever you save your work. It is especially useful when working with html, css and js projects.
4. Bracket Pair Colorizer2
This extension matches a bracket pair with a unique color. You'll find this extension quite useful when browsing through your code especially when you have several scopes deep in your code.
5. Indent-rainbow
This extension increases the readability of your code and makes it easy to browse throught your work.
6. Path intellisense
This extension autocompletes file paths when referencing them in a link.
7. Material Icon Theme
Material Icon Theme makes icons more obvious to the eye. So you can quicky identify different files types from each other.
8. Theme
It's always nice to enjoy your coding experience and you could definitely spice it by adding a theme and the good news is the is a long list from which you could pick according to your taste.
Personally, I like the Palenight theme. It's quite elegantπ
Hey this is just a limited list of extensions you can find on VS code, there's so much more out there.
Comment down below on which extension you found(or think is) most useful as a beginner programmer.
Edited: Thank you all for the corrections in your comments.
π Babi
Top comments (37)
I believe path intellisense is already supported
Sami no it isn't in VS code. It's a plugin.
However, editors like brackets do
If you have doubts check this stackover question
@babib VS Code has built-in support. The link you added is an old one. Auto Rename Tag isn't needed either. It's built-in. @sami_hd is right.
You can enable it by searching your settings for editor.linkedEditing
Oh, ok thanks a lot π
Hello Sami! Thanks for the correction π
I am a little confused by the fact that you used Shades of Purple VSCode theme's gif in the featured image and didn't mention it in the article at all. π€
It makes a pretty gif.
Doesn't make it OK. I'd suggest either you mention the theme or remove my theme's gif as otherwise it's misleading.
Nice article with list useful vs code extension.
You forgot to try Gitlens and Git Graph for Git operation in VS Code.
Also maybe you can try Mayukai Theme with balanced syntax coloring
Along with the LiveServer extension, I also strongly recommend the MongoDB for VS Code extension. Having a live playground for database documents, being able to live-edit them and view changes as my projects make them? It's huge.
If you write JavaScript try quokka.
quokkajs.com/
Quokka is awesome!
Thanks! I'll check it out
Pale night for the win
π
I installed Bracket Pair Colorizer2 and using it in a 400+ line file was not a good experience. It was kinda lagging when I tried to type a bit fast. All the colored lines were rendered, which I guess, spoiled the performance
The bracket pair colorizer is definitely a must
The auto-rename tag is actually pretty good! ill get it as soon as i get to my pc !
Nice
I think Kite copilot is great, it really helps me code.
and it's supported in VS code, Android studio, Atom, Sublime Text, and Vim
Yeah, it's a pretty dope plugin
I discover new useful extension for JS - 'Template String Converter'.
Description: Converts quotes to backticks when a $ and { are entered within quotes in JavaScript and TypeScript files
Oh wow. Nice!
Great collection. I love using indent rainbow to see where I am at inside code.
Thanks!
Hey there, thanks for the list. You may wanna try this little extension of mine too :) I've just released a new version.
π₯A simple yet powerful extension to add wrapper templates around your code blocks
Surround
A simple yet powerful extension to add wrapper snippets around your code blocks
Features
Demo 1: Choosing a wrapper snippet from quick pick menu
Demo 2: Wrapping multi selections
How To Use
After selecting the code block, you can
to get list of commands and pick one of them.
List of commands
surround.with(ctrl+shift+T)surround.with.ifsurround.with.ifElsesurround.with.tryCatchCheers, ππ
Ok Mehmet, I'll give it a go
Indent-rainbow is really helpful! βπ
Yes absolutely!
Some comments may only be visible to logged-in visitors. Sign in to view all comments.