VS code Plugins and built-ins to boost productivity (with previews)
Tags: webdev, vscode, codequality, productivity
Published: 2021-04-13 23:44:34

<p>Are you trying to setup your workspace so as to ease your work and boost your productivity? This is for you</p>
<p>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!😅.</p>
<p>Here are some extensions that I have found <i>truly </i><b>useful</b> in my learning journey.</p>
 <p><b>PS:</b> The text editor used here is visual studio codes...did I say that already?</p>
<h3>1. <a href="https://www.codereadability.com/automated-code-formatting-with-prettier/">Prettier</a></h3>
<p>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.</p>
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ktbqbq5usntt5vcax5qw.gif)
<p><a href="https://www.codereadability.com/automated-code-formatting-with-prettier/">How to set up Prettier plugin</a></p>

<h3>2. <a href="https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-rename-tag">Linked Editing</a></h3>
<p>VS code now has a built-in, called linked editing, separate from <a href='https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-rename-tag'>auto rename tag</a> 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.</p>
<p>Or on the UI, search for editor.linkedEditing your settings and enable it</p>
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vxe76f8sarbx5cdckg9x.png)
  
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/l299gy61k7phyhs3hrlu.gif)
<p><a href="https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-rename-tag">How to set up plugin</a></p>

<h3>3. <a href="https://ritwickdey.github.io/vscode-live-server/#:~:text=Right%20click%20on%20a%20HTML,to%20Open%20with%20Live%20Server%20.&text=Open%20a%20HTML%20file%20and,editor%20and%20choose%20the%20options.&text=Press%20F1%20or%20ctrl%2Bshift,Server%20to%20stop%20a%20server.">Live server</a></h3>
<p>This extension automatically refreshes the browser whenever you save your work. It is especially useful when working with html, css and js projects.</p>
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6hgj1bxzk7rv8yuosush.gif)
<p><a href="https://ritwickdey.github.io/vscode-live-server/#:~:text=Right%20click%20on%20a%20HTML,to%20Open%20with%20Live%20Server%20.&text=Open%20a%20HTML%20file%20and,editor%20and%20choose%20the%20options.&text=Press%20F1%20or%20ctrl%2Bshift,Server%20to%20stop%20a%20server.">How to set up plugin</a></p>

<h3>4. <a href="https://marketplace.visualstudio.com/items?itemName=CoenraadS.bracket-pair-colorizer-2">Bracket Pair Colorizer2</a></h3>
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8hhsiq0ixnqob5m1z0fv.png)
<p>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.</p>
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/w7idah2a865n6h5i8qwq.png)
<p><a href="https://marketplace.visualstudio.com/items?itemName=CoenraadS.bracket-pair-colorizer-2">How to set up plugin</a></p>

<h3>5. <a href="https://marketplace.visualstudio.com/items?itemName=oderwat.indent-rainbow"> Indent-rainbow</a></h3>
<p>This extension increases the readability of your code and makes it easy to browse throught your work.</p>
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0grszgsnbvsdj4qjxvaw.png)
<p><a href="https://marketplace.visualstudio.com/items?itemName=oderwat.indent-rainbow">How to set up plugin</a></p>

<h3>6. <a href="https://marketplace.visualstudio.com/items?itemName=christian-kohler.path-intellisense">Path intellisense</a></h3>
<p>This extension autocompletes file paths when referencing them in a link.</p>
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/k1sf1hdm8waojdfld4ds.gif)
<p><a href="https://marketplace.visualstudio.com/items?itemName=christian-kohler.path-intellisense">How to set up plugin</a></p>

<h3>7. <a href="https://marketplace.visualstudio.com/items?itemName=PKief.material-icon-theme">Material Icon Theme</a></h3>
<p>Material Icon Theme makes icons more obvious to the eye. So you can quicky identify different files types from each other.</p>
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kce9ijygk5g6wide4g5b.png)
<p><a href="https://marketplace.visualstudio.com/items?itemName=PKief.material-icon-theme">How to set up plugin</a></p>

<h3>8. <a href="https://marketplace.visualstudio.com/search?term=theme&target=VSCode&category=All%20categories&sortBy=Relevance">Theme</a></h3>
<p>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.</p>
<p>Personally, I like the <a href="https://marketplace.visualstudio.com/items?itemName=whizkydee.material-palenight-theme">Palenight theme.</a> It's quite elegant😏</p>
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2ipmwwjacutdiudj6li9.png)
<p><a href="https://marketplace.visualstudio.com/items?itemName=whizkydee.material-palenight-theme">How to set up plugin</a></p>
<br>
<p>Hey this is just a limited list of extensions you can find on VS code, there's so much more out there.</p>
<p>Comment down below on which extension you found(or think is) most useful as a beginner programmer.</p>

<p><b>Edited: </b>Thank you all for the corrections in your comments.</p>
                                              💞 Babi