зеркало из https://github.com/dotnet/roslyn.git
Updated Syntax Visualizer (markdown)
Jared Parsons
Родитель
c6aa2d11c2
Коммит
cabe81c940
|
|
@ -21,23 +21,23 @@ Once installed, the Syntax Visualizer enables inspection of the syntax tree for
|
|||
|
||||
*Figure 1 Launching the Syntax Visualizer*
|
||||
|
||||
|
||||
|
||||
|
||||
This should bring up a tool window that looks like below. Let’s dock this tool window at a convenient location inside Visual Studio. I usually dock this window on the left side.
|
||||
|
||||
*Figure 2 The Syntax Visualizer tool window*
|
||||
|
||||
|
||||
|
||||
|
||||
Now, let’s create a new project by clicking on File –> New Project. You can create either a VB or C# project. As soon as Visual Studio opens the main code file for this project, you should see the syntax tree for this file in the visualizer tool window as shown in the below image. You can open any existing C# / VB file in this Visual Studio instance, and the syntax tree for the opened file will be displayed in the visualizer tool window. If you have multiple code files open inside Visual Studio, the visualizer will always display the syntax tree for the currently active code file (i.e., the code file that has keyboard focus).
|
||||
|
||||
*Figure 3 Visualizing a C# syntax tree*
|
||||
|
||||
|
||||
|
||||
|
||||
*Figure 4 Visualizing a VB syntax tree*
|
||||
|
||||
|
||||
|
||||
|
||||
As you can see in the above image, the visualizer tool window displays the syntax tree at the top and a property grid at the bottom. The property grid displays the properties of the item that is currently selected in the tree, including the .NET ‘Type’ and the ‘Kind’ (SyntaxKind) of the item.
|
||||
|
||||
|
|
@ -45,7 +45,7 @@ Syntax trees comprise three types of items – nodes, tokens, and trivia. You ca
|
|||
|
||||
*Figure 5 Legend*
|
||||
|
||||
|
||||
|
||||
|
||||
Each item in the tree also displays its own ‘Span’. In the C# example above for instance, the selected “UsingKeyword [0..5)” token has a Span that is 5 characters wide i.e. [0..5).
|
||||
|
||||
|
|
@ -63,21 +63,21 @@ Right clicking on any item in the tree and clicking on View Directed Syntax Grap
|
|||
|
||||
*Figure 6 Viewing a C# syntax graph*
|
||||
|
||||
|
||||
|
||||
|
||||
*Figure 7 A C# syntax graph*
|
||||
|
||||
|
||||
|
||||
|
||||
Let’s try the same for the SubBlock node corresponding to the Main() method in the VB example above. This should display a syntax graph that looks as follows:
|
||||
|
||||
*Figure 8 Viewing a VB syntax graph*
|
||||
|
||||
|
||||
|
||||
|
||||
*Figure 9 A VB syntax graph*
|
||||
|
||||
|
||||
|
||||
|
||||
As you can see in the above screenshots, the syntax graph viewer has an option to display a legend for the coloring scheme it uses. You can also hover over individual items in the syntax graph with the mouse to view the properties corresponding to that item.
|
||||
|
||||
|
|
@ -87,7 +87,7 @@ Here is the docking layout that I normally use for the visualizer tool window an
|
|||
|
||||
*Figure 10 My preferred docking layout*
|
||||
|
||||
|
||||
|
||||
|
||||
# Inspecting Semantics
|
||||
The Syntax Visualizer also allows you to do some rudimentary inspection of symbols and semantic information. Let’s look at some examples. You can read more about APIs for performing semantic analysis in the [.NET Compiler Platform (“Roslyn”) Overview document](https://github.com/dotnet/roslyn/wiki/Roslyn%20Overvi).
|
||||
|
|
@ -98,31 +98,31 @@ Now select the expression `1 + 1` in the code editor window. This should highlig
|
|||
|
||||
*Figure 11 Viewing symbol for an expression*
|
||||
|
||||
|
||||
|
||||
|
||||
The property grid in the visualizer should now be updated as follows indicating that the symbol for the expression is a SynthesizedIntrinsicOperatorSymbol with Kind = Method.
|
||||
|
||||
*Figure 12 Symbol properties*
|
||||
|
||||
|
||||
|
||||
|
||||
Next let’s try View **TypeSymbol (if any)** for the same AddExpression node. This time the property grid in the visualizer is updated as follows indicating that the type of the selected expression is Int32.
|
||||
|
||||
*Figure 13 TypeSymbol properties*
|
||||
|
||||
|
||||
|
||||
|
||||
Next let’s try View **Converted TypeSymbol (if any)** for the same AddExpression node. This time, the property grid is updated as follows indicating that although the type of the expression is Int32, the converted type of the expression is Double (because the Int32 expression is used in a context where it has to be converted to a Double in order to satisfy the type specified for the variable x on the left hand side of the assignment operator).
|
||||
|
||||
*Figure 14 Converted TypeSymbol properties*
|
||||
|
||||
|
||||
|
||||
|
||||
Finally, let’s try **View Constant Value (if any)** for the same AddExpression node above. The property grid tells us that the value of the expression is a compile time constant with value `2`.
|
||||
|
||||
*Figure 15 A constant value*
|
||||
|
||||
|
||||
|
||||
|
||||
The above inspection example can also be replicated in VB. Type `Dim x As Double = 1 + 1` in a VB file. Now select the expression `1 + 1` in the code editor window. This should highlight the corresponding AddExpression node in the visualizer. Repeat the above steps for this AddExpression and you should see identical results.
|
||||
|
||||
|
|
@ -130,25 +130,25 @@ Let’s try another example, this time in VB. Update the code in the VB file to
|
|||
|
||||
*Figure 16 Viewing symbol for an identifier*
|
||||
|
||||
|
||||
|
||||
|
||||
The property grid tells us that this identifier is bound to the type `System.Console`.
|
||||
|
||||
*Figure 17 Symbol properties*
|
||||
|
||||
|
||||
|
||||
|
||||
Now let’s try **View AliasSymbol (if any)** for the same IdentifierName node. This time, the property grid tells us that the identifier is an alias with name C that is bound to the System.Console target. In other words, the property grid gives us information regarding the AliasSymbol corresponding to the identifier C.
|
||||
|
||||
*Figure 18 AliasSymbol properties*
|
||||
|
||||
|
||||
|
||||
|
||||
Note that you can also inspect the symbol corresponding to any declared type, method, property etc. by selecting the corresponding node in the visualizer and clicking on View Symbol (if any). For example, select the method `Sub Main()` in the above example and click on View Symbol (if any) for the corresponding SubBlock node in the visualizer, the property grid will tell us that the MethodSymbol for this SubBlock has name Main with return type Void.
|
||||
|
||||
*Figure 19 Viewing symbol for a method declaration*
|
||||
|
||||
|
||||
|
||||
|
||||
Note that the above VB examples can be easily replicated in C# (for the alias, type `using C = System.Console;` in place of `Imports C = System.Console`). Repeating the above steps in C# should yield identical results.
|
||||
|
||||
|
|
@ -156,7 +156,7 @@ Note that the above VB examples can be easily replicated in C# (for the alias, t
|
|||
|
||||
*Figure 20 An empty property grid is displayed when no semantic information is available for the selected node*
|
||||
|
||||
|
||||
|
||||
|
||||
## Closing and Disabling Syntax Visualizer
|
||||
The visualizer tool window can be closed at any time and once closed it should cease to have any impact. You can also disable / uninstall the visualizer extension completely using Tools –> Extensions and Updates in Visual Studio.
|
||||
The visualizer tool window can be closed at any time and once closed it should cease to have any impact. You can also disable / uninstall the visualizer extension completely using Tools –> Extensions and Updates in Visual Studio.
|
||||
|
|
|
|||
Загрузка…
Ссылка в новой задаче