The Most Popular and Useful VS Code Extensions and Themes For Web Developers🔥
Dear friends, I have listed top-rated extensions and themes on Vscode, which are popular recently and are very useful for general use. But first of all, why Vscode?
Vs code, according to the StackOverflow survey, is by far the most popular development editor. Its popularity has increased by the growth of web development and features of vs code that meets developers’ needs. It is free and open-source, besides its simple and lightweight architecture. There are some other reasons for its popularity, but this is another article’s topic. 🙂
To use the Vscode editor effectively, efficiently, and in a way you like, you should use some extensions. As a full-stack web developer, I want to list popular extensions and themes. Let’s have started.🚀
Gitlens is one of the most popular and useful extensions. It’s main features :
· Navigation backward and forward through the history of a file for revision
· Showing the commit info at the end of the line such as author, change time, and other details,
· shows author over file or code blocks,
It contains many other useful optional features for projects that require collaborative work with team members.
2. Prettier
Prettier is a code formatter. It formats by parsing your code and re-printing it with its own rules that take the maximum line length into account.
Basically, the readability of your code increases, so it is useful in writing clean code. As a bonus feature, writing code becomes more enjoyable with automatic format configuration for each saves.
*You have to set it as the default formatter in your VS Code settings.
3. Live Server
It is a vital and useful feature to see the changes you make to your code instantly. The Live server meets this need very well with the live reload feature for static-dynamic pages by creating a local server. Some of its’ main features:
A Quick Development Live Server with live browser reload.
Start or Stop the server with a single click from the status bar.
Open an HTML file to the browser from the Explorer menu.
Support for excluding files for change detection. etc.
4. Setting Sync
It is a massive waste of time and frustrating to rebuild the extensions and settings you use and adapt to your own when switching to another machine. To avoid this undesirable situation, we can use setting sync extension. Setting sync to synchronize settings, snippets, themes, file icons, launch, keybindings, workspaces, and extensions across multiple machines using Github gist. Some of the main features,
Use your Github account token and gist.
Easy to upload and download with one click.
Show a summary page at the end with details about config and extensions affected.
Auto downloads the latest settings on startup.
Auto upload settings on file change.
Sometimes, we couldn’t find the error we got because of a single parenthesis for a long time. With this extension, parenthesis management will be effortless. This extension allows matching brackets to be identified with colors. The user can define which characters to match and which colors to use. It is one of the beneficial extensions.
6.CSS Peek
This extension supports symbol definition tracking for CSS selectors such as classes, Ids, and tags. This includes:
Peek: load the CSS file inline and make quick edits right there. (Ctrl+Shift+F12)
Go To: jump directly to the CSS file or open it in a new editor (F12)
Hover: show the definition in a hover over the symbol (Ctrl+hover)
Besides, you can quickly jump to CSS code with this extension if you know the corresponding id or class name.
This extension checks the spell of the code.
With the spell checker extension, you can catch and correct common spelling errors. Some of the main features;
Finds and displays possible spelling errors in your code,
Has enabled and disable spell checker features,
Control ability can be increased with many features that can be configured,
You can create your dictionary and customize and improve it.
8. Peacock
This extension changes your VS code workspace color. if you have multiple VS Code instances or use VS Live Share or use VS Code’s Remote features, this extension will be handy.
Let’s see Peacock in action!
1- Create/Open a VSCode Workspace (Peacock only works in a Workspace)
2- Press F1 to open the command palette
3- Type Peacock
4- Choose Peacock: Change to a favorite color
5- Choose one of the pre-defined colors and see how it changes your editor
9. Quokka
It allows developers to execute their codes effectively by using different colors for each result. Also, runtime values are updated and displayed in your IDE next to your code as you type. The extension is straightforward to use and no need for any config. It will boost your workflow.
10.Snippets
As developers, most of our time is spent writing code. To use this time more efficiently, it would be beneficial to create code blocks and patterns by using shortcuts instead of writing the code patterns repeatedly and again. These extensions are doing precisely this. It doesn’t matter what language, framework, or library you use here. A snippet is available for you. I recommend you use it. When I work with React, it is among my indispensable extensions ES7 react snippets
You can compile or transpile Sass /Scss files to CSS files with Live Sass compiler extension in realtime by live browser reload.
Sass is very popular and this kind of extension will help you a lot. Some of the key features of Live Sass compiler:
Live SASS & SCSS Compile.
Customizable file location of exported CSS.
Live Reload to the browser (Dependency on Live Server extension).
Path Intellisense is a Visual Studio Code extension that autocompletes filenames.
Our projects or work can contain dozens of files, and accessing them when we need them can get complicated. Besides, it can take a long time to find the mistake we made in a path we wrote in our code. This extension is handy in terms of preventing such errors and making it easier for us. When you type a file path in a quotation, IntelliSense will automatically fill or show path suggestions for you.
This fantastic extension suggests smart code completion to developers. This way, it helps a lot to programmers an especially those who are new to coding.
This extension has AI-assisted IntelliSense, which employs various machine learning techniques to observe and find designs used in multiple open-source GitHub projects and suggest them while coding in the VS code. VS Code Intellisense has default support for Python, TypeScript/JavaScript, and Java languages.
The example below shows this in action for Python code.
If you want to write a markdown using VS Code, this extension suits you perfectly. It comes with its default support for features like live preview and syntax highlighting. In addition to these features, it contains many settings that you can arrange for yourself.
This extension allows you to create a console log code structure easily. In this way, it is handy during debugging. Insert meaningful log messages automatically. Two steps:
Selecting the variable which is the subject of the debugging
Pressing ctrl + alt + L
The selected variable will be inserted in the console log message meaningfully like this gif:
With this VS Code extension, you can debug your javascript codes in browsers such as Google Chrome browser that supports Chrome DevTools Protocol.
Setting breakpoints, including in source files when source maps are enabled
Stepping, including with the buttons on the Chrome page
The Locals pane
Debugging eval scripts, script tags, and scripts that are added dynamically
Watches
Console
18. TODO Highlight
With this VS Code extension, you can highlight annotations such as TODO in your code.
These types of annotations in your code may sometimes have trouble remembering or seeing. This extension is one of the most popular extensions that can help us in this regard.
19. ESLint
Eslint finds and fixes problems in your javascript code. If you don’t know about Eslint, you can read this document. This extension is one of the trendy extensions in VS Code (If you don’t believe me, you can look at install numbers:)
This extension finds and fixes problems and controls the standards you set when starting the project. If you want to write code with another institution’s standards, such as Google, you can use it from Eslint configurations.
20. CodeSnap
As a developer, interacting and sharing with others is very beneficial for you and the community. One of the useful extensions that will help you in this context is CodeSnap. You can take screenshots of your code and share it.
Some key features of CodeSnap :
Quickly save screenshots of your code.
Copy screenshots to your clipboard
Show line numbers
Many other configuration options
Themes and Icons
This extension is one of the most popular icon extensions, both visually and as able to better follow the file structure thanks to different icons.
It is a matter of interest to all of us, especially as web developers, that the environment we work with looks beautiful. This is the right extension for this purpose. You can see the example with the gif below
2. Monokai++
Working with the right theme is very important for my motivation. For this reason, I try many themes, and I decided on this trendy Monokai++ theme.
This is another trendy icon extension in VS Code. Some of the icon examples from the Material icon theme is here:
4. One Dark Pro
One Dar Pro is one of the most popular themes with its professional-looking view that does not tire the eyes.
This professionally crafted purple theme will add vitality and a pleasant look to your workspace. Shades of purple is one of the popular VSCode Themes in the marketplace.
CONCLUSION
As web developers, working by using the appropriate tools in the products we have developed will considerably increase our productivity. The extensions I mentioned above are popular extensions for VS Code, and in this context, they will increase your efficiency considerably. I hope you see the benefits.🙏🏼
