<?xml version="1.0" encoding="UTF-8"?><rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>extensions &#8211; Jakub Bajzath | Senior Frontend Developer</title>
	<atom:link href="https://hello.bajzath.cloud/tag/extensions/feed" rel="self" type="application/rss+xml" />
	<link>https://hello.bajzath.cloud</link>
	<description></description>
	<lastBuildDate>Mon, 27 Apr 2026 07:12:02 +0000</lastBuildDate>
	<language>en-US</language>
	<sy:updatePeriod>
	hourly	</sy:updatePeriod>
	<sy:updateFrequency>
	1	</sy:updateFrequency>
	<generator>https://wordpress.org/?v=7.0</generator>

<image>
	<url>https://hello.bajzath.cloud/wp-content/uploads/2026/04/icon-150x150.png</url>
	<title>extensions &#8211; Jakub Bajzath | Senior Frontend Developer</title>
	<link>https://hello.bajzath.cloud</link>
	<width>32</width>
	<height>32</height>
</image> 
	<item>
		<title>My Top 8 Must-Have Extensions for VSCode</title>
		<link>https://hello.bajzath.cloud/my-top-8-must-have-extensions-for-vscode</link>
					<comments>https://hello.bajzath.cloud/my-top-8-must-have-extensions-for-vscode#respond</comments>
		
		<dc:creator><![CDATA[jakub.bajzath]]></dc:creator>
		<pubDate>Mon, 27 Apr 2026 07:03:39 +0000</pubDate>
				<category><![CDATA[Programming]]></category>
		<category><![CDATA[Facts]]></category>
		<category><![CDATA[extensions]]></category>
		<category><![CDATA[programming]]></category>
		<category><![CDATA[vscode]]></category>
		<guid isPermaLink="false">https://hello.bajzath.cloud/?p=192</guid>

					<description><![CDATA[If you’re a programmer, you surely know that IDE extensions are among the most helpful tools. Personally, I’ve tried out several combinations, whether in PHPStorm or in my current setup—VSCode. I had to install a few for VSCode to achieve the same level of compatibility with VSCode; some are just nice-to-haves for me. Here are [&#8230;]]]></description>
										<content:encoded><![CDATA[
<p class="wp-block-paragraph">If you’re a programmer, you surely know that IDE extensions are among the most helpful tools. Personally, I’ve tried out several combinations, whether in PHPStorm or in my current setup—VSCode. I had to install a few for VSCode to achieve the same level of compatibility with VSCode; some are just nice-to-haves for me. Here are the TOP 8 extensions that I install automatically. The extensions aren’t listed in any particular order, but rather in the order I came across them while browsing.</p>



<h2 class="wp-block-heading">Error Lens</h2>



<div class="wp-block-columns is-layout-flex wp-container-core-columns-is-layout-8f761849 wp-block-columns-is-layout-flex">
<div class="wp-block-column is-vertically-aligned-top is-layout-flow wp-block-column-is-layout-flow" style="flex-basis:40%">
<figure class="wp-block-image size-large"><img fetchpriority="high" decoding="async" width="1024" height="357" src="https://hello.bajzath.cloud/wp-content/uploads/2026/04/image-1-1024x357.png" alt="" class="wp-image-196" srcset="https://hello.bajzath.cloud/wp-content/uploads/2026/04/image-1-1024x357.png 1024w, https://hello.bajzath.cloud/wp-content/uploads/2026/04/image-1-300x105.png 300w, https://hello.bajzath.cloud/wp-content/uploads/2026/04/image-1-768x268.png 768w, https://hello.bajzath.cloud/wp-content/uploads/2026/04/image-1.png 1318w" sizes="(max-width: 1024px) 100vw, 1024px" /></figure>
</div>



<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow" style="flex-basis:60%">
<p class="wp-block-paragraph">Error highlighting is one of the most common pain points in an IDE. You often only see errors when you hover over them in the IDE, or if you have a centralized error view. Error Lens lets you view errors directly in the working window and within the code. This way, you see errors immediately, can set their severity level and formatting, and it can even highlight spelling mistakes in addition to code errors. Thanks to this, you don’t have to click on individual errors—you see them right away.</p>



<div class="wp-block-buttons is-horizontal is-content-justification-left is-layout-flex wp-container-core-buttons-is-layout-42a159bf wp-block-buttons-is-layout-flex">
<div class="wp-block-button is-style-outline is-style-outline--1"><a class="wp-block-button__link wp-element-button" href="https://marketplace.visualstudio.com/items?itemName=usernamehw.errorlens" target="_blank" rel="noreferrer noopener">Link</a></div>
</div>
</div>
</div>



<hr class="wp-block-separator has-alpha-channel-opacity"/>



<h2 class="wp-block-heading">PHPStorm Dark Theme</h2>



<div class="wp-block-columns is-layout-flex wp-container-core-columns-is-layout-8f761849 wp-block-columns-is-layout-flex">
<div class="wp-block-column is-vertically-aligned-top is-layout-flow wp-block-column-is-layout-flow" style="flex-basis:40%">
<figure class="wp-block-image size-large"><img decoding="async" width="1024" height="358" src="https://hello.bajzath.cloud/wp-content/uploads/2026/04/image-2-1024x358.png" alt="" class="wp-image-207" style="object-fit:cover" srcset="https://hello.bajzath.cloud/wp-content/uploads/2026/04/image-2-1024x358.png 1024w, https://hello.bajzath.cloud/wp-content/uploads/2026/04/image-2-300x105.png 300w, https://hello.bajzath.cloud/wp-content/uploads/2026/04/image-2-768x269.png 768w, https://hello.bajzath.cloud/wp-content/uploads/2026/04/image-2.png 1237w" sizes="(max-width: 1024px) 100vw, 1024px" /></figure>
</div>



<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow" style="flex-basis:60%">
<p class="wp-block-paragraph">One of the first things I installed. For me, the Dark Theme in PHPStorm was the best I’d ever worked with, and I’d really gotten used to it. I tweaked it slightly for code highlighting (functions, blocks, constants, and the like) so that the theme would match the color scheme exactly as it was in PHPStorm. But the transition was practically completely intuitive, and I immediately felt right at home, just like in PHPStorm.</p>



<div class="wp-block-buttons is-horizontal is-content-justification-left is-layout-flex wp-container-core-buttons-is-layout-42a159bf wp-block-buttons-is-layout-flex">
<div class="wp-block-button is-style-outline is-style-outline--2"><a class="wp-block-button__link wp-element-button" href="https://marketplace.visualstudio.com/items?itemName=ericgomez.phpstorm-theme" target="_blank" rel="noreferrer noopener">Link</a></div>
</div>
</div>
</div>



<hr class="wp-block-separator has-alpha-channel-opacity"/>



<h2 class="wp-block-heading">Project Manager</h2>



<div class="wp-block-columns is-layout-flex wp-container-core-columns-is-layout-8f761849 wp-block-columns-is-layout-flex">
<div class="wp-block-column is-vertically-aligned-top is-layout-flow wp-block-column-is-layout-flow" style="flex-basis:40%">
<figure class="wp-block-image size-large"><img decoding="async" width="1024" height="352" src="https://hello.bajzath.cloud/wp-content/uploads/2026/04/image-3-1024x352.png" alt="" class="wp-image-212" srcset="https://hello.bajzath.cloud/wp-content/uploads/2026/04/image-3-1024x352.png 1024w, https://hello.bajzath.cloud/wp-content/uploads/2026/04/image-3-300x103.png 300w, https://hello.bajzath.cloud/wp-content/uploads/2026/04/image-3-768x264.png 768w, https://hello.bajzath.cloud/wp-content/uploads/2026/04/image-3.png 1239w" sizes="(max-width: 1024px) 100vw, 1024px" /></figure>
</div>



<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow" style="flex-basis:60%">
<p class="wp-block-paragraph">Organizing projects is very important to me. I want to keep my projects organized, choose which ones I want to view at the moment, and decide which ones to work on. Project Manager does exactly what I expect it to do. Whether the projects are Git-based or not, it organizes them, creates workspaces, and updates them automatically. The switch on the bottom bar then switches between individual projects, whether in the current working window or by creating new tabs.</p>



<div class="wp-block-buttons is-horizontal is-content-justification-left is-layout-flex wp-container-core-buttons-is-layout-42a159bf wp-block-buttons-is-layout-flex">
<div class="wp-block-button is-style-outline is-style-outline--3"><a class="wp-block-button__link wp-element-button" href="https://marketplace.visualstudio.com/items?itemName=alefragnani.project-manager" target="_blank" rel="noreferrer noopener">Link</a></div>
</div>
</div>
</div>



<hr class="wp-block-separator has-alpha-channel-opacity"/>



<h2 class="wp-block-heading">Regex Previewer</h2>



<div class="wp-block-columns is-layout-flex wp-container-core-columns-is-layout-8f761849 wp-block-columns-is-layout-flex">
<div class="wp-block-column is-vertically-aligned-top is-layout-flow wp-block-column-is-layout-flow" style="flex-basis:40%">
<figure class="wp-block-image size-large"><img decoding="async" width="1024" height="398" src="https://hello.bajzath.cloud/wp-content/uploads/2026/04/image-4-1024x398.png" alt="" class="wp-image-217" srcset="https://hello.bajzath.cloud/wp-content/uploads/2026/04/image-4-1024x398.png 1024w, https://hello.bajzath.cloud/wp-content/uploads/2026/04/image-4-300x117.png 300w, https://hello.bajzath.cloud/wp-content/uploads/2026/04/image-4-768x299.png 768w, https://hello.bajzath.cloud/wp-content/uploads/2026/04/image-4.png 1237w" sizes="(max-width: 1024px) 100vw, 1024px" /></figure>
</div>



<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow" style="flex-basis:60%">
<p class="wp-block-paragraph">You know how it is. You’re working with regular expressions. You need to test things here and there, check what matches you get against the pattern you’ve prepared, and so on. I personally used regex101, but I found it pretty inefficient to open a browser and test a regex every time I wanted to verify something. However, I found Regex Previewer. It lets you open any regex pattern in a side-by-side tab and test its matching capabilities there. If you have a batch of test cases—for example, multiple cases listed one after another—it will run them all at once and show you which ones pass and which ones fail.</p>



<div class="wp-block-buttons is-horizontal is-content-justification-left is-layout-flex wp-container-core-buttons-is-layout-42a159bf wp-block-buttons-is-layout-flex">
<div class="wp-block-button is-style-outline is-style-outline--4"><a class="wp-block-button__link wp-element-button" href="https://marketplace.visualstudio.com/items?itemName=chrmarti.regex" target="_blank" rel="noreferrer noopener">Link</a></div>
</div>
</div>
</div>



<hr class="wp-block-separator has-alpha-channel-opacity"/>



<h2 class="wp-block-heading">Git Prefix</h2>



<div class="wp-block-columns is-layout-flex wp-container-core-columns-is-layout-8f761849 wp-block-columns-is-layout-flex">
<div class="wp-block-column is-vertically-aligned-top is-layout-flow wp-block-column-is-layout-flow" style="flex-basis:40%">
<figure class="wp-block-image size-large"><img decoding="async" width="1024" height="599" src="https://hello.bajzath.cloud/wp-content/uploads/2026/04/image-6-1024x599.png" alt="" class="wp-image-220" srcset="https://hello.bajzath.cloud/wp-content/uploads/2026/04/image-6-1024x599.png 1024w, https://hello.bajzath.cloud/wp-content/uploads/2026/04/image-6-300x175.png 300w, https://hello.bajzath.cloud/wp-content/uploads/2026/04/image-6-768x449.png 768w, https://hello.bajzath.cloud/wp-content/uploads/2026/04/image-6.png 1231w" sizes="(max-width: 1024px) 100vw, 1024px" /></figure>
</div>



<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow" style="flex-basis:60%">
<p class="wp-block-paragraph">I work a lot with Git and also with JIRA—tasks, assignments, fixes, and the like. And since I’m a pretty organized person, I like to label everything with tags and indicators. I have a standard convention where I name branches after the task they’re assigned to, and I do the same with commits. So whenever I go to commit something after switching to VSCode, I used to manually prepend the branch name (in my case, the JIRA issue ID) to every commit message. And then I discovered Git Prefix. It does exactly the same thing. It checks your branch and prefixes the commit message with it. In the settings, you can also configure other indicators, set a default pattern, and so on.</p>



<div class="wp-block-buttons is-horizontal is-content-justification-left is-layout-flex wp-container-core-buttons-is-layout-42a159bf wp-block-buttons-is-layout-flex">
<div class="wp-block-button is-style-outline is-style-outline--5"><a class="wp-block-button__link wp-element-button" href="https://marketplace.visualstudio.com/items?itemName=srmeyers.git-prefix" target="_blank" rel="noreferrer noopener">Link</a></div>
</div>
</div>
</div>



<hr class="wp-block-separator has-alpha-channel-opacity"/>



<h2 class="wp-block-heading">Git Graph</h2>



<div class="wp-block-columns is-layout-flex wp-container-core-columns-is-layout-8f761849 wp-block-columns-is-layout-flex">
<div class="wp-block-column is-vertically-aligned-top is-layout-flow wp-block-column-is-layout-flow" style="flex-basis:40%">
<figure class="wp-block-image size-large"><img decoding="async" width="1024" height="513" src="https://hello.bajzath.cloud/wp-content/uploads/2026/04/image-7-1024x513.png" alt="" class="wp-image-222" srcset="https://hello.bajzath.cloud/wp-content/uploads/2026/04/image-7-1024x513.png 1024w, https://hello.bajzath.cloud/wp-content/uploads/2026/04/image-7-300x150.png 300w, https://hello.bajzath.cloud/wp-content/uploads/2026/04/image-7-768x385.png 768w, https://hello.bajzath.cloud/wp-content/uploads/2026/04/image-7.png 1249w" sizes="(max-width: 1024px) 100vw, 1024px" /></figure>
</div>



<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow" style="flex-basis:60%">
<p class="wp-block-paragraph">In my humble opinion, Git in VSCode is a bit less &#8220;over-the-top&#8221; than in PHPStorm. PHPStorm offered several helpers and tools that aren’t available in VSCode. One example is branch merging. PHPStorm automatically created a &#8220;middle commit&#8221; in cases like stalled branch conflicts. VSCode doesn’t do this, and you have to perform this intermediate step manually; otherwise, it won’t let you merge newer branches with conflicts into your branch. I got Git Graph from a colleague, and I have to admit that its UI is well-designed—it displays tagged branches clearly, with differences, and merging branches with conflicts is much easier for me.</p>



<div class="wp-block-buttons is-horizontal is-content-justification-left is-layout-flex wp-container-core-buttons-is-layout-42a159bf wp-block-buttons-is-layout-flex">
<div class="wp-block-button is-style-outline is-style-outline--6"><a class="wp-block-button__link wp-element-button" href="https://marketplace.visualstudio.com/items?itemName=mhutchie.git-graph" target="_blank" rel="noreferrer noopener">Link</a></div>
</div>
</div>
</div>



<hr class="wp-block-separator has-alpha-channel-opacity"/>



<h2 class="wp-block-heading">Vue (Official)</h2>



<div class="wp-block-columns is-layout-flex wp-container-core-columns-is-layout-8f761849 wp-block-columns-is-layout-flex">
<div class="wp-block-column is-vertically-aligned-top is-layout-flow wp-block-column-is-layout-flow" style="flex-basis:40%">
<figure class="wp-block-image size-large"><img decoding="async" width="1024" height="457" src="https://hello.bajzath.cloud/wp-content/uploads/2026/04/image-9-1024x457.png" alt="" class="wp-image-225" srcset="https://hello.bajzath.cloud/wp-content/uploads/2026/04/image-9-1024x457.png 1024w, https://hello.bajzath.cloud/wp-content/uploads/2026/04/image-9-300x134.png 300w, https://hello.bajzath.cloud/wp-content/uploads/2026/04/image-9-768x343.png 768w, https://hello.bajzath.cloud/wp-content/uploads/2026/04/image-9.png 1243w" sizes="(max-width: 1024px) 100vw, 1024px" /></figure>
</div>



<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow" style="flex-basis:60%">
<p class="wp-block-paragraph">Since Vue is my primary frontend framework, I use the official Vue plugin. The plugin offers all the necessary tools, such as syntax highlighting, autocomplete, type checking, and formatting (styles, code in SFCs). This plugin combines (and not just figuratively) the previous setup, which had two separate plugins for Vue 2 and Vue 3 (the well-known Volar). The Vue (Official) plugin merges the functionality of both into a single solution with cross-version support. However, some issues could not be resolved during the merger, so please check the Issues on GitHub that might affect you (especially older Vue 2 setups).</p>



<div class="wp-block-buttons is-horizontal is-content-justification-left is-layout-flex wp-container-core-buttons-is-layout-42a159bf wp-block-buttons-is-layout-flex">
<div class="wp-block-button is-style-outline is-style-outline--7"><a class="wp-block-button__link wp-element-button" href="https://marketplace.visualstudio.com/items?itemName=Vue.volar" target="_blank" rel="noreferrer noopener">Link</a></div>
</div>
</div>
</div>



<hr class="wp-block-separator has-alpha-channel-opacity"/>



<h2 class="wp-block-heading">Oxc</h2>



<div class="wp-block-columns is-layout-flex wp-container-core-columns-is-layout-8f761849 wp-block-columns-is-layout-flex">
<div class="wp-block-column is-vertically-aligned-top is-layout-flow wp-block-column-is-layout-flow" style="flex-basis:40%">
<figure class="wp-block-image size-large"><img decoding="async" width="1024" height="436" src="https://hello.bajzath.cloud/wp-content/uploads/2026/04/image-10-1024x436.png" alt="" class="wp-image-228" srcset="https://hello.bajzath.cloud/wp-content/uploads/2026/04/image-10-1024x436.png 1024w, https://hello.bajzath.cloud/wp-content/uploads/2026/04/image-10-300x128.png 300w, https://hello.bajzath.cloud/wp-content/uploads/2026/04/image-10-768x327.png 768w, https://hello.bajzath.cloud/wp-content/uploads/2026/04/image-10.png 1241w" sizes="(max-width: 1024px) 100vw, 1024px" /></figure>
</div>



<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow" style="flex-basis:60%">
<p class="wp-block-paragraph">Simply put, OXC is a formatter and linter on steroids. Not only does it combine these two core functionalities, but it’s also written in Rust, making it extremely fast compared to conventional linters (like ESLint) and formatters (like Prettier). It’s true that it still has some shortcomings, caused by the fact that not all rules have been migrated to the Oxc setup yet, so some features may be missing, but its development is active and fast, so a complete migration is only a matter of time. Additionally, Oxc offers a migrator, so your existing configurations can be migrated via the CLI, giving you a virtually one-click transition without major issues.</p>



<div class="wp-block-buttons is-horizontal is-content-justification-left is-layout-flex wp-container-core-buttons-is-layout-42a159bf wp-block-buttons-is-layout-flex">
<div class="wp-block-button is-style-outline is-style-outline--8"><a class="wp-block-button__link wp-element-button" href="https://marketplace.visualstudio.com/items?itemName=oxc.oxc-vscode" target="_blank" rel="noreferrer noopener">Link</a></div>
</div>
</div>
</div>
]]></content:encoded>
					
					<wfw:commentRss>https://hello.bajzath.cloud/my-top-8-must-have-extensions-for-vscode/feed</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
	</channel>
</rss>
