Prettier parses your code and re-formats it with its own rules, taking the maximum line length into account and wrapping the code when necessary. Prettier, a quite opinionated (but friendly) code formatter that formats code as you press Save. It removes all original styling and ensures that the outputted code conforms to a consistent style. When writing code, a lot of time goes into formatting. To do so, it gives you instant feedback by displaying the size of an imported third-party library as you’re importing it, right next to your line of code.

Import Cost isn’t a bundle analysis tool but was built with the idea to help you find possible performance bottlenecks before you ship them to your users. Keep your bundle size under control, with import-cost. To keep your bundle size under control, the Import Cost extension lets you immediately know if you’re importing a hefty package into your project.

We all know that performance matters, but in practice, it can be quite a challenge not to lose it out of sight when you’re in the flow of writing code. Keyboard shortcuts let you comment, uncomment, or delete all log messages from the current document. Insert meaningful log messages automatically, with turbo-console-log.Īll you need to do is select the variable which you want to debug, press Ctrl + Alt + L, and the log message will be inserted in the next line. It automates the operation of writing meaningful log messages and inserts them automatically. When it comes to log messages, the turbo-console-log extension has got your back. Table of Contentsīelow you’ll find quick jumps to specific extensions that you might need. In this post, we look into useful VS Code extensions for front-end development, from fine productivity boosters to advanced debugging helpers. Perhaps finding the right file takes too long, or finding a matching closing bracket becomes a long-winded adventure on its own. We spend so much time in our text editors, and every now and again we encounter those little frustrating issues that slow us down. Recently, we’ve also covered CSS auditing tools, CSS generators and accessible front-end components - you might find them useful, too. Meet useful Visual Studio Code extensions for web developers: little helpers to minimize slow-downs and frustrations, and boost developer’s workflow along the way.

Visual studio code format color comment