Visual Studio Code is a source code editor developed by Microsoft for Windows, Linux and macOS. It includes support for debugging, embedded Git control and GitHub, syntax highlighting, intelligent code completion, snippets and code refactoring. It is highly customizable, allowing users to change the theme, keyboard shortcuts and preferences.
In this article I will share some of the best VS Code extensions for front end developers. These extensions are not only useful to web developers but it is helpful for all programmers who use VS Code as their primary source code editor. I will divide this article into two parts one contains best essential extensions while other contains must have extensions if you are a front end developer.
Table of Contents
Best Visual Studio Code Extensions For Front End Developer
Automating Log Messages
When it comes to log messages, the turbo-console-log extension has got your back. It automates the operation of writing meaningful log messages and inserts them automatically.
All 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. Keyboard shortcuts let you comment, uncomment, or delete all log messages from the current document.
Keeping Bundle Size Under Control
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. 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.
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. 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. A handy little helper.
Code Formatting, Automated
When writing code, a lot of time goes into formatting. Prettier automates the task for you. It removes all original styling and ensures that the outputted code conforms to a consistent style.
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. You decide if you want to apply it to all languages or alternatively you can define the ones you prefer to format manually. Also a great solution for teams who struggle finding a common style guide.
Useful Code Snippets (React, Vue, TypeScript, JQuery)
Are you tired of typing the snippets you frequently need over and over again, always from scratch? Here are some handy little helpers to ease the job. For Vue, be sure to check out Sarah Drasner’s Vue.js VS Code Snippets extension. It was built for real-world use and focuses on developer ergonomics instead of cataloguing API definitions.
Burke Holland provides you with a collection of essential React snippets and commands that he selected from his day-to-day React use. And if you’re looking for Angular snippets, John Papa has got you covered. His extension adds snippets for Angular for TypeScript and HTML to your VS Code setup.
These two might also come in handy: The JavaScript code snippets extension by Charalampos Karypidis contains snippets in ES6 syntax and supports both JavaScript and TypeScript. And, last but not least, Don Jayamanne’s jQuery code snippets feature over 130 jQuery snippets. Once installed, just type jq to get a list of all of them.
Write Your Own Code Snippets
There are a lot of code snippet plugins for different languages out there, but have you ever wondered how to define your own snippets in VS Code? Maurice Borgmeier summarized everything you need to know to get started.
Another great article on the topic comes from Rob O’Leary. He dives deeper into when and why to use snippets, takes a closer look at different types of snippets, how VS Code handles them, and, last but not least, how to write your own, of course.
best visual studio code extensions for html and css
HTML CSS Support
HTML CSS Support (and the next extension listed) provides intellisense in your HTML files based on the CSS that is included in your project or referenced remotely. Here’s a full list of features.
- Class attribute completion
- Id attribute completion
- Supports Zen Coding completion for class and id attributes
- Scans workspace folder for css and scss files
- Supports remote css files
One thing that really stands out about this one is that you can specify remote CSS files to cache as well. You can do this by adding the following setting. This example is refering the Bootstrap 4 CSS file.
"css.remoteStyleSheets": [
"https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css"
]
Copy
Intellisense for CSS Class Names
Intellisense for CSS Class Names provides similar functionality to the extension above. This one will also automatically pull classes from CSS referenced in your HTML files. This class definitions will also be available via intellisense when using Emmet as well!
At any point, you can trigger a re-cache of the classes from your CSS files by opening up the Command Palette.
Autoprefixer
Having to prefix certain CSS properties to ensure browser support can be an extreme hassle. If it weren’t for the workflows already configured with Create React App, Angular CLI, etc. I would completely forget to add the vendor prefixes.
Autoprefixer will automatically add vendor prefixes to make sure your app looks as good as possible in different browsers. It’s crazy simple. Open the Command Palette and call “Autoprefixer CSS”.
CSS Peek
If you’re anything like me, I hate having to toggle over to my .css file to check the properties attached to a class or id. With CSS Peek, you can view a hover image of your CSS from within you HTML file.
This extension also turns class names and ids into a hyper link that takes you directly to that class or id definition in your CSS!
Conclusion
Let us know your thoughts in the comment section below.
Check out other publications to gain access to more digital resources if you are just starting out with Flux Resource.
Also contact us today to optimize your business(s)/Brand(s) for Search Engines