I hope these extensions will bring a rainbow of colors to your VSCode, too. Here is a condensed list of the extensions mentioned in this article. VS Code will show you a selection of pre-built themes. Select File (Code on macOS), select Preferences, then choose Color Theme. You'll have the option to customize the color of these and add additional keywords. Here’s what you need to do: Open VS Code. It can be easy to overlook commented out code, but not with this extension, as it is difficult to overlook text that is bright orange. TODO Highlight will customize your list of TODO comments and make them pop with color. Photo Credit: vscode-icons TODO Highlight It also adds an extra touch of color and detail to folder structures. VSCode Icons has an extensive library of icons matching a variety of file types.įor example, you can easily see if you are selecting a TypeScript file or a JavaScript file based on the icon. Photo Credit: Peacock VSCode IconsĪdding icons can help when navigating through your folders. It can be easy to forget which workspace you are in when jumping between similar windows, but not with the bright colors provided by Peacock. It is great for managing multiple workspaces. This is a handy timesaver for translating hex codes and variable names. ColorizeĬolorize visualizes color variables by highlighting them with their color value. The improved performance of this feature makes it a better choice, but if you'd prefer to not edit your user settings, I'd suggest looking for extensions that handle this for you such as Bracket Pair Colorizer or Rainbow Brackets. This can be toggled on with "": true in your user settings. This is because of upgrades to VSCode allowing for a bracket pair colorization setting. This extension has recently become depreciated. The Bracket Pair Colorizer is another popular extension with over 4 million installs. This extension has saved me a number of times when looking for a missing or extra bracket. This will add rainbow colors to brackets, and matching brackets will have the same color. Indent Palettes1 Indent Palettes2 Bracket Pair Colorizer Want custom colors in your Indent Rainbow? Check out Indent Rainbow Palettes by Evondev.Īfter installing Indent Rainbow, install this extension and follow the outlined steps to select a new gradient palette. Indent Rainbow Bonus: Indent Rainbow Palettes Each indentation is given an alternating rainbow color. It can also help serve as an alignment check for your indentation. Indent Rainbow is a great tool to add color and productivity to your setup. Or try out my current favorite theme, Dracula Refined. This article goes beyond theming extensions, so I suggest picking out a theme first. And many of these will help you be more productive. I want to share that same spark of joy with you all, and have been searching for and testing out the best extensions to download. ![]() I find that personalizing my IDE helps me enjoy the time I spend using it more. And Visual Studio Code is one of the best free IDE's on the market. ![]() Themes - Change your Color Theme to customize VS Code's background text and language syntax colorization.Engineers spend a good portion of their day writing code in their integrated development environment, or IDE for short.Snippets - Create your own custom snippets.You can use visual studio code shortcut keys as Ctrl+K+Ctrl+T which will open the theme directly in vs code. Open Visual Studio Code, Click on File -> Preference-> Color Theme. Follow the below steps to change the background color. Key Bindings - See the default keyboard shortcuts (key bindings) for editing, navigation, and more. Change Visual Studio Code Background Color.User and Workspace Settings - Configure user and workspace settings.Introductory Videos - Review the entire list of videos.Extensions in Visual Studio Code - Add features to VS Code through Extensions.Install a new Color Theme from the VS Code Extension Marketplace.Pick another video from the list: Introductory Videos Video outline Here's the next video we recommend: Extensions in Visual Studio Code For example, on Ubuntu, you may need to install ubuntu-restricted-extras to get the necessary codecs to play the videos. Linux users: Make sure you have the correct multimedia codecs installed for your Linux distribution. In this Visual Studio Code tutorial, we show you how to personalize Visual Studio Code with themes. Configure IntelliSense for cross-compiling.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |