![]() ![]() Very simple technique, but one that makes working with CSS in Visual Studio even easier. Welcome to the September 2017 release of Visual Studio Code. For an individual section, place your cursor in that section and use CTRL + M + M. Prefer keyboard shortcuts? CSS Regions has you covered! Expand or Collapse All with CTRL + M + L. So you can simply open one region and all the items inside are still folded. This will insert the region and place the cursor in the right location. The nice thing about this is that all the sub regions are folded as well. Also for new team members it’s great to open up a CSS file to nicely collapsed sections, allowing them to at a glance ramp up on the different chunk of an application. A region snippet is provided in IntelliSense to make it easy to use regions in your code. This is an extremely simple example, but on a long CSS file with 10+ sections of code using regions can save loads of time and headache. ![]() We can now easily collapse chunks of our code, allowing us to easily pinpoint where on the page the footer specific styles are located: Those pink arrows are pointing out some new expand/collapse icons. I created a new folder on my machine called c:vscodeQueryTool Open Visual Studio Code and from the File menu, select Open Folder and navigate to, and open the blank folder created previously. This is where CSS Regions can help out! Let’s amend the comments a bit, changing /* over to /*#region and at the end of a block adding a /*#endregion*/: Step 1: Create Visual Studio Project Create a blank folder somewhere on your machine. If we want to adjust our footer, we have to scroll through numerous sections that we don’t care about. Many folks use comments to keep sections of CSS code organized:īut our file is still super long. Short tip today regarding CSS in Visual Studio that is far from universally known. ![]()
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |