diff --git a/doc/images/editor/editor-autoformat-setting.png b/doc/images/editor/editor-autoformat-setting.png deleted file mode 100644 index 686cb97ca..000000000 Binary files a/doc/images/editor/editor-autoformat-setting.png and /dev/null differ diff --git a/doc/images/editor/editor-autoformat-setting.webp b/doc/images/editor/editor-autoformat-setting.webp new file mode 100644 index 000000000..32a63a633 Binary files /dev/null and b/doc/images/editor/editor-autoformat-setting.webp differ diff --git a/doc/images/editor/editor-automatic-formatting.gif b/doc/images/editor/editor-automatic-formatting.gif deleted file mode 100644 index 98fd23eb9..000000000 Binary files a/doc/images/editor/editor-automatic-formatting.gif and /dev/null differ diff --git a/doc/images/editor/editor-automatic-formatting.webm b/doc/images/editor/editor-automatic-formatting.webm new file mode 100644 index 000000000..d6b60bc42 Binary files /dev/null and b/doc/images/editor/editor-automatic-formatting.webm differ diff --git a/doc/images/editor/editor-cells.png b/doc/images/editor/editor-cells.png deleted file mode 100644 index 8eb0390db..000000000 Binary files a/doc/images/editor/editor-cells.png and /dev/null differ diff --git a/doc/images/editor/editor-cells.webp b/doc/images/editor/editor-cells.webp new file mode 100644 index 000000000..75d15877e Binary files /dev/null and b/doc/images/editor/editor-cells.webp differ diff --git a/doc/images/editor/editor-class-function-selector.gif b/doc/images/editor/editor-class-function-selector.gif deleted file mode 100644 index 898d7b5c1..000000000 Binary files a/doc/images/editor/editor-class-function-selector.gif and /dev/null differ diff --git a/doc/images/editor/editor-class-function-selector.webm b/doc/images/editor/editor-class-function-selector.webm new file mode 100644 index 000000000..6e3484cb4 Binary files /dev/null and b/doc/images/editor/editor-class-function-selector.webm differ diff --git a/doc/images/editor/editor-code-completion.png b/doc/images/editor/editor-code-completion.png deleted file mode 100644 index 76e30a7ed..000000000 Binary files a/doc/images/editor/editor-code-completion.png and /dev/null differ diff --git a/doc/images/editor/editor-code-completion.webp b/doc/images/editor/editor-code-completion.webp new file mode 100644 index 000000000..bdaf5be10 Binary files /dev/null and b/doc/images/editor/editor-code-completion.webp differ diff --git a/doc/images/editor/editor-code-style-setting.png b/doc/images/editor/editor-code-style-setting.png deleted file mode 100644 index 2f517b7a8..000000000 Binary files a/doc/images/editor/editor-code-style-setting.png and /dev/null differ diff --git a/doc/images/editor/editor-code-style-setting.webp b/doc/images/editor/editor-code-style-setting.webp new file mode 100644 index 000000000..f480bb8a1 Binary files /dev/null and b/doc/images/editor/editor-code-style-setting.webp differ diff --git a/doc/images/editor/editor-components.png b/doc/images/editor/editor-components.png deleted file mode 100644 index d87c60c72..000000000 Binary files a/doc/images/editor/editor-components.png and /dev/null differ diff --git a/doc/images/editor/editor-components.webp b/doc/images/editor/editor-components.webp new file mode 100644 index 000000000..bbfd5a43d Binary files /dev/null and b/doc/images/editor/editor-components.webp differ diff --git a/doc/images/editor/editor-file-switcher.gif b/doc/images/editor/editor-file-switcher.gif deleted file mode 100644 index 0d12cac2d..000000000 Binary files a/doc/images/editor/editor-file-switcher.gif and /dev/null differ diff --git a/doc/images/editor/editor-file-switcher.png b/doc/images/editor/editor-file-switcher.png deleted file mode 100644 index 6759aaa99..000000000 Binary files a/doc/images/editor/editor-file-switcher.png and /dev/null differ diff --git a/doc/images/editor/editor-file-switcher.webm b/doc/images/editor/editor-file-switcher.webm new file mode 100644 index 000000000..7a291effe Binary files /dev/null and b/doc/images/editor/editor-file-switcher.webm differ diff --git a/doc/images/editor/editor-file-switcher.webp b/doc/images/editor/editor-file-switcher.webp new file mode 100644 index 000000000..231fbde35 Binary files /dev/null and b/doc/images/editor/editor-file-switcher.webp differ diff --git a/doc/images/editor/editor-find-replace-panel.png b/doc/images/editor/editor-find-replace-panel.png deleted file mode 100644 index f35259d02..000000000 Binary files a/doc/images/editor/editor-find-replace-panel.png and /dev/null differ diff --git a/doc/images/editor/editor-find-replace-panel.webp b/doc/images/editor/editor-find-replace-panel.webp new file mode 100644 index 000000000..c8db4a5b2 Binary files /dev/null and b/doc/images/editor/editor-find-replace-panel.webp differ diff --git a/doc/images/editor/editor-go-to-definition.gif b/doc/images/editor/editor-go-to-definition.gif deleted file mode 100644 index fa11f48de..000000000 Binary files a/doc/images/editor/editor-go-to-definition.gif and /dev/null differ diff --git a/doc/images/editor/editor-go-to-definition.webm b/doc/images/editor/editor-go-to-definition.webm new file mode 100644 index 000000000..9f613e425 Binary files /dev/null and b/doc/images/editor/editor-go-to-definition.webm differ diff --git a/doc/images/editor/editor-go-to-line.gif b/doc/images/editor/editor-go-to-line.gif deleted file mode 100644 index 6543e7310..000000000 Binary files a/doc/images/editor/editor-go-to-line.gif and /dev/null differ diff --git a/doc/images/editor/editor-go-to-line.webm b/doc/images/editor/editor-go-to-line.webm new file mode 100644 index 000000000..022a56fec Binary files /dev/null and b/doc/images/editor/editor-go-to-line.webm differ diff --git a/doc/images/editor/editor-hoverhint.png b/doc/images/editor/editor-hoverhint.png deleted file mode 100644 index 4dcf72265..000000000 Binary files a/doc/images/editor/editor-hoverhint.png and /dev/null differ diff --git a/doc/images/editor/editor-hoverhint.webp b/doc/images/editor/editor-hoverhint.webp new file mode 100644 index 000000000..768fa8770 Binary files /dev/null and b/doc/images/editor/editor-hoverhint.webp differ diff --git a/doc/images/editor/editor-linting-setting.png b/doc/images/editor/editor-linting-setting.png deleted file mode 100644 index 8016e4ebc..000000000 Binary files a/doc/images/editor/editor-linting-setting.png and /dev/null differ diff --git a/doc/images/editor/editor-linting-setting.webp b/doc/images/editor/editor-linting-setting.webp new file mode 100644 index 000000000..30eaeac31 Binary files /dev/null and b/doc/images/editor/editor-linting-setting.webp differ diff --git a/doc/images/editor/editor-pane-code-error.png b/doc/images/editor/editor-pane-code-error.png deleted file mode 100644 index 76e3d5536..000000000 Binary files a/doc/images/editor/editor-pane-code-error.png and /dev/null differ diff --git a/doc/images/editor/editor-pane-code-error.webp b/doc/images/editor/editor-pane-code-error.webp new file mode 100644 index 000000000..4a24f2575 Binary files /dev/null and b/doc/images/editor/editor-pane-code-error.webp differ diff --git a/doc/images/editor/editor-run-configuration.png b/doc/images/editor/editor-run-configuration.png deleted file mode 100644 index 45edfe47f..000000000 Binary files a/doc/images/editor/editor-run-configuration.png and /dev/null differ diff --git a/doc/images/editor/editor-run-configuration.webp b/doc/images/editor/editor-run-configuration.webp new file mode 100644 index 000000000..e423a261a Binary files /dev/null and b/doc/images/editor/editor-run-configuration.webp differ diff --git a/doc/images/editor/editor-split-panels.gif b/doc/images/editor/editor-split-panels.gif deleted file mode 100644 index 811053b22..000000000 Binary files a/doc/images/editor/editor-split-panels.gif and /dev/null differ diff --git a/doc/images/editor/editor-split-panels.webm b/doc/images/editor/editor-split-panels.webm new file mode 100644 index 000000000..35e1664f8 Binary files /dev/null and b/doc/images/editor/editor-split-panels.webm differ diff --git a/doc/images/editor/editor-standard.png b/doc/images/editor/editor-standard.png deleted file mode 100644 index fdc45cad6..000000000 Binary files a/doc/images/editor/editor-standard.png and /dev/null differ diff --git a/doc/images/editor/editor-standard.webp b/doc/images/editor/editor-standard.webp new file mode 100644 index 000000000..54295b4f8 Binary files /dev/null and b/doc/images/editor/editor-standard.webp differ diff --git a/doc/images/editor/editor-subsections.png b/doc/images/editor/editor-subsections.png deleted file mode 100644 index bbb8ac3d7..000000000 Binary files a/doc/images/editor/editor-subsections.png and /dev/null differ diff --git a/doc/images/editor/editor-subsections.webp b/doc/images/editor/editor-subsections.webp new file mode 100644 index 000000000..e6561df3f Binary files /dev/null and b/doc/images/editor/editor-subsections.webp differ diff --git a/doc/images/editor/editor-syntax-highlighting.gif b/doc/images/editor/editor-syntax-highlighting.gif deleted file mode 100644 index 483c464b9..000000000 Binary files a/doc/images/editor/editor-syntax-highlighting.gif and /dev/null differ diff --git a/doc/images/editor/editor-syntax-highlighting.webm b/doc/images/editor/editor-syntax-highlighting.webm new file mode 100644 index 000000000..59b95a7ed Binary files /dev/null and b/doc/images/editor/editor-syntax-highlighting.webm differ diff --git a/doc/images/editor/editor-tabs-browser.png b/doc/images/editor/editor-tabs-browser.png deleted file mode 100644 index b8c3f3cbe..000000000 Binary files a/doc/images/editor/editor-tabs-browser.png and /dev/null differ diff --git a/doc/images/editor/editor-tabs-browser.webp b/doc/images/editor/editor-tabs-browser.webp new file mode 100644 index 000000000..ded68f95f Binary files /dev/null and b/doc/images/editor/editor-tabs-browser.webp differ diff --git a/doc/images/editor/editor-tabs-sorting.gif b/doc/images/editor/editor-tabs-sorting.gif deleted file mode 100644 index 698bf850d..000000000 Binary files a/doc/images/editor/editor-tabs-sorting.gif and /dev/null differ diff --git a/doc/images/editor/editor-tabs-sorting.webm b/doc/images/editor/editor-tabs-sorting.webm new file mode 100644 index 000000000..c5791bf3b Binary files /dev/null and b/doc/images/editor/editor-tabs-sorting.webm differ diff --git a/doc/panes/editor.rst b/doc/panes/editor.rst index 2ce8011e3..86c579bf1 100644 --- a/doc/panes/editor.rst +++ b/doc/panes/editor.rst @@ -8,7 +8,7 @@ Spyder's multi-language **Editor** pane is the key element of the IDE, where you The Editor offers a variety of core features, such as autocompletion, real-time analysis, syntax highlighting, horizontal and vertical splitting, and much more. In addition, it integrates a number of powerful tools for an easy to use, efficient editing experience. -.. image:: /images/editor/editor-standard.png +.. image:: /images/editor/editor-standard.webp :alt: Spyder's Editor pane, split horizontally and with style analysis @@ -21,7 +21,7 @@ Key components The Editor pane consists of the following areas: -.. image:: /images/editor/editor-components.png +.. image:: /images/editor/editor-components.webp :alt: Spyder's Editor pane, showing its different areas (described below) 1. The left sidebar shows line numbers and displays any code analysis warnings that exist in the current file. @@ -49,12 +49,13 @@ Tabs You can browse and navigate between open files in the Editor with tabs. Click the :guilabel:`Browse tabs` button on the left of the tab bar to display a list of open files, with the active tab checked. -.. image:: /images/editor/editor-tabs-browser.png +.. image:: /images/editor/editor-tabs-browser.webp :alt: Spyder's Editor pane, showing the tabs browser Reorder files by dragging and dropping, or with :guilabel:`Sort tabs alphabetically` in the options menu, which also allows closing all tabs to the right of, or all tabs but the active one. -.. image:: /images/editor/editor-tabs-sorting.gif +.. video:: /images/editor/editor-tabs-sorting.webm + :loop: :alt: Spyder's Editor pane, showing how to browse and sort open tabs alphabetically @@ -66,13 +67,14 @@ File switcher The Editor features a file switcher, which enables you to navigate and switch between multiple open files. The file switcher is helpful for locating any file when there are several files opened. -.. image:: /images/editor/editor-file-switcher.png +.. image:: /images/editor/editor-file-switcher.webp :alt: Spyder's Editor pane, showing the file switcher It can be accessed from the :menuselection:`File --> File Switcher` menu or :kbd:`Ctrl-P`, and includes a search function. You can type in any part of an open file's name and—if exists—it can be switched to by pressing :kbd:`Enter`. -.. image:: /images/editor/editor-file-switcher.gif +.. video:: /images/editor/editor-file-switcher.webm + :loop: :alt: Spyder's Editor pane, showing searching and switching to an existing file @@ -84,7 +86,8 @@ Split panels The Editor can be split horizontally and vertically into as many distinct panels as desired. This allows viewing and editing the contents of several files (or different parts of the same file) at the same time. -.. image:: /images/editor/editor-split-panels.gif +.. video:: /images/editor/editor-split-panels.webm + :loop: :alt: Spyder's Editor pane, showing how to split panels Split the Editor with the :guilabel:`Split vertically` (:kbd:`Ctrl-Shift-{`) and :guilabel:`Split horizontally` (:kbd:`Ctrl-Shift--`) commands in the options menu, and use :guilabel:`Close this panel` (:kbd:`Alt-Shift-W`) to close the selected split panel. @@ -111,7 +114,8 @@ The :guilabel:`Syntax highlighting theme` section allows you to change the color You can switch between available themes in the drop-down menu, modify the selected theme, create a new theme, and more. The :guilabel:`Fonts` section lets you change the text font and size. -.. image:: /images/editor/editor-syntax-highlighting.gif +.. video:: /images/editor/editor-syntax-highlighting.webm + :loop: :alt: Spyder's Editor pane, showing how to switch between syntax highlighting themes .. note:: Changes made to the syntax highlighting theme and font settings are common to all source files, regardless of their language. @@ -126,7 +130,7 @@ A "code cell" in Spyder is a block of lines, typically in a script, that can be This is similar to "cell" behavior in Jupyter Notebook and MATLAB. You can divide your scripts into as many cells as needed, or none at all—the choice is yours. -.. image:: /images/editor/editor-cells.png +.. image:: /images/editor/editor-cells.webp :alt: Spyder's Editor pane, showing an example of a code cell You can separate cells by lines starting with either: @@ -138,7 +142,7 @@ Providing a description to the right of the separator will give that cell its ow You can also create "subsections" by adding more ``%`` signs to the cell separator, e.g. ``# %%%`` to create a level 2 subsection, ``# %%%%`` for level 3, etc. This displays multiple levels in the :ref:`panes-outline` pane. -.. image:: /images/editor/editor-subsections.png +.. image:: /images/editor/editor-subsections.webp :alt: Spyder outline pane, showing an example of sub sections .. note:: This only affects how the cell is displayed in the :ref:`panes-outline`, and doesn't affect running it in the Editor. @@ -155,13 +159,14 @@ Automatic formatting The Editor has built-in support for automatically formatting your code using several popular tools, including `Autopep8 `_ and `Black `_. The :guilabel:`Format file or selection with {tool}` command in the :guilabel:`Source` or context menu will format either the selected fragment (if text is selected) or the entire active file. -.. image:: /images/editor/editor-automatic-formatting.gif +.. video:: /images/editor/editor-automatic-formatting.webm + :loop: :alt: Spyder Editor pane, showing an example of code selection formatting You can have the Editor automatically autoformat a file every time you save your work. To set this up, go to :menuselection:`Preferences --> Completion and linting --> Code style and formatting --> Code formatting` and check the :guilabel:`Autoformat files on save` option. -.. image:: /images/editor/editor-autoformat-setting.png +.. image:: /images/editor/editor-autoformat-setting.webp :alt: Spyder's preferences dialog, showing checking the autoformat files on save setting @@ -216,7 +221,7 @@ Run configuration You can use the :guilabel:`Run configuration per file` dialog to set each file's working directory, console mode (current, dedicated or external), command line arguments, execution options (clear all variables, run in an existing/empty namespace, debug on error), and more. -.. image:: /images/editor/editor-run-configuration.png +.. image:: /images/editor/editor-run-configuration.webp :alt: Spyder's Editor pane, showing the Run Configuration dialog To access it, click :menuselection:`Run --> Configuration per file...` or press :kbd:`Ctrl-F6` / :kbd:`Cmd-F6`. @@ -239,7 +244,7 @@ Typing your search string in the resulting panel below the Editor highlights eac Navigate between matches with the :guilabel:`Find Previous` and :guilabel:`Find Next` buttons in the find/replace panel, their corresponding entries in the :guilabel:`Search` menu, or use the :kbd:`F2` and :kbd:`F3` keys. Use the :guilabel:`.*` button to process search text as a `regular expression `_, :guilabel:`Aa` to treat it as case-sensitive and :guilabel:`[–]` to only match whole words (e.g. for ``data``, match ``data()`` but not ``dataframe``). -.. image:: /images/editor/editor-find-replace-panel.png +.. image:: /images/editor/editor-find-replace-panel.webp :alt: Spyder's Editor pane, showing the find and replace panel @@ -251,7 +256,8 @@ Go to line The :guilabel:`Go to line` dialog allows jumping to a specific line in the active file. Open it with :menuselection:`Search --> Go to line` or :kbd:`Ctrl-L` / :kbd:`Cmd-L`, type the line number you want to scroll to and press :kbd:`Enter` (or click :guilabel:`OK`). -.. image:: /images/editor/editor-go-to-line.gif +.. video:: /images/editor/editor-go-to-line.webm + :loop: :alt: Spyder's Editor pane, showing the go to line feature It also shows the current line number and total line count in the file. @@ -265,7 +271,8 @@ Class/function selector This panel, activated under :menuselection:`Source --> Show selector for classes and functions`, displays (as applicable) the name of the cell, function/method and class the Editor cursor is located inside. Use its dropdowns to view and jump to the functions, methods and classes in the current file. -.. image:: /images/editor/editor-class-function-selector.gif +.. video:: /images/editor/editor-class-function-selector.webm + :loop: :alt: Spyder's Editor pane, showing the class and function selector panel @@ -295,7 +302,7 @@ Automatic code completion as you type is enabled by default in the Editor, and c For example, typing ``cla`` will display the keyword ``class``, the decorator ``classmethod`` and two built-in snippets with class templates. Select the desired completion with the arrow keys and :kbd:`Enter`, or by double clicking. -.. image:: /images/editor/editor-code-completion.png +.. image:: /images/editor/editor-code-completion.webp :alt: Spyder's Editor pane, showing a code completion example You can enable or disable on-the-fly code completion, as well as modify when it is triggered and what results are shown, under :menuselection:`Preferences --> Completion and Linting --> General --> Completions`. @@ -309,19 +316,19 @@ Linting and code style Spyder can optionally highlight syntax errors, style issues, and other potential problems with your code in the Editor, which can help you spot bugs quickly and make your code easier to read and understand. -.. image:: /images/editor/editor-pane-code-error.png +.. image:: /images/editor/editor-pane-code-error.webp :alt: Spyder's Editor pane, showing an example of a highlighted code error The Editor's basic linting, powered by `Pyflakes `_, warns of syntax errors and likely bugs in your code. It is on by default, and can be disabled or customized under :menuselection:`Preferences --> Completion and Linting --> Linting`. -.. image:: /images/editor/editor-linting-setting.png +.. image:: /images/editor/editor-linting-setting.webp :alt: Spyder's preferences dialog, showing linting settings Code style analysis, powered by `Pycodestyle `_, flags deviations from the style conventions in :pep:`8`. It is not active by default, but you can enable it and customize the `Pycodestyle error codes `_ shown with the options under :menuselection:`Preferences --> Completion and Linting --> Code style and formatting --> Code Style`. -.. image:: /images/editor/editor-code-style-setting.png +.. image:: /images/editor/editor-code-style-setting.webp :alt: Spyder's preferences dialog, showing code style and formatting settings @@ -332,12 +339,13 @@ Introspection features If there's a function, class or variable for which you would like to check its definition, you need to :kbd:`Ctrl`/:kbd:`Cmd`-click its name in the Editor (or click its name and press :kbd:`Ctrl-G` / :kbd:`Cmd-G` to jump to the file and line where it is declared. -.. image:: /images/editor/editor-go-to-definition.gif +.. video:: /images/editor/editor-go-to-definition.webm + :loop: :alt: Spyder's Editor pane, showing the go to definition feature You can hover over the name of an object for pop-up help, as :ref:`described in the Help pane docs `. -.. image:: /images/editor/editor-hoverhint.png +.. image:: /images/editor/editor-hoverhint.webp :alt: Spyder's Editor pane, showing an example of a hover hint Finally, if you type the name of a function, method or class constructor and then an open parenthesis, a calltip will pop up which shows the function's parameters as you type them, as well as a summary of its documentation.