js file, we can again go to the extensions tab (⇧ + ⌘ (Ctrl) + X), type in " prettier" and install it: Prettier extension for VSCode To be able to instantly format our code every time we save a. js file you write using the Prettier extension for VSCode. You might have noticed in the example above that the code isn't very nicely formatted.įortunately, you can automatically format every. Here is what our code editor looks like with a sample component file I added to my Desktop: React component appearance in VSCode Format your code with the Prettier extension 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. GitHub initially developed Atom, then was acquired by Microsoft, making Atom a distant relative of Visual Studio Code.The ultimate tool you have when you're developing your projects is your code editor. In addition, due to it being the most popular text editor, many open-source developers are constantly making and updating VS Code Extensions, which makes it more attractive than its closest competitor Atom. It also possesses an integrated code repository and an in-built debugger which significantly hastens the process of bug detection. This includes syntax highlighting and auto-completion. This allows you to seamlessly transition from using it from one operating system to another without running into any significant trouble, save for minor OS-based differences.Īnother advantage of using VS Code is that it has a massive collection of features that smoothen the process of writing, viewing, and running code. Despite the steady influx of top-class code editors, there are a couple of reasons VS Code remains one of the most popular and functional options.įirstly, Visual Studio Code is free and multi-functional, which means it is compatible with the other primary PC operating systems, namely Linux, Ubuntu, and macOS.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |