{"componentChunkName":"component---src-templates-blog-template-blog-template-js","path":"/blog/Best-VS-Code-Extensions","result":{"data":{"blog":{"createdAt":"November 21st, 2020","title":"Best VS Code Extensions","id":"eac9bd98-e194-59d1-b26c-b68960c1ccd5","overview":"Using an IDE these days comes with big helpers like extensions, to name a few. Extensions are helpers or software that makes developing or coding much more quick and effective.","slug":"Best-VS-Code-Extensions","author":"Philane Msibi - UI/UX Designer and Software Engineer","content":{"childMarkdownRemark":{"html":"<p><img src=\"//images.ctfassets.net/d8xmlp2haryb/3zUnxOR6rHOCtdec6GTfqQ/db6cb6612ef5cb163440cfa24a36c60e/photo-1516101922849-2bf0be616449\" alt=\"photo-1516101922849-2bf0be616449?ixlib=rb-1.2.1&#x26;ixid=eyJhcHBfaWQiOjEyMDd9&#x26;auto=format&#x26;fit=crop&#x26;w=1100&#x26;q=80\"></p>\n<h2>What are VS Code Extensions?</h2>\n<p>Extensions are software addons that help get things done faster and without much effort. Exmaples are an HTML tag matching extension, that helps in inserting a matching HTML tag without you manually writing it yourself, the extension just adds it for you. There are many extensions that developers use for quicker coding, choosing colors, fonts, etc. So I will be going through 5 VS Code Extensions that bring productivity to a developer.</p>\n<h4>1. Live Server</h4>\n<p>This is a best extension for booting up a local server, which watches every change you make on your files, be it HTML, CSS, JS and it hot reloads and updates your web page on your browser to see your latest changes. This is also best as I mostly use it with THREEJS, as it was said that it is recommended to loads your THREEJS apps on a server and no experience CORS errors and some stuff. </p>\n<h4>2. Code intellisense</h4>\n<p>This is also the best tool to use for givng you code intellisense for a partcular language you are coding with. So it gives you hints whenever you code, for example, if you write a string variable and press \".\", it will show a popup(Intellisense) with all the operations, properties and functions you can use on that particular string variable or object.</p>\n<h4>3. Color Pallete or Picker</h4>\n<p>This is awesome when choosing colors for your app, it has support for color opacity, transparency, darken, lighten of a color and some even allow you pick colors from images or webpages. It allow you to also save your colors.</p>\n<h4>4. Language Support/ Compiler</h4>\n<p>This is a best best best tool also for adding support of your favourite language. Most of us used CodeBlocks for C++, Visual Studio for C#, Pycharm for Python but VS Code has support for multiple languages. I have added support for more languages I use and its awesome.</p>\n<h4>5. Prettier</h4>\n<p>This is an awesome tool for code formatting and code using rules you personally define. It allows you to specify how many spaces are your tabs, etc. Most developers use this extension for its code formatting ability and some language or frameworks just come embedded with this extension.</p>\n<h3>Conclusion</h3>\n<p>Extension have us developers code effictively and not wasting time on manual labour while we should be focusing on more important stuff. So I will be adding more extensions I use later on. Sharp!</p>"}}}},"pageContext":{"slug":"Best-VS-Code-Extensions"}},"staticQueryHashes":[]}