script_editor.rst 22 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411
  1. .. _doc_script_editor:
  2. Script Editor
  3. =============
  4. .. _doc_script_editor_introduction:
  5. Introduction
  6. ------------
  7. Godot Engine's script editor is a powerful and fully-integrated text editor
  8. that not only streamlines the process of writing and debugging code written in
  9. GDScript but also allows for working with plain text files, providing
  10. developers with a seamless environment for scripting game logic and behaviors.
  11. It can highlight your code, automatically indent it, perform syntax checks,
  12. and much more.
  13. You can also create breakpoints to debug your project without switching to
  14. another window.
  15. The text editor also serves as an offline class reference viewer, which can
  16. be accessed in several ways as described in the
  17. :ref:`doc_intro_to_the_editor_interface_integrated_class_reference`.
  18. .. image:: img/script_editor_icons/text_editor.webp
  19. .. _doc_script_editor_features:
  20. Features
  21. --------
  22. Some of the key features of the text editor are listed below:
  23. - Fully-integrated code editor for GDScript.
  24. - Syntax highlighting support for GDScript and JSON files.
  25. - Syntax checking for GDScript and JSON files.
  26. - Bookmark and breakpoint support.
  27. - Automatic indentation.
  28. - Code folding.
  29. - Customizable theme.
  30. - Multiple carets, which can be enabled using :kbd:`Alt + Left Click`.
  31. - Auto-completion of variables, functions, constants, etc.
  32. - Inline refactoring of symbols by selecting them and using :kbd:`Ctrl + D`.
  33. - Mass find and replace across project files.
  34. .. _doc_script_editor_usage:
  35. Usage
  36. -----
  37. If you are using GDScript in your project, the built-in text editor in
  38. Godot provides everything you need, serving as a one-stop location to
  39. fully utilize the Godot Engine. Nearly all parameters that can be adjusted via
  40. the user interface can also be modified directly through code.
  41. .. note:: If you would like to use an external text editor or prefer to use C#
  42. in your project, see :ref:`doc_external_editor` and
  43. :ref:`doc_c_sharp_setup_external_editor`.
  44. .. tip:: Similar to many parts of the Godot's interface, the text editor can
  45. also be customized by changing its settings to your liking. You can access
  46. these settings by opening **Editor > Editor Settings** and going to the **Text Editor**
  47. group.
  48. .. image:: img/editor_ui_script_editor_open.webp
  49. You can open the Script Editor using the **Script** button in the workspace selector,
  50. located at the top center of Godot's interface.
  51. Alternatively, you can use the **Open Script** button next to a node in the
  52. Scene Tree dock, or double-click on a ``.gd`` file or a recognized text file in
  53. the FileSystem dock to open it directly in the Script Editor.
  54. .. image:: img/editor_ui_script_editor_menu.webp
  55. Once it is open, you will see the text editor menus at the top, below the scene
  56. switcher. Next to the menus, you'll find buttons to open the online documentation
  57. or search within the built-in class reference. To the right of these buttons are
  58. two navigation arrows that allow you to navigate through your viewing history.
  59. Finally, you can use the float button to
  60. separate the text editor from Godot's window, which is useful if you are working
  61. with multiple monitors.
  62. Underneath the menus on the left, you will see the script panel. In the center,
  63. adjacent to the script panel, is the coding area. Beneath the coding area is the
  64. status bar, which displays the error and warning count in the code.
  65. Clicking on the error or warning icons will show the list of errors with
  66. the line numbers. Clicking on one will jump to that line.
  67. You can also choose to ignore warnings by opening the list and
  68. clicking ``Ignore``.
  69. The status bar also lets you change the zoom level of the code by clicking
  70. the percentage value. You can also use :kbd:`Ctrl + Mouse Wheel`
  71. (:kbd:`Cmd + Mouse Wheel` on Mac) to achieve the same effect.
  72. The status bar also shows the current position of the caret in terms of line and
  73. column, and whether the indentation is done using tabs, or spaces.
  74. Many of the actions performed in the text editor can also be executed using
  75. shortcuts. The actions show their corresponding shortcuts next to them.
  76. For a complete shortcut list, see the :ref:`text editor shortcuts <doc_default_key_mapping_shortcuts_text_editor>`.
  77. In the next sections, we will go through different aspects of the text editor.
  78. You can also select a section below to jump to a specific topic:
  79. .. contents::
  80. :local:
  81. :depth: 3
  82. :backlinks: none
  83. .. _doc_script_editor_script_panel:
  84. Script Panel
  85. ~~~~~~~~~~~~
  86. .. |script| image:: img/script_editor_icons/Script.webp
  87. .. |scriptcsharp| image:: img/script_editor_icons/ScriptCSharp.webp
  88. .. |documentation| image:: img/script_editor_icons/Documentation.webp
  89. .. |toolscript| image:: img/script_editor_icons/ToolScript.webp
  90. .. image:: img/editor_ui_script_editor_script_panel.webp
  91. Below the menus, on the left panel, you will see a list of opened files and documentation
  92. pages. Depending on the file type, this list will have an icon next
  93. to the file name. For example, the |script| icon means that it is a GDScript.
  94. the |scriptcsharp| means it is a C# script. The |documentation| means that this is a
  95. built-in class reference. Finally, the |toolscript| means it is a currently running
  96. script (See :ref:`tool annotation <doc_running_code_in_the_editor>` for more on this).
  97. Hovering a file will show a tooltip with its relative location in the project folder.
  98. On the status bar, clicking the left arrow hides the script panel, clicking
  99. on the right arrow shows it.
  100. If you did not change any settings, the file names may also have a different coloring.
  101. This helps you identify the recently edited files by highlighting them. This behavior
  102. can be changed in the **Editor > Editor Settings** by adjusting the **Script Temperature**
  103. properties in the **Text Editor** section.
  104. The filter bar above the file names introduces a handy case-insensitive search to
  105. find a specific file. Even if you just type the letters of a file name into the
  106. bar, files containing these letters in order will also appear. Assume that there
  107. is a file named ``button.gd`` in the list. If you type ``btn`` into the filter bar,
  108. this file will appear in the results. To reset the filter, clear the filter bar.
  109. An asterisk (*) next to a file name indicates that the file has unsaved changes.
  110. .. tip:: If you just enter "*" in the filter bar, you can display all unsaved files.
  111. You can drag a file to change the ordering. Middle-clicking on a file closes it.
  112. Right-clicking on a file provides several options to save or close files, or to
  113. copy the relative path of the file. On this menu:
  114. You can also use **Move Up** and **Move Down** to change the order of the file, or use **Sort**
  115. to sort all files alphabetically. **Toggle Scripts Panel** hides the panel, which
  116. can be displayed again using the right arrow on the status bar.
  117. **Close Docs** closes all opened in-class reference documents leaving only
  118. script files open. **Show in FileSystem** finds and highlights the file in the
  119. FileSystem dock.
  120. Below the file list, you'll see the name of the currently open file. The button
  121. next to this switches the ordering of the methods defined in this file between
  122. alphabetical and as they appear. Under this is the outline of the file. If this
  123. is a script file, it will contain the list of defined methods. If, however, a
  124. class reference page is open, this area will show the table of contents of this
  125. document. Clicking on an item in this list will jump to the respective function
  126. or section in the file. Similarly, the **Filter Methods** bar lets you search
  127. for a specific function or section within the selected document with the same
  128. behavior as filtering scripts.
  129. .. _doc_script_editor_menus:
  130. Menus
  131. ~~~~~
  132. The text editor's menus lie below the scene switcher and allow you to access a
  133. variety of tools and options, such as file management, search and replace, debugging
  134. controls, and code formatting features.
  135. .. tip:: An asterisk (*) next to an action means that this operation is also available
  136. in the context menu, which can be opened by right-clicking in the code editor.
  137. .. image:: img/script_editor_icons/text_editor_menu.webp
  138. The **File** menu provides the following options:
  139. .. image:: img/script_editor_icons/text_editor_file_menu.webp
  140. - **New Script...**: Opens the new script dialog to create and add the script to
  141. the project. If creation is successful, it will directly open it in the
  142. text editor. Depending on the version of Godot (with C# support or not), you
  143. can choose ``.gd`` or ``.cs`` as the extension.
  144. - **New Text File...**: Opens the file dialog to create a plain text file with
  145. one of the recognized formats. Godot can also highlight ``json`` files.
  146. - **Open...**: Opens the file dialog to let you browse inside your computer and
  147. choose any recognized text file to open it.
  148. - **Reopen Closed Script**: Reopens the last closed scripts. You can use this
  149. option multiple times to reopen other closed scripts if you closed more than one.
  150. - **Open Recent**: Provides a list of last opened scripts. You can also clear the
  151. list using the provided option at the bottom of the list.
  152. - **Save**: Saves the currently selected script.
  153. - **Save As...**: Opens the file dialog to save the currently open script
  154. with a different name.
  155. - **Save All**: Saves all unsaved open scripts in the text editor. Scripts with
  156. unsaved changes will have an asterisk (*) next to their names in the script list.
  157. - **Soft Reload Tool Script**: If the selected script is a
  158. :ref:`tool <doc_running_code_in_the_editor>`, reloads the script to execute it again.
  159. - **Copy Script Path**: Copies the currently selected script's relative path in
  160. the project using the ``res://`` prefix.
  161. - **Show in FileSystem**: Finds and highlights the selected file in the FileSystem
  162. dock.
  163. - **History Previous**: Changes the active script to the one that was previously
  164. opened. This is useful when you have multiple scripts open and want to quickly navigate
  165. back to the last script you were editing. If you also changed the caret position more than
  166. 10 lines, you will first move it to its previous location in the same file.
  167. - **History Next**: After using `History Previous` to go back to an earlier script,
  168. this feature allows you to move forward through the script history, switching to
  169. scripts that were previously accessed. Similar to above, if you also changed the
  170. caret position more than 10 lines, you will first move it to its next location in
  171. the same file.
  172. - **Theme**: Provides options to import an existing theme, save, or reload it. Changing
  173. theme settings is performed via `Editor Settings`.
  174. - **Close**: Closes the active script.
  175. - **Close All**: Closes all open scripts and prompts to save if there are unsaved changes.
  176. - **Close Other Tabs**: Closes all open scripts except the selected one.
  177. - **Close Docs**: Closes the class reference documentation pages, leaving only the
  178. scripts.
  179. - **Run**: If the script extends :ref:`EditorScript <class_EditorScript>` and
  180. intended to be executed without running the project, this option runs the script.
  181. See :ref:`doc_running_code_in_the_editor_editorscript` for more.
  182. - **Toggle Scripts Panel**: Shows or hides the script panel located on the left side
  183. of the text editor, allowing you to expand the available coding area. More on the
  184. `Scripts Panel` is explained :ref:`above <doc_script_editor_script_panel>`.
  185. The **Edit** menu provides several options for line operations:
  186. .. image:: img/script_editor_icons/text_editor_edit_menu.webp
  187. - **Undo***: Allows you to reverse the most recent action or series of actions, restoring
  188. document or code to its previous state before the changes were made.
  189. - **Redo***: Allows you to reapply an action that was previously undone, effectively
  190. redoing the last action that was reversed by the Undo function.
  191. - **Cut***: Cuts the selection to the clipboard.
  192. - **Copy***: Copies the selection to the clipboard.
  193. - **Paste***: Pastes the content of the clipboard if it contains text.
  194. - **Select All***: Selects the all code in the text editor.
  195. - **Duplicate Selection**: Copies the selection and appends it next to the selection.
  196. - **Duplicate Lines**: Duplicates the current line and adds it as a new line below the
  197. current line.
  198. - **Evaluate Selection***: Computes the values of the selected text if it contains `only`
  199. a mathematical expression, such as ``83 * 3`` or ``pow(2,3)``.
  200. - **Toggle Word Wrap**: Disables the horizontal scrollbar by wrapping the long lines to
  201. the next line. Note that this is just a visual change and no new linebreaks are added.
  202. - **Line**: Provides a set of line operations. Depending on the opened file, the options
  203. might also be directly in the Edit menu, instead of a submenu.
  204. - **Move Up**: Moves the current line or the selected line(s) one line up.
  205. - **Move Down**: Moves the current line or the selected line(s) one line down.
  206. - **Indent***: Indents the text from the caret or the selected line(s), following the
  207. indentation setting.
  208. - **Unindent***: Unindents the text from the caret or the selected line(s), following the
  209. indentation setting.
  210. - **Delete Line**: Deletes the current line or the selected line(s).
  211. - **Toggle Comment***: Comments and uncomments the current line or the selected line(s).
  212. You can perform the same action by selecting line(s) and choosing the same action
  213. after right-clicking on the selected text.
  214. - **Folding**: Provides a set of folding options for the selected text. Depending on the
  215. opened file, the options might also be directly in the Edit menu, instead of a submenu.
  216. - **Fold/Unfold Line***: If the code in the current line has a code block or code region
  217. beneath it, it hides this block by collapsing the lines. You can then unfold it using
  218. this option again, using the ">" arrow next to the line number in the coding area,
  219. or clicking on the ellipsis "..." icon at the end of the folded line.
  220. - **Fold All Lines**: Folds all code blocks or code regions in the open document.
  221. - **Unfold All Lines**: Unfolds all code blocks and code regions in the open document.
  222. - **Create Code Region***: Wraps the selected text in a foldable code region to improve
  223. the readability of larger scripts. See :ref:`doc_gdscript_builtin_types` for more.
  224. - **Completion Query**: Suggests from built-in or user created symbols to auto-complete the
  225. partially written code. :kbd:`Up` and :kbd:`Down` arrows navigate up and down, pressing
  226. :kbd:`Enter` or :kbd:`Tab` accepts and adds the highlighted symbol to the code. :kbd:`Tab` will also replace existing text to the right of the caret.
  227. - **Trim Trailing Whitespaces**: Removes extra spacing at the end of each line in the file.
  228. - **Trim Final Newlines**: Removes the extra new lines at the end of the file.
  229. - **Indentation**: Provides options for the indentation of the open file. Depending
  230. on the opened file, the options might also be directly in the Edit menu, instead of a
  231. submenu.
  232. - **Convert Indent to Spaces**: Converts all indentation in the file to spaces.
  233. - **Convert Indent to Tabs**: Converts all indentation in the file to tabs.
  234. - **Auto Indent**: Converts the indentation of the selected lines (or the entire file) following the
  235. indentation setting.
  236. - **Convert Case**: Changes the case of the selected text to `Upper Case*`, `Lower Case*`, or
  237. capitalizes each initial letter of the words.
  238. - **Syntax Highlighter**: Allows you to choose the syntax highlighter.
  239. - **Plain Text**: Disables highlighting.
  240. - **Standard**: Default highlighting for C# scripts.
  241. - **JSON**: Syntax highlighting for JSON files.
  242. - **GDScript**: Syntax highlighting for GDScript files.
  243. The **Search** menu provides the following options:
  244. .. image:: img/script_editor_icons/text_editor_search_menu.webp
  245. - **Find...**: Opens the quick-find bar under the status bar to search for text in the open
  246. file. You can navigate to the next match and previous match using the up and down arrows, respectively. Checking **Match Case** makes the search case-sensitive. Checking **Whole Words** means that the text must not have any letters or numbers next to it, only symbols and whitespace.
  247. - **Find Next**: Similar to the down arrow, shows the next occurrence.
  248. - **Find Previous**: Similar to the up arrow, shows the previous occurrence.
  249. - **Replace...**: Opens the find and replace bar under the status bar to find text and replace it in the open file. You can choose to replace them one
  250. at a time or all at once. Additionally, you can limit the replacement to the selected
  251. text by checking the **Selection Only** checkbox in the find and replace bar. You can also use :kbd:`Ctrl + D` to
  252. additionally select the next instance of the currently selected text, allowing you to perform an in-line replacement on multiple occurrences.
  253. - **Find in Files...**: Opens a window to search for text within the files in the project
  254. folder. Selecting "Find..." starts with the chosen folder, and includes the file extensions
  255. checked in the filters. The results are shown in the bottom panel with the number of matches
  256. and total number of files found, in the **Search Results** tab. Clicking on a result opens
  257. the file and jumps to the respective line.
  258. - **Replace in Files...**: Opens a window to search and replace text with different text within the
  259. found files in the project folder. After clicking **Replace...**, you can select in which files to
  260. replace using the **Search Results** tab in the bottom panel by (un)checking them and using
  261. **Replace All** button.
  262. .. image:: img/editor_ui_script_editor_replaceinfiles.webp
  263. .. warning:: Note that "Replace in Files" operation cannot be undone!
  264. .. tip:: Both the **Find in Files** and **Replace in Files** windows share the **Search...**
  265. and **Replace...** buttons. The only difference in the latter window is an additional text
  266. field that automatically fills in the search results panel when the **Replace...** button
  267. is clicked. The replacement operation is only executed if you click the **Replace All**
  268. button in this bottom panel, allowing you to also edit the word to replace later within
  269. this panel.
  270. .. image:: img/editor_ui_script_editor_replace_all.webp
  271. - **Contextual Help***: Opens the list of built-in class reference similar to pressing :kbd:`F1`
  272. on a symbol, or choosing **Lookup Symbol** from the context menu.
  273. The **Go To** menu lets you navigate within the code at ease with these options:
  274. .. image:: img/script_editor_icons/text_editor_goto_menu.webp
  275. - **Go to Function...**: Opens the function list to jump to. You can achieve the same result
  276. by typing in the filter methods bar in the script panel.
  277. - **Go to Line...**: Jumps to the entered line number in the code editor.
  278. - **Bookmarks**: Contains actions for the bookmark functionality, which you can use to find
  279. your way through your code easier, such as an incomplete section. Bookmarked lines will
  280. have a blue bookmark symbol left of the line number.
  281. - **Toggle Bookmark***: Adds or removes the bookmark on the line where the caret is. You can
  282. also right click on a line to achieve this.
  283. - **Remove All Bookmarks**: Removes all bookmarks in the open document.
  284. - **Go to Next Bookmark**: Jumps to the next bookmark in the open document.
  285. - **Go to Previous Bookmark**: Jumps to the previous bookmark in the open document.
  286. - **Bookmarks** menu will also contain the list of bookmarked lines, including their line
  287. number and displaying the partial content in that line.
  288. - **Breakpoints**: Breakpoints are helpful while debugging your code. Similar to **Bookmarks**
  289. menu, this menu lets you add or remove breakpoints, navigate between them and directly
  290. jump to a specific breakpoint. An easy way to add a breakpoint is hovering over the blank area
  291. left of a line number. It will show a faded red circle. Clicking it will add a
  292. breakpoint and the circle will stay there. Clicking on a circle removes the breakpoint.
  293. **Debug** menu offers actions which can be used while debugging. See
  294. :ref:`doc_debugger_tools_and_options` for more.
  295. .. _doc_script_editor_coding_area:
  296. Coding area
  297. ~~~~~~~~~~~
  298. .. note:: This section will only cover the basics of the coding area in terms of the user
  299. interface. To learn more about scripting in Godot, refer to the :ref:`doc_gdscript` or
  300. :ref:`Scripting <toc-learn-scripting>` documentation.
  301. .. image:: img/editor_ui_script_editor_coding_area.webp
  302. The coding area is where you will type your scripts if you are using the built-in text editor.
  303. It offers highlighting and auto-completion features to help you while you code.
  304. The coding area shows line numbers on the left side. Below the navigation arrows on the
  305. right side, there is a clickable minimap that provides an overview of the entire script,
  306. allowing you to scroll through it.
  307. If a line of code is long enough (more than 80 characters, by default), the text editor
  308. will display a vertical line that can be used as a soft guideline. For a hard guideline,
  309. this value is set to 100 characters, by default. Both values can be changed, or the
  310. display of the line can be toggled in the "Appearance" settings of the text editor.
  311. .. |override| image:: img/script_editor_icons/override.webp
  312. .. |receiver| image:: img/script_editor_icons/receiver.webp
  313. .. |foldable| image:: img/script_editor_icons/Foldable.webp
  314. In the script, to the left of function definitions, you might see additional icons. The |override|
  315. icon indicates that this function is an :ref:`override <doc_overridable_functions>` of an existing
  316. function. Clicking it opens the documentation of the original function. The |receiver| icon means
  317. that it is a receiving method of a signal. Clicking it shows where the signal is coming
  318. from. A |foldable| icon to the left of the line denotes a foldable block. You can
  319. click to collapse or expand it.
  320. Alternatively, the ellipsis (...) icon can also be clicked to expand a folded block.
  321. The example below summarizes the paragraph above. Lines 52, 56, and 58 are foldable blocks,
  322. line 57 is a code region with the name "New Code Region," which you can also fold, and line
  323. 62 is a folded block.
  324. Line 53 is a bookmark, which can quickly be jumped to using the **Go To > Bookmarks** menu.
  325. Line 55 is a breakpoint that can be used in :ref:`debugging <doc_overview_of_debugging_tools>`.
  326. .. image:: img/script_editor_icons/text_editor_coding_area_indicators.webp
  327. Many of the colors of the text editor such as highlighting colors, or even breakpoint or
  328. bookmark icon colors can be customized. You can experiment them by opening the text editor
  329. settings navigating to **Editor > Editor Settings > Text Editor** section.