20 Useful VS Code Extensions for Frontend Developers in 2021
Tags: javascript, beginners, codenewbie, webdev
Published: 2021-02-17 00:02:03


<p name="e3b5" id="e3b5" class="graf graf--p graf-after--h4">Visual Studio Code combines the simplicity of a source code editor with powerful developer tooling, like IntelliSense code completion and debugging.</p><p name="a95f" id="a95f" class="graf graf--p graf-after--p">First and foremost, it is an editor that gets out of your way. The delightfully frictionless edit-build-debug cycle means less time fiddling with your environment, and more time executing your ideas.</p><figure name="0b32" id="0b32" class="graf graf--figure graf-after--p"><img class="graf-image" data-image-id="0*2ZGnEwQcXW6VqrR-" data-width="5000" data-height="3333" data-unsplash-photo-id="t5YUoHW6zRo" data-is-featured="true" src="https://cdn-images-1.medium.com/max/800/0*2ZGnEwQcXW6VqrR-"><figcaption class="imageCaption">Photo by <a href="https://unsplash.com/@barnimages?utm_source=medium&amp;utm_medium=referral" data-href="https://unsplash.com/@barnimages?utm_source=medium&amp;utm_medium=referral" class="markup--anchor markup--figure-anchor" rel="photo-creator noopener" target="_blank">Barn Images</a> on <a href="https://unsplash.com?utm_source=medium&amp;utm_medium=referral" data-href="https://unsplash.com?utm_source=medium&amp;utm_medium=referral" class="markup--anchor markup--figure-anchor" rel="photo-source noopener" target="_blank">Unsplash</a></figcaption></figure><p name="9292" id="9292" class="graf graf--p graf-after--figure">There are thousands of extensions in the visual studio Marketplace, I am coming with some extensions which are really helpful in my frontend development journey.</p><h4 name="f52d" id="f52d" class="graf graf--h4 graf-after--p">1. Visual Studio IntelliCode</h4><p name="4fb8" id="4fb8" class="graf graf--p graf-after--h4">The <a href="https://go.microsoft.com/fwlink/?linkid=872679" data-href="https://go.microsoft.com/fwlink/?linkid=872679" class="markup--anchor markup--p-anchor" rel="noreferrer noopener nofollow noopener" target="_blank">Visual Studio IntelliCode</a> extension provides AI-assisted development features for Python, TypeScript/JavaScript, and Java developers in Visual Studio Code, with insights based on understanding your code context combined with machine learning.</p><figure name="90b2" id="90b2" class="graf graf--figure graf-after--p"><img class="graf-image" data-image-id="0*kkixaJCDpFhe6_ie.png" data-width="1404" data-height="828" src="https://cdn-images-1.medium.com/max/800/0*kkixaJCDpFhe6_ie.png"></figure><p name="8c69" id="8c69" class="graf graf--p graf-after--figure">IntelliCode saves you time by putting what you’re most likely to use at the top of your completion list. IntelliCode recommendations are based on thousands of open source projects on GitHub each with over 100 stars. When combined with the context of your code, the completion list is tailored to promote common practices.</p><p name="fe43" id="fe43" class="graf graf--p graf-after--p">IntelliCode will assist you across different JavaScript libraries, whether you’re writing client-side code with frameworks like React, Angular, or Vue or doing server-side development with Node.js.</p><div name="d769" id="d769" class="graf graf--mixtapeEmbed graf-after--p"><a href="https://marketplace.visualstudio.com/items?itemName=VisualStudioExptTeam.vscodeintellicode" data-href="https://marketplace.visualstudio.com/items?itemName=VisualStudioExptTeam.vscodeintellicode" class="markup--anchor markup--mixtapeEmbed-anchor" title="https://marketplace.visualstudio.com/items?itemName=VisualStudioExptTeam.vscodeintellicode"><strong class="markup--strong markup--mixtapeEmbed-strong">Visual Studio IntelliCode - Visual Studio Marketplace</strong><br><em class="markup--em markup--mixtapeEmbed-em">Extension for Visual Studio Code - AI-assisted development</em>marketplace.visualstudio.com</a><a href="https://marketplace.visualstudio.com/items?itemName=VisualStudioExptTeam.vscodeintellicode" class="js-mixtapeImage mixtapeImage u-ignoreBlock" data-media-id="d121707e41a3c732be8a086713b531f7" data-thumbnail-img-id="0*Gn_QqTeCC-n2uakr" style="background-image: url(https://cdn-images-1.medium.com/fit/c/160/160/0*Gn_QqTeCC-n2uakr);"></a></div><h4 name="2956" id="2956" class="graf graf--h4 graf-after--mixtapeEmbed">2. ESLint</h4><p name="5e06" id="5e06" class="graf graf--p graf-after--h4">ESLint is the officially recommended Cypress plugin that will run linting via ESLint on your spec files and display linting errors in your cypress source code.</p><p name="d2de" id="d2de" class="graf graf--p graf-after--p">When you are working with visual studio code if your cypress code has any format, style, spelling related errors, these errors can be get fixed using the extension ESLint.</p><p name="692b" id="692b" class="graf graf--p graf-after--p">This Plugin supports on</p><ul class="postList"><li name="4129" id="4129" class="graf graf--li graf-after--p">Improved TypeScript detection</li><li name="de13" id="de13" class="graf graf--li graf-after--li">Glob working directory support</li><li name="1ae1" id="1ae1" class="graf graf--li graf-after--li">Formatter support: ESLint can now be used for formating.</li><li name="8612" id="8612" class="graf graf--li graf-after--li">Improved Auto Fix on Save</li></ul><figure name="00ed" id="00ed" class="graf graf--figure graf-after--li"><img class="graf-image" data-image-id="1*dK064WFjjI0-dqXTYjJu0w.png" data-width="1785" data-height="960" src="https://cdn-images-1.medium.com/max/800/1*dK064WFjjI0-dqXTYjJu0w.png"></figure><div name="a7c3" id="a7c3" class="graf graf--mixtapeEmbed graf-after--figure"><a href="https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint" data-href="https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint" class="markup--anchor markup--mixtapeEmbed-anchor" title="https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint"><strong class="markup--strong markup--mixtapeEmbed-strong">ESLint - Visual Studio Marketplace</strong><br><em class="markup--em markup--mixtapeEmbed-em">Integrates ESLint into VS Code. If you are new to ESLint check the documentation. The extension uses the ESLint library…</em>marketplace.visualstudio.com</a><a href="https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint" class="js-mixtapeImage mixtapeImage u-ignoreBlock" data-media-id="94140b6d0dfbe6dd3267b4eb7d47021b" data-thumbnail-img-id="0*svAzxgugDyjzUu8k" style="background-image: url(https://cdn-images-1.medium.com/fit/c/160/160/0*svAzxgugDyjzUu8k);"></a></div><h4 name="c9fb" id="c9fb" class="graf graf--h4 graf-after--mixtapeEmbed">3. JavaScript (ES6) code snippets</h4><p name="271d" id="271d" class="graf graf--p graf-after--h4">This extension contains code snippets for JavaScript in ES6 syntax for <a href="https://code.visualstudio.com/" data-href="https://code.visualstudio.com/" class="markup--anchor markup--p-anchor" rel="noreferrer noopener nofollow noopener" target="_blank">Vs Code</a> editor (supports both JavaScript and TypeScript).</p><figure name="5b75" id="5b75" class="graf graf--figure graf-after--p"><img class="graf-image" data-image-id="1*LgB3vQHdR8VVKJg7G0541w.png" data-width="1773" data-height="831" src="https://cdn-images-1.medium.com/max/800/1*LgB3vQHdR8VVKJg7G0541w.png"></figure><div name="4c44" id="4c44" class="graf graf--mixtapeEmbed graf-after--figure"><a href="https://marketplace.visualstudio.com/items?itemName=xabikos.JavaScriptSnippets" data-href="https://marketplace.visualstudio.com/items?itemName=xabikos.JavaScriptSnippets" class="markup--anchor markup--mixtapeEmbed-anchor" title="https://marketplace.visualstudio.com/items?itemName=xabikos.JavaScriptSnippets"><strong class="markup--strong markup--mixtapeEmbed-strong">JavaScript (ES6) code snippets - Visual Studio Marketplace</strong><br><em class="markup--em markup--mixtapeEmbed-em">Extension for Visual Studio Code - Code snippets for JavaScript in ES6 syntax</em>marketplace.visualstudio.com</a><a href="https://marketplace.visualstudio.com/items?itemName=xabikos.JavaScriptSnippets" class="js-mixtapeImage mixtapeImage u-ignoreBlock" data-media-id="a0c232ca8535909c3c2901f2a8e906c8" data-thumbnail-img-id="0*OsY91rca3oFv7D7O" style="background-image: url(https://cdn-images-1.medium.com/fit/c/160/160/0*OsY91rca3oFv7D7O);"></a></div><h4 name="abbf" id="abbf" class="graf graf--h4 graf-after--mixtapeEmbed">4. Prettier — Code formatter</h4><p name="6d59" id="6d59" class="graf graf--p graf-after--h4">Consistent code formatting is the key if you working in multiple groups. It happens that sometimes it is getting tougher to read properly formatted code and it will get worst when you are comparing previous versions.</p><p name="18b9" id="18b9" class="graf graf--p graf-after--p">Prettier enforces a consistent style by parsing our code and re-prints it.</p><p name="dcb5" id="dcb5" class="graf graf--p graf-after--p">It can be configured to implement certain rules based on the requirements.</p><figure name="531e" id="531e" class="graf graf--figure graf-after--p"><img class="graf-image" data-image-id="1*iESv-kHehQ-rb6Nwqald1A.png" data-width="1841" data-height="835" src="https://cdn-images-1.medium.com/max/800/1*iESv-kHehQ-rb6Nwqald1A.png"></figure><div name="f203" id="f203" class="graf graf--mixtapeEmbed graf-after--figure"><a href="https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode" data-href="https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode" class="markup--anchor markup--mixtapeEmbed-anchor" title="https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode"><strong class="markup--strong markup--mixtapeEmbed-strong">Prettier - Code formatter - Visual Studio Marketplace</strong><br><em class="markup--em markup--mixtapeEmbed-em">Extension for Visual Studio Code - Code formatter using prettier</em>marketplace.visualstudio.com</a><a href="https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode" class="js-mixtapeImage mixtapeImage u-ignoreBlock" data-media-id="145edccd45d8e7a2c00a82d4ea657fc6" data-thumbnail-img-id="0*sZAqWK3mbBHywcz3" style="background-image: url(https://cdn-images-1.medium.com/fit/c/160/160/0*sZAqWK3mbBHywcz3);"></a></div><h4 name="dc53" id="dc53" class="graf graf--h4 graf-after--mixtapeEmbed">5. Live Share</h4><p name="f257" id="f257" class="graf graf--p graf-after--h4">Visual Studio Live Share enables you to collaboratively edit and debug with others in real-time, regardless of what programming languages you’re using or app types you’re building.</p><p name="d237" id="d237" class="graf graf--p graf-after--p">It allows you to instantly (and securely) share your current project, and then as needed, share debugging sessions, terminal instances, localhost web apps, voice calls, and more!</p><p name="c317" id="c317" class="graf graf--p graf-after--p">Developers that join your sessions receive all of their editor context from your environment (e.g. language services, debugging), which ensures they can start productively collaborating immediately, without needing to clone any repos or install any SDKs.</p><figure name="9948" id="9948" class="graf graf--figure graf-after--p"><img class="graf-image" data-image-id="1*l_NEKWfryAdEAmNSvxjXeg.png" data-width="1819" data-height="858" src="https://cdn-images-1.medium.com/max/800/1*l_NEKWfryAdEAmNSvxjXeg.png"></figure><div name="1cee" id="1cee" class="graf graf--mixtapeEmbed graf-after--figure"><a href="https://marketplace.visualstudio.com/items?itemName=MS-vsliveshare.vsliveshare-pack" data-href="https://marketplace.visualstudio.com/items?itemName=MS-vsliveshare.vsliveshare-pack" class="markup--anchor markup--mixtapeEmbed-anchor" title="https://marketplace.visualstudio.com/items?itemName=MS-vsliveshare.vsliveshare-pack"><strong class="markup--strong markup--mixtapeEmbed-strong">Live Share Extension Pack - Visual Studio Marketplace</strong><br><em class="markup--em markup--mixtapeEmbed-em">If you&#39;re not already familiar with Visual Studio Live Share, refer here for more information. This extension pack…</em>marketplace.visualstudio.com</a><a href="https://marketplace.visualstudio.com/items?itemName=MS-vsliveshare.vsliveshare-pack" class="js-mixtapeImage mixtapeImage u-ignoreBlock" data-media-id="250900467d0f5a6d89850a3d731ef4e6" data-thumbnail-img-id="0*JiJ83c6hkFVDw26I" style="background-image: url(https://cdn-images-1.medium.com/fit/c/160/160/0*JiJ83c6hkFVDw26I);"></a></div></div></div></div></section>
</section>

##[Continue reading on Medium »](https://medium.com/javascript-in-plain-english/20-useful-vs-code-extensions-for-frontend-developers-in-2021-8f0c6c5c9e50)
</article></body></html>

[![](https://cdn-images-1.medium.com/max/2600/0*2ZGnEwQcXW6VqrR-)](https://medium.com/javascript-in-plain-english/20-useful-vs-code-extensions-for-frontend-developers-in-2021-8f0c6c5c9e50?source=rss-795bd33d705------2)

The most useful extensions for VS Code for Frontend Development

[Continue reading on JavaScript in Plain English »](https://medium.com/javascript-in-plain-english/20-useful-vs-code-extensions-for-frontend-developers-in-2021-8f0c6c5c9e50?source=rss-795bd33d705------2)