{"id":226577,"date":"2019-10-01T13:05:41","date_gmt":"2019-10-01T20:05:41","guid":{"rendered":"https:\/\/devblogs.microsoft.com\/visualstudio\/?p=226577"},"modified":"2019-10-01T13:18:45","modified_gmt":"2019-10-01T20:18:45","slug":"visual-studio-for-mac-top-features-of-the-new-editor","status":"publish","type":"post","link":"https:\/\/devblogs.microsoft.com\/visualstudio\/visual-studio-for-mac-top-features-of-the-new-editor\/","title":{"rendered":"Visual Studio for Mac: Top Features of the New Editor"},"content":{"rendered":"<p>Over the past year, the Visual Studio for Mac team updated the editors within the IDE to be faster, more fluent and more productive. We did this by building a macOS-native editor interface on top of the same editor backend as Visual Studio on Windows. In version 8.1 we introduced the new C# editor. This was followed by the new XAML editor in 8.2. And most recently, we updated our web languages to utilize the new editors in version 8.3, completing the process we set out to do a year ago. To celebrate this accomplishment, I wanted to share a bit of detail regarding the design and implementation of the new editors along with my five favorite new features in the Visual Studio for Mac code editors.<\/p>\n<p>At the core of the updated editors within Visual Studio for Mac is the shared language service with Visual Studio on Windows. What this means is that the same backend that powers the Windows version of Visual Studio now powers the macOS version as well. This includes IntelliSense, Roslyn, text logic, and all the language services behind the scenes. The only portion not shared between Windows and macOS is the UI layer, which stays native for each platform. In the case of macOS, that means using macOS frameworks like Cocoa and CoreText to power the UI experience. By using a native UI, while also being able to utilize support for native input methods as well as support for right-to-left languages, font ligatures and other advanced graphical features.<\/p>\n<p><img decoding=\"async\" class=\"size-full wp-image-226590 aligncenter\" src=\"https:\/\/devblogs.microsoft.com\/visualstudio\/wp-content\/uploads\/sites\/4\/2019\/10\/editor-structure.png\" alt=\"\" width=\"1226\" height=\"812\" srcset=\"https:\/\/devblogs.microsoft.com\/visualstudio\/wp-content\/uploads\/sites\/4\/2019\/10\/editor-structure.png 1226w, https:\/\/devblogs.microsoft.com\/visualstudio\/wp-content\/uploads\/sites\/4\/2019\/10\/editor-structure-300x199.png 300w, https:\/\/devblogs.microsoft.com\/visualstudio\/wp-content\/uploads\/sites\/4\/2019\/10\/editor-structure-768x509.png 768w, https:\/\/devblogs.microsoft.com\/visualstudio\/wp-content\/uploads\/sites\/4\/2019\/10\/editor-structure-1024x678.png 1024w\" sizes=\"(max-width: 1226px) 100vw, 1226px\" \/><\/p>\n<p>Now that we have the power of the new editor in the IDE, let&#8217;s take a look at my top 5 favorite new editor features. All of the features I want to share with you today are aimed at making your development experience more productive, delightful and fun. I hope you enjoy using them as much as we enjoyed developing them!<\/p>\n<p><strong>Multi-Caret Editing<\/strong><\/p>\n<p>Multi-caret allows you to insert any number of carets (text insertion points) within the file you are editing. This can be accomplished manually through mouse clicks with control-option-click or through the keyboard. When using the keyboard, you can utilize pattern matching to insert next matching (<strong>Option+S<\/strong><strong>hift+.<\/strong>) or insert all matching (<strong>Option+Shift+;<\/strong>). You can also remove the last inserted caret with <strong>Option+Shift+,<\/strong> or move the last caret down with <strong>Option+Shift+\/<\/strong>. In the below GIF, I use the <strong>Option+Shift+.<\/strong> hotkey to insert the next matching caret twice, allowing me to edit all three instances of \u201cdouble\u201d within this page.<\/p>\n<p>Multi-caret editing is a very powerful feature that can greatly reduce the time associated with editing multiple lines at the same time. For example, if you need to change a prefix on several variables, or switching specific var declarations to strongly typed declarations, multi-caret editing allows you to do this with ease.<\/p>\n<p><img decoding=\"async\" class=\"size-full wp-image-226582 aligncenter\" src=\"https:\/\/devblogs.microsoft.com\/visualstudio\/wp-content\/uploads\/sites\/4\/2019\/10\/netconf-multicaret-light.gif\" alt=\"\" width=\"1365\" height=\"1031\" \/><\/p>\n<p>&nbsp;<\/p>\n<p><strong>IntelliSense Type Filtering<\/strong><\/p>\n<p>The next feature that I want to highlight is IntelliSense Type Filtering. With IntelliSense Type Filtering, you can filter the completion list by type of completion. If, for example, you only want to see classes in your completion list, you can either click the classes icon or use the hotkey \u201coption-c\u201d. We have a full list of types that you can filter by, in addition to their corresponding icons and hotkeys in our <a href=\"https:\/\/docs.microsoft.com\/en-us\/visualstudio\/mac\/intellisense?view=vsmac-2019\">Visual Studio for Mac Documentation<\/a>.\u00a0In the GIF below, I use IntelliSense type filtering to focus my list on interfaces, structures and finally on delegates.<\/p>\n<p><img decoding=\"async\" class=\"size-full wp-image-226583 aligncenter\" src=\"https:\/\/devblogs.microsoft.com\/visualstudio\/wp-content\/uploads\/sites\/4\/2019\/10\/netconf-typefilter-light.gif\" alt=\"\" width=\"1369\" height=\"1043\" \/><\/p>\n<p>This feature really comes in handy when you can\u2019t recall the exact name of the item you want, or simply want to focus solely on a specific type. It also works super well when combined with my next favorite feature, Show Import Items.<\/p>\n<p><strong>Show Import Items<\/strong><\/p>\n<p>Often, when I am working on a project, I can\u2019t always recall the exact namespace I need to import into my code file for a specific type. This often leads me to panic and feverishly search anywhere I can to find the import I need. This next feature alleviates this angst by not only showing completions which I have already imported, but also completions that are available for import. Additionally, if I end up selecting one of the not-yet-imported completions, the using statement will be added to the header of the code file. In the below GIF, I add &#8220;System.ComponentModel.DataAnnotations&#8221; to my project through the Show Import Items feature. You may have also noticed that for items which are not yet imported, the full namespace is listed next to the type, making it easy to see what the system is going to add to your header.<\/p>\n<p><img decoding=\"async\" class=\"size-full wp-image-226580 aligncenter\" src=\"https:\/\/devblogs.microsoft.com\/visualstudio\/wp-content\/uploads\/sites\/4\/2019\/10\/netconf-import-light.gif\" alt=\"\" width=\"1369\" height=\"1043\" \/><\/p>\n<p>Show Import Items is currently disabled by default, but you can easily enable it by opening Visual Studio &gt; Preferences &gt; Text Editor &gt; IntelliSense and enabling \u201cShow Import Items\u201d.<\/p>\n<p><strong>Right-to-Left and Native Input Support<\/strong><\/p>\n<p>A top ask from our community was to enable support of right-to-left and bi-directional languages, and we incredibly excited to offer support for those requests in Visual Studio 2019 for Mac. In the old editors, typing or pasting right-to-left strings, such as those in Persian, Hebrew or Arabic, would result in the word appearing to be in reverse. For example, the word for \u201chello\u201d would appear to say \u201colleh\u201d, flipping the text around so that it appears reversed. With the new editors, right-to-left and all types of bi-directional text are supported.<\/p>\n<p><img decoding=\"async\" class=\"alignnone size-full wp-image-226585 aligncenter\" src=\"https:\/\/devblogs.microsoft.com\/visualstudio\/wp-content\/uploads\/sites\/4\/2019\/10\/rtl.png\" alt=\"\" width=\"1312\" height=\"520\" srcset=\"https:\/\/devblogs.microsoft.com\/visualstudio\/wp-content\/uploads\/sites\/4\/2019\/10\/rtl.png 1312w, https:\/\/devblogs.microsoft.com\/visualstudio\/wp-content\/uploads\/sites\/4\/2019\/10\/rtl-300x119.png 300w, https:\/\/devblogs.microsoft.com\/visualstudio\/wp-content\/uploads\/sites\/4\/2019\/10\/rtl-768x304.png 768w, https:\/\/devblogs.microsoft.com\/visualstudio\/wp-content\/uploads\/sites\/4\/2019\/10\/rtl-1024x406.png 1024w\" sizes=\"(max-width: 1312px) 100vw, 1312px\" \/><\/p>\n<p>We\u2019ve also introduced native input support. As the editors are built using the native toolkit for macOS, inserting text into the editor is just like inserting in any other native macOS app. This means that you get access to all of the advanced text entry features of macOS, such as long-press for accented and alternate characters as well as the emoji selector!<\/p>\n<p><strong>Ligature Support<\/strong><\/p>\n<p>If you use a font which supports ligatures, such as the newly released Cascadia Code, Visual Studio for Mac 2019 will automatically support the insertion of ligatures in place of common dual character glyphs. For example, the double-equal sign (==) will be transformed into an elongated equal sign with no space. Likewise, the bang-equals (!=) will be transformed to an equal sign with a slash throughout, more accurately depicting the \u201cdoes not equal\u201d symbol which bang-equals is intended to represent.<\/p>\n<p>In the below GIF, I use a simple \u201cif\u201d statement to demonstrate the available ligatures for several different common multi-character glyphs.<\/p>\n<p><img decoding=\"async\" class=\"size-full wp-image-226581 aligncenter\" src=\"https:\/\/devblogs.microsoft.com\/visualstudio\/wp-content\/uploads\/sites\/4\/2019\/10\/Ligs.gif\" alt=\"\" width=\"1208\" height=\"557\" \/><\/p>\n<p><strong>Download Visual Studio 2019 for Mac<\/strong><\/p>\n<p>These are my five favorite editors features in Visual Studio for Mac 2019, but there are plenty more to experience as you work through a project. To get started with Visual Studio 2019 for Mac <a href=\"https:\/\/www.visualstudio.com\/vs\/mac\">Download the Visual Studio 2019 for Mac v8.3\u00a0release<\/a>\u00a0today,\u00a0or if you have it installed already\u00a0\u2013\u00a0<a href=\"https:\/\/docs.microsoft.com\/en-us\/visualstudio\/mac\/update?view=vsmac-2019#changing-the-updater-channel\">update\u00a0to the latest release\u00a0using\u00a0the\u00a0Stable\u00a0channel<\/a>!<\/p>\n<p>If you run into any issues with the v8.3 release, please use the Help &gt; <a href=\"https:\/\/docs.microsoft.com\/en-us\/visualstudio\/mac\/report-a-problem?view=vsmac-2019\">Report a Problem<\/a>\u00a0menu in the IDE\u00a0to let us know about it. You can also provide suggestions for future improvements by using the Provide a Suggestion menu.<\/p>\n<p><img decoding=\"async\" class=\"size-full wp-image-225918 aligncenter\" src=\"https:\/\/devblogs.microsoft.com\/visualstudio\/wp-content\/uploads\/sites\/4\/2019\/07\/report-a-problem-ctx-menu.png\" alt=\"report a problem context menu\" width=\"368\" height=\"318\" srcset=\"https:\/\/devblogs.microsoft.com\/visualstudio\/wp-content\/uploads\/sites\/4\/2019\/07\/report-a-problem-ctx-menu.png 368w, https:\/\/devblogs.microsoft.com\/visualstudio\/wp-content\/uploads\/sites\/4\/2019\/07\/report-a-problem-ctx-menu-300x259.png 300w\" sizes=\"(max-width: 368px) 100vw, 368px\" \/><\/p>\n<p>Finally,\u00a0make sure to\u00a0follow us on Twitter at\u00a0<a href=\"https:\/\/twitter.com\/VisualStudioMac\">@VisualStudioMac<\/a>\u00a0to stay up to date on the latest Visual Studio for Mac news and let us know what your experience has been like. We look forward to hearing from you!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Over the past year, the Visual Studio for Mac team updated the editors within the IDE to be faster, more fluent and more productive. We did this by building a macOS-native editor interface on top of the same editor backend as Visual Studio on Windows. In version 8.1 we introduced the new C# editor. This [&hellip;]<\/p>\n","protected":false},"author":561,"featured_media":226580,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[155],"tags":[237,361,85,5,12,452,353],"class_list":["post-226577","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-visual-studio","tag-net","tag-net-core","tag-asp-net","tag-csharp","tag-visual-studio","tag-visual-studio-for-mac","tag-xamarin"],"acf":[],"blog_post_summary":"<p>Over the past year, the Visual Studio for Mac team updated the editors within the IDE to be faster, more fluent and more productive. We did this by building a macOS-native editor interface on top of the same editor backend as Visual Studio on Windows. In version 8.1 we introduced the new C# editor. This [&hellip;]<\/p>\n","_links":{"self":[{"href":"https:\/\/devblogs.microsoft.com\/visualstudio\/wp-json\/wp\/v2\/posts\/226577","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/devblogs.microsoft.com\/visualstudio\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/devblogs.microsoft.com\/visualstudio\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/visualstudio\/wp-json\/wp\/v2\/users\/561"}],"replies":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/visualstudio\/wp-json\/wp\/v2\/comments?post=226577"}],"version-history":[{"count":0,"href":"https:\/\/devblogs.microsoft.com\/visualstudio\/wp-json\/wp\/v2\/posts\/226577\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/visualstudio\/wp-json\/wp\/v2\/media\/226580"}],"wp:attachment":[{"href":"https:\/\/devblogs.microsoft.com\/visualstudio\/wp-json\/wp\/v2\/media?parent=226577"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/visualstudio\/wp-json\/wp\/v2\/categories?post=226577"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/visualstudio\/wp-json\/wp\/v2\/tags?post=226577"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}