View > Show Breadcrumbs (and making sure it is unchecked). I recommend changing the zoom level from 0 to 1.Īnd finally, as a matter of preference, I like to remove the default breadcrumb links that are at the top of the editor. To increase the zoom level, go to preferences (⌘ (Ctrl) + ,) and type in " zoom level". Text Settings for VSCodeĪdditionally, to get your text looking just right, I find text looks better when you increase the default zoom level of the editor. The settings I have found to most comfortable over the years for both desktop and laptop development are font size of 18 and a tab size set to 2. You can change your VSCode preferences by going to (at the top of your screen):Ĭode > Preferences > Settings (or use the shortcut: ⌘ (Ctrl) + ,) Settings that will improve the readability of your code are your font size, tab size, and font family. Now is a good time to add some basic settings that make the code that you write comfortable to read. Material Theme for VSCode Make your text easy to read The default option is great, but I personally find the "Material Theme Ocean High Contrast" variant to be the best looking. Once it has been installed it will give you a dropdown to choose between a bunch of different variants. It should look like this: Material Theme Installation Then search for "Material Theme" in the sidebar and install the first result that comes up. View > Extensions (or use the shortcut ⇧ + ⌘ (Ctrl) + X) To install the Material Theme, go to (at the top of the screen): I personally use and highly recommend the Material Theme for all of my installations of VSCode. But since you will be spending hours reading text on your editor, you want to choose colors that you like and that do not strain your eyes. It might seem like a trivial thing to spend time picking a theme. Once your installation is done and you open the VSCode app, you should be greeted with a home screen that looks something like this: VSCode Home Screen (After Install) Choose a color theme you likeĪlthough the default theme that ships with VSCode is very nice and legible, I prefer to use a third-party theme that I find easier on my eyes. Install the right version for your operating system Head to and download the right version for your computer (it's 100% free).
The first step to setting up Visual Studio Code (VSCode for short) is to install it for your computer.
In this step-by-step guide, we will go from a completely new VSCode installation to a code editor perfectly prepared for your next React project. Which is why it's so important to set it up properly. The ultimate tool you have when you're developing your projects is your code editor.
0 kommentar(er)
