today we're going to enhance your vs code to ensure that you've got the most efficient workspace available at your fingertips we'll cover the best settings and the themes that I personally use plus 16 extensions that are guaranteed to boost your productivity when you're developing let's hop into it when you download vs code for the first time you're probably severely underwhelmed by how it looks why doesn't it look the same as what I've seen in those flashy YouTube videos that I've been watching no need to worry because I'm going to run through some settings with you
now to make sure that we get your vs code looking nice and shiny okay right now I've just got a little bit of code here in a test. typescript file here so the first thing that I actually like to do when I hop into vs code is I actually like making the interface a little bit bigger so I think the text for me is a little bit small but it is completely up to preference so I am on a Mac right now so what I'll do is I'll just click command plus and I'll just do
that one time and it'll just bring everything uh out a little bit more the icons are a little bit bigger on the side panel there as well just makes everything to me a little bit easier to navigate next what I do is I go over to the right here and see this SC bar that we've got here this is great for when you've got files that don't have too many lines of code but when you are working with a lot of code there is a much easier way to navigate your file so what you do
here is you just simply right click on the scroll bar and you'll see this option come up here that says mini map what we're going to do is enable that right now and you'll be able to see here this little map that does appear on the right at the top now if you just click and drag on that file you can see that we can scroll through our file quite easily as well I'll show you why this feature is very powerful so if I just contrl c contrl v this this multiple times there's going to
be a bunch of Errors cuz our code is making zero sense right now so we've got like 450 lines at the moment as you can see over here not only can we see the entire file the entire length of this file over here on the right on the mini map but you can also see all the errors that appear on each of those lines so 100% recommend that you guys enable the mini map that should be the first thing that you do so the next thing that I like to do to customize my vs code
is I like to add a theme to my workspace so what I'm going to do is I'm going to come over to the extensions panel here I'm going to click it and I'm going to type in pale Knight now pale Knight is the theme that I like to use but you can choose anything that you want so what you can do now is you just click install and you can see immediately that the theme does come into play so if we go back into our file here you can see that all the code colors are
all different now and there are just a lot more appealing on the eyes in my opinion so that's my favorite theme but yeah completely up to you what you guys choose the next thing that we're going to change in our settings is the cursor blinking option so by default the cursor will be set to Blink we're just going to want to go ahead and change that to expand so as you can see now when we go over to our file and we just click anywhere our cursor will do this nice smooth animation of expanding this
is completely personal preference but I just like the animation of the cursor so I'm just leaving that as expand the next thing that you're going to want to enable in your settings is cursor smooth carrot animation so you're going to want to click on the drop- down list here and select on so what this does is it makes our typing animations look a whole lot smoother instead of just having the text appear immediately it kind of does this smooth ease in ease out animation as you type the next thing we're going to want to do
is type in word wrap on our settings and we're going to select this drop down here and set it to on what this is going to do is when our vs code window changes for any reason our text is going to wrap nicely to fit inside of the aspect ratio of the window at that point in time so say you have a long line of code and we have the window fully expanded like this if we make the window smaller here you'll see that the text automatically wraps onto the next line so we're still able
to see all of our code on the screen and that comes in very handy because you're not having to slide across to see the entire line of code all the time now the last thing that we're going to change in our settings of our vs code is our bracket pair colorization we're just going to want to type bracket pair in here on the search bar in our settings and we're just going to want to make sure that it is checked and enabled so what this is going to do is assign unique colors to matching brackets
so this makes it easier to identify nested structures especially in Lex code with multiple levels of indentation so each matching pair gets its own distinct color and this will just help visually distinguish nested code blocks now this feature is enabled by default but I always like to just go in there and make sure that it is enabled when I Do download vs code for the first time now if you guys want to get the most out of your vs code then what you want to do is head back over to the extensions tab here and
this is where we're going to begin to see the true magic of this program so in this tab you can search for extensions install or uninstall them and view their settings and documentation it's essentially the marketplace for extending and personalizing your development environment now there are thousands of extensions available for vs code but today I'm going to be showing you 16 of the most essential extensions for me and many other developers around the world as well the first extension that we're going to be covering here is called peacock so the peacock extension for vs code
allows you to change the color of your workspace making it easy to visually distinguished between multiple open projects so this is especially useful when you're working with multiple code instances such as a frontend and backend repo or different environments like production staging and development you can set unique colors for each workspace automatically assign colors based on workspace names change colors dynamically when using vs code live share and it also works alongside your existing vs code themes which is very nice as well so this extension helps prevent accidental edits in the wrong project and improves workflow
organization by providing a quick visual reference GitHub co-pilot so undoubtedly you would have heard of GitHub co-pilot by now if not you're probably living under a rock but I highly suggest that you use it GitHub co-pilot is an AI code assistant that enhances developer productivity by providing realtime code suggestions chat-based assistance and CLI support so what you can do here is you can ask coding questions directly inside of your vs code the AI itself can iterate on code detect errors and autofix as well and you can choose from AI models like open AI Google or
anthropic as well the beauty of GitHub cop pilot is its Auto validation feature so what it does is it runs builds and tests after implementation as well you should 100% be incorporating AI into your workflow at some stage it doesn't have to be GitHub co-pilot but that is just the one that I prefer and it is a fan favorite as well number three live server so the live server extension for visual studio code creates a local development server with live reload capabilities so this allows developers to see realtime updates in the browser as they code
it automatically refreshes the browser upon saving HTML CSS or JavaScript files eliminating the need for manual reloads you can start or stop the server easily from the status bar or by right clicking on the HTML file and selecting open with live server by integrating live server into your workflow you can streamline the development process and enhance the productivity through immediate visual feedback so you're not needing to continuously refresh a file in your browser to see their new state this makes developing a whole lot easier and saves a lot of tedious activities so I 100% recommend
you guys incorporate that into your vs code extensions the docker extension the docker extension in vs code simplifies the development management and deployment of containerized applications directly within your editor you can easily create start stop inspect and remove containers it also offers oneclick debugging for node.js Python and net apps as well this extension streamlines workflows for developers working with Docker making container management a whole lot easier to manage prettier one of my favorite extensions on this list so prettier is a popular code formatter that ensures consistent code styling across your project by automatically formatting your
code based on predefined rules you can automatically format code on save or manually with a shortcut and this will work with JavaScript typescript CSS HTML Json and more you can also configure settings like line width semicolons and quote style and it also works alongside es lint to maintain both style and code quality too git lens so git lens supercharges the built-in git capabilities in vs code providing deeper insights into your Project's history code changes and collaboration it enhances your workflow by offering powerful git visualizations and navigation features you can see who last modified a line
of code and why with inline blame information you can view commit history contributors and detailed statistics for files and branches easily view the complete history of a file including changes commits and branches you can search through commit history branches and even untracked files it is customizable as well so you can tailor the appearance and behavior of git lens to fit your workflow import cost so import cost is an extension that helps you keep track of the size of your dependencies and what you're importing into your project so it displays the size of each important package
directly in the editor making it a lot easier to Monitor and optimize your apps performance it shows the size of imported modules and packages next to the import statements by showing the size of these Imports it helps you avoid unnecessary bloat to your application and you can also configure settings to ignore certain Imports or adjust how the sizes are displayed as well code Runner now this is a very versatile extension and it allows developers to run code Snippets or entire scripts even in multiple programming languages directly within vs code it supports a wide variety of
languages and it simplifies testing small chunks of code without leaving the editor you can easily run code with a single click or a keyboard shortcut as well and what's beautiful about this is you can execute code directly in the editor without having to open a terminal or command prompt you can configure custom run commands for specific languages or tasks and you can also view the program output in the integrated terminal or an output panel as well remote SSH so this allows developers to connect to remote machines and work on code as if it was stored
locally by using SSH this extension enables seamless development on remote systems such as Cloud Server or virtual machines directly from your local vs code environment you can connect to remote machines using SSH and edit files as if they were on your local machine and you can work with remote repositories run commands and access files without having to leave vs code at all you can also use your preferred extensions and tools on the remote Sheen as well which is very cool you can access the remote terminal directly in vs code to run scripts or commands it's
also compatible with any machine that supports SSH including Linux servers Cloud VMS or other remote systems too remote SSH is pure magic it helps developers work efficiently across different environments enabling development on remote systems without having to disrupt their workflow I'm not entirely sure how to pronounce this I don't know if it's quoka or qua regardless it is a live scratch pad for JavaScript and typescript that allows developers to run code and see results instantly within their editor so this is a great tool for quickly testing code Snippets debugging and experimenting with logic in real
time what you can do is you can run type script or JavaScript code and view results directly in the editor you can see variable values execution results and console output immediately as you code this works with JavaScript typescript and other es6 plus features as well you can use qua for quickly debugging without the need for an external debugger and you can also view the result of expressions or variables in line next to your code as well which is pretty cool qua makes it very easy to experiment with code debug issues and explore new ideas by
providing immediate results and feedback as you work within the vs code application Live share this enables realtime collaboration by allowing developers to share their coding sessions with others so multiple people can work on the same code base debug together and chat all within vs code so this is very handy when you're working on projects with multiple other developers which is 99% of the time what is happening when you are working at a big company you can share your code and allow others to join your session for collaborative editing collaborate on debugging seeing each other's break
points and variable States you can also share terminal access for executing commands together as well there's also this built-in chat and voice capability feature as well for seamless Communications during sessions which I found really awesome polar code so polar code is a little bit gimmicky but it does allow you to generate beautiful Polaroid style images of your code Snippets and you can also customize the background text and formatting of your code snapshots easily export your code images for presentations social media or other documentation too polar code whilst it is a little bit gimmicky it does
add a creative visual touch to your code Snippets making it easier to share and showcase your work in a more presentable way JavaScript code Snippets now the JavaScript code Snippets extension provides a set of predefined code templates to speed up your JavaScript development it includes common constructs functions and other useful code patterns that can be inserted with shortcuts it includes Snippets for functions Loops conditionals and many more you can easily insert code Snippets with simple shortcuts and save time by reducing repetitive code writing and speeding up development JavaScript code Snippets whilst it is quite simple
it does Boost productivity by providing readymade code patterns for faster development material icon theme the material icon theme changes the appearance of file and folder icons in vs code to match Google's material design offering a visually appealing and organized workspace it brings a clean and modern look with material design inspired icons and automatically assigns unique icons to different file types it allows you to adjust the icon theme to fit your preferences to and it enhances the overall visual organization of your workspace making it a lot easier to identify files and folders quickly so I highly
recommend this one too vs code PDF vs code PDF allows developers to view and interact with PDF files directly within the vs code editor it's especially useful for reading documentation reference materials or any PDF related content without having to leave the workspace you can open and view PDF files within vs code and you can navigate through PDFs a lot easier using zoom and scroll features whilst it is quite a minimal and Simple vs code extension it does save time by not having to open up two different windows so you can have your actual PDF embedded
inside of your vs code window as well so that's pretty cool and I use that actually quite a lot so highly recommend putting that one in too the last one on the list is Rainbow CSV so this provides syntax highlighting for CSV and tsv files making it a lot easier to read and edit data in these formats it also allows advanced search and manipulation of data within csvs and it works both with CSV and tsv files and supports custom D limits too so if you haven't already I recommend including this one in your list as
well especially if you're working a lot with big data files it makes it a lot easier to view this data inside of your vs code panel without having to use any external software as well for easier readability okay so that does bring us to the end of the list today guys I hope you did find some value in this video I hope those settings and extensions will make your workflow a lot easier and a lot more efficient in the future um if you did find some value in the video please feel free to like comment
and subscribe and maybe just pop a comment about uh which extensions I didn't include today so if you do have some that you think should have been on the list feel free to add them below and I might add them in the next video too I hope you guys have a lovely rest of your day and I'll see you in the next video
