<!--DEBUG:--><!--DEBUG:dc3-united-states-software-in-english-pdf-2--><!--DEBUG:--><!--DEBUG:dc3-united-states-software-in-english-pdf-2--><!--DEBUG-spv-->{"id":1998534,"date":"2021-09-28T02:31:00","date_gmt":"2021-09-28T00:31:00","guid":{"rendered":"http:\/\/nhub.news\/?p=1998534"},"modified":"2021-09-28T05:03:13","modified_gmt":"2021-09-28T03:03:13","slug":"vs-code-extensions-for-frontend-developers","status":"publish","type":"post","link":"http:\/\/nhub.news\/de\/2021\/09\/vs-code-extensions-for-frontend-developers\/","title":{"rendered":"VS Code Extensions for Frontend Developers"},"content":{"rendered":"<p style=\"text-align: justify;\"><b>As a developer, it&#8217;s important to always look for cutting-edge tools, tricks, and extensions. Here are seven tools to help you increase your productivity.<\/b><br \/>\nJoin the DZone community and get the full member experience. As a developer, you\u2019re always looking for cutting-edge tools, tricks, and extensions to improve your productivity and efficiency. Being able to manage your time better is a valuable skill for software engineers. Therefore, here\u2019s a list of Visual Studio Code extensions that help frontend developers (and more!) to increase their productivity by at least 10 to 20%. Let\u2019s start with Sourcery! Sourcery is a valuable tool for Python developers who want to improve their coding style. Sourcery is like a personal assistant that gives coding tips on the fly. It will show you how to write better, cleaner Python code by offering refactoring suggestions. The extension runs in the background and will highlight snippets of code that can be improved by underlying them in blue. Here\u2019s an example created by Sourcery that shows how you can refactor a complex if-else statement. Again, this extension also comes with a pro version that offers more functionality like checking for duplicate code sections. It\u2019s an excellent extension for developers looking to improve their coding style with real-time code suggestions. Stepsize is an issue tracker inside your editor for managing technical debt and maintenance issues. When you come across technical debt that should be fixed but you don\u2019t have time to fix it right away, you can bookmark a piece of code or create an issue. Stepsize allows you to: Here\u2019s how you can bookmark the code and create an issue: It&#8217;s a great tool for teams who want to make technical debt visible and start reducing it. Many developers have probably already heard about Quokka.js, which serves as a quick playground for prototyping code. As a developer, I often ended up in a situation where I wanted to test a complex code snippet by prototyping it in a separate file to get more visibility into the inputs and outputs of what I had developed. That meant I had to create a new file, write the code, and execute it each time I made changes. Moreover, I added countless console.log statements to inspect the data format when moving through the function. At some point in my development career, a colleague recommended I start using Quokka.js. It takes away the file creation process and removes the process of logging data at each step. Quokka.js prints the output of each step within your editor and highlights incorrect code via inline reporting. In my opinion, it\u2019s a handy tool for prototyping code, and you can access it from the VS Code\u2019s command palette. However, it\u2019s worth knowing that Quokka.js also comes with a Pro version that offers you more features such as: In short, Quokka.js is a must-have extension for developers to prototype code rapidly. We don\u2019t want to promote paid subscriptions, yet Quokka\u2019s Pro version can save you even more time. \u201c Ponicode is an AI-powered extension pack that generates unit tests for you. It helps you create, visualize, and run unit tests for your functions quickly and easily, thanks to ML-generated test scenarios and an intuitive graphical interface.\u201d As you can read from Ponicode\u2019s description, the extension supports you in creating unit tests. Not only does it generate unit tests via machine learning algorithms, but it will also show you the most critical paths in your code. This information is crucial when optimizing your testing efforts by focusing on the most essential code paths. In other words, Ponicode optimizes your efforts to increase your code\u2019s robustness and helps to detect critical bugs early. Moreover, Ponicode suggests relevant inputs for your test scenarios to make them even more effective. Lastly, a GUI allows you to craft unit tests visually and automatically creates test files. It\u2019s definitely a timesaver! In short, it\u2019s a fantastic extension to save time writing tests for different inputs but also to find the most important code paths in your project. Almost every developer uses Stack Overflow on a daily basis to find answers to their coding questions. It\u2019s one of the most well-known websites for developers. Like myself, I often end up opening Stack Overflow to validate an idea or to find a better solution than the one I\u2019ve created. To save time, StackFinder allows you to look for answers on Stack Overflow from your VS Code editor. Besides that, you can copy solutions to your editor to try them out. It\u2019s a fast alternative for opening a browser filled with Stack Overflow tabs. Personally, I enjoyed using this solution as I don\u2019t have to leave my editor and can work more distraction-free! Check out this video to see how it works. Wallaby.js is from the same creators as Quokka.js. Wallaby.js is a developer productivity tool that runs your JavaScript and TypeScript tests immediately as you type, highlighting results in your IDE right next to your code. It\u2019s a valuable extension that shows you live results when coding your unit tests. I find it very helpful to see the output and debug tests in real-time. As you can see, Wallaby.js is similar to Quokka.js using the same inline reporting. Remote work has become the standard in many software organizations. Therefore, communication between developers has become more critical than ever before. The GitLive extension takes away some of the communication burden remote teams experience. With GitLive, you can connect to your team members to see which repositories, branches, or files they are working on. Moreover, you can connect your issue tracking software to GitLive to share which ticket you\u2019re focusing on. It\u2019s a great tool for remote development teams to see who\u2019s working on what and to avoid merge conflicts. For instance, if you are working on the same file for different branches or features, you can detect this with GitLive. In summary, the extension prevents merge conflicts before they occur. The main concern for developers to improve their productivity is removing distractions from their day-to-day activities. StackFinder is a fun and valuable extension to stay focused. Opening a web browser can trigger multiple pop-up notifications that distract you. Even StackOverflow can be a source of distraction. On the other hand, a team\u2019s efficiency depends on how well they communicate. Thus, an extension like Stepsize and GitLive are useful to improve communication. Published at DZone with permission of Alex Omeyer. See the original article here. Opinions expressed by DZone contributors are their own.<\/p>\n<script>jQuery(function(){jQuery(\".vc_icon_element-icon\").css(\"top\", \"0px\");});<\/script><script>jQuery(function(){jQuery(\"#td_post_ranks\").css(\"height\", \"10px\");});<\/script><script>jQuery(function(){jQuery(\".td-post-content\").find(\"p\").find(\"img\").hide();});<\/script>","protected":false},"excerpt":{"rendered":"<p>As a developer, it&#8217;s important to always look for cutting-edge tools, tricks, and extensions. Here are seven tools to help you increase your productivity. Join the DZone community and get the full member experience. As a developer, you\u2019re always looking for cutting-edge tools, tricks, and extensions to improve your productivity and efficiency. Being able to [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":1998533,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[93],"tags":[],"_links":{"self":[{"href":"http:\/\/nhub.news\/de\/wp-json\/wp\/v2\/posts\/1998534"}],"collection":[{"href":"http:\/\/nhub.news\/de\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/nhub.news\/de\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/nhub.news\/de\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/nhub.news\/de\/wp-json\/wp\/v2\/comments?post=1998534"}],"version-history":[{"count":1,"href":"http:\/\/nhub.news\/de\/wp-json\/wp\/v2\/posts\/1998534\/revisions"}],"predecessor-version":[{"id":1998535,"href":"http:\/\/nhub.news\/de\/wp-json\/wp\/v2\/posts\/1998534\/revisions\/1998535"}],"wp:featuredmedia":[{"embeddable":true,"href":"http:\/\/nhub.news\/de\/wp-json\/wp\/v2\/media\/1998533"}],"wp:attachment":[{"href":"http:\/\/nhub.news\/de\/wp-json\/wp\/v2\/media?parent=1998534"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/nhub.news\/de\/wp-json\/wp\/v2\/categories?post=1998534"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/nhub.news\/de\/wp-json\/wp\/v2\/tags?post=1998534"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}