| OLD | NEW |
| (Empty) |
| 1 --- | |
| 2 layout: default | |
| 3 title: "What Is Dart Editor Trying to Tell Me?" | |
| 4 description: "Errors and warnings and code completions" | |
| 5 has-permalinks: true | |
| 6 tutorial: | |
| 7 id: errors-warnings | |
| 8 --- | |
| 9 | |
| 10 {% capture back_to %} | |
| 11 <a href="index.html" style="font-size: 9pt">2: Connect Dart & HTML</a> | |
| 12 {% endcapture %} | |
| 13 | |
| 14 {% capture whats_the_point %} | |
| 15 | |
| 16 * Dart Editor reports errors and warnings. | |
| 17 * Errors are either run-time or compile-time. | |
| 18 * Warnings are hints that your code might not work. | |
| 19 | |
| 20 {% endcapture %} | |
| 21 | |
| 22 {% capture content %} | |
| 23 | |
| 24 As you type, Dart Editor processes the text, | |
| 25 analyzing it for errors and performing code completion. | |
| 26 The sections below show you a few of the errors and | |
| 27 warnings you might see. | |
| 28 They also show you how to use Dart Editor's code completion help. | |
| 29 | |
| 30 Follow along with the instructions as you transform | |
| 31 the code for the default helloworld command-line app into this code: | |
| 32 | |
| 33 {% prettify dart %} | |
| 34 import 'dart:html'; | |
| 35 void main() { | |
| 36 query('#RipVanWinkle').text = 'Wake up, sleepy head!'; | |
| 37 } | |
| 38 {% endprettify %} | |
| 39 | |
| 40 ##Errors | |
| 41 Place the text cursor before the 'v' in void, | |
| 42 and begin typing the first line of code, | |
| 43 the `import` directive, | |
| 44 and stop just after you type the first quotation mark. | |
| 45 | |
| 46 <img src="images/error-editor-screenshot.png" | |
| 47 alt="Dart Editor error"> | |
| 48 | |
| 49 You will see a small red 'x' | |
| 50 in the gutter on the left side of the **Editor pane**. | |
| 51 This means that Dart Editor has detected an error. | |
| 52 When you point to the red 'x', | |
| 53 a tooltip displays a helpful error message. | |
| 54 | |
| 55 <img src="images/error-tooltip-screenshot.png" | |
| 56 alt="Dart Editor error tooltip"> | |
| 57 | |
| 58 This particular error is syntactic. | |
| 59 The single quote starts a string literal, | |
| 60 which is left uncompleted. | |
| 61 Errors can be either compile-time or run-time. | |
| 62 Compile-time errors prevent your program from running at all. | |
| 63 Run-time errors result in exceptions. | |
| 64 | |
| 65 Finish typing the complete line of code including the semi-colon (;) | |
| 66 and the red 'x' disappears. | |
| 67 | |
| 68 <aside class="alert" markdown="1"> | |
| 69 **Tip:** Save your file with **File > Save**. | |
| 70 In some versions of Dart Editor, | |
| 71 you need to save the file and start typing again | |
| 72 before a newly imported library is detected. | |
| 73 </aside> | |
| 74 | |
| 75 ##Warnings | |
| 76 | |
| 77 Now delete the line of code that calls print(), | |
| 78 and start typing the function call to query(). | |
| 79 Stop after you type the first parenthesis. | |
| 80 Note that Dart Editor helpfully provides a matching parenthesis. | |
| 81 Note also that Dart Editor displays | |
| 82 a yellow warning symbol in the gutter. | |
| 83 | |
| 84 <img src="images/warning-editor-screenshot.png" | |
| 85 alt="Dart Editor warning"> | |
| 86 | |
| 87 In the background, Dart Editor does API lookup. | |
| 88 Dart Editor recognizes the top-level query() function | |
| 89 from the Dart HTML library, | |
| 90 but it has detected a possible problem. | |
| 91 Point the mouse at the yellow warning sign and | |
| 92 a helpful warning message will be displayed in a tooltip: | |
| 93 | |
| 94 <img src="images/warning-tooltip-screenshot.png" | |
| 95 alt="Dart Editor warning tooltip"> | |
| 96 | |
| 97 Dart Editor is telling you that query() requires | |
| 98 a string argument and you have not yet provided one. | |
| 99 Warnings are hints that your code might not work, | |
| 100 but they don't prevent your program from executing. | |
| 101 | |
| 102 ##Code completion | |
| 103 | |
| 104 Continue typing, entering '#RipVanWinkle' | |
| 105 as the argument to the query() function, | |
| 106 and stop after you type the period. | |
| 107 Dart Editor displays a menu with auto-complete suggestions | |
| 108 based on the context. | |
| 109 You can also bring up the menu by typing **Ctl+Space**. | |
| 110 | |
| 111 <img src="images/query-api-lookup.png" | |
| 112 alt="Lookup query in Dart libraries in Dart Editor"> | |
| 113 | |
| 114 Scroll down and choose text, or just type it in. | |
| 115 | |
| 116 Finish your edits, | |
| 117 and save the file with **File > Save**. | |
| 118 | |
| 119 <div class="row"> | |
| 120 <div class="span3"> | |
| 121 <a href="index.html"><i class="icon-chevron-left"> </i> Back to Target 2</a> | |
| 122 </div> | |
| 123 </div> | |
| 124 | |
| 125 {% endcapture %} | |
| 126 | |
| 127 {% include tutorial-sidebar.html %} | |
| OLD | NEW |