The code editor is used to edit HTML, CSS, or JavaScript code. The editor has a number of useful features including syntax highlighting, code completion, and code validation.
To paste code from the clipboard, you must use the Ctrl + V keyboard combination on Windows and Command + V on a Mac.
Syntax highlighting
Syntax highlighting makes code more readable. Script code blocks, variables, keywords, strings, script tags, comments, and errors are distinguished using different colors.
For example, comments are shown in green, and CSS properties in red. The colors used to display other elements depend on the type of code being entered.
Errors will be flagged with wavy or squiggly underlining.
Color values will be preceded by a square illustrating the color.
Code completion
The code editor makes coding faster and more accurate by offering code suggestions as you type.
The suggestion window is displayed automatically when you type a trigger character. To display the suggestion window manually, select the Trigger suggest command from the command palette. (To display the command palette, right click and select the Command palette option.)
Code validation
There are two ways you can validate your code:
- You can look for code with wavy or squiggly underlining.
- You can choose the Go to next problem command from the command palette. That will display the next error or warning.
Finding and replacing
To search for a particular code string, select the Find command from the command palette.
Within the search panel that appears, you specify the code segment you are looking for. The next match will be selected and all matching code will appear highlighted.
To find and replace code, you can select the Replace option from the command palette or click the chevron within the search panel.
Within the expanded panel, you can specify a search string and a replacement string.
Formatting HTML code
When you open the editor to edit HTML code, your code is not automatically restructured or formatted. As a result, it can appear difficult to read at first.
To format the code with logical structure and indenting, right click over the code and select the Format document command from the popup menu to format the entire code, or select the Format selection command to format the selected code.
The resulting code will be easier to read and understand.
Pop up menu options
A popup menu appears when you right click within code.
Different options will appear in the popup menu depending on the type of code you are editing. The following options are available on one or more popup menus.
Option | Description |
---|---|
Go to definition | Takes you to the line of code where the selected element is defined. |
Peek definition | Displays the definition of a type without leaving your current editing location. |
Peek references | Displays inline reference information without leaving your current editing location. |
Go to symbol | Find the first occurrence of the specified symbol. |
Rename symbol | Renames the current symbol. |
Change all occurrences | Replace all occurrences of the selected code with the code you enter or pick from the list. |
Format document | Restructures all your code to be more readable. |
Format selection | Restructures the selected code to be more readable. |
Cut | Removes the currently selected code and copies it to the clipboard. To paste from the clipboard, use the Ctrl + V key combination (or Command + V for Mac users). |
Copy | Copies the currently selected code to the clipboard. Syntax highlighting will not be copied. To paste from the clipboard, use the Ctrl + V key combination (or Command + P for Mac users). |
Command palette | Displays the complete list of editor commands. For a description of each command, see Editor commands (below). |
Editor commands
To choose any of the supported editor commands, right click over your code and select the Command palette option. All commands available for the kind of code you are editing will appear.
You can filter the command list by text or keywords. For example, if you type the word "find" then all commands that include the word "find" will appear.
The following commands are available from the command palette for one or more code types.
Command | Description |
---|---|
Add cursor above | Adds a cursor to the line above for simultaneous editing. |
Add cursor below | Adds a cursor to the line below for simultaneous editing. |
Add cursors to bottom | Adds a cursor to the last line of code. |
Add cursors to line ends | Adds a cursor to the end of each line. |
Add cursors to top | Adds a cursor to the first line of code. |
Add line comment | Comments out the selected code. |
Add selection to next find match | Adds the next occurrence of the find string to the selection. |
Add selection to previous find match | Adds the previous occurrence of the find string to the selection. |
Change all occurrences | Replace all occurrences of the selected code with the code you enter or pick from the list. |
Command palette | Displays the list of editor commands. |
Copy | Copies the currently selected code to the clipboard. Syntax highlighting will not be copied. To paste from the clipboard, use the Ctrl + V key combination (or Command + V for Mac users). |
Copy line down | Copies the current line of code and pastes it below. |
Copy line up | Copies the current line of code and pastes it above. |
Copy with syntax highlighting | Copies the currently selected code, along with any syntax highlighting. |
Cut | Removes the currently selected code and copies it to the clipboard. |
Delete all left | Deletes all code before the cursor within the current line. |
Delete all right | Deletes all code after the cursor within the current line. |
Delete line | Deletes the current line of code. |
Editor font zoom in | Increases the font size of the editor. |
Editor font zoom out | Decreases the font size of the editor. |
Editor font zoom reset | Resets the font size of the editor to the default size. |
Expand selection | Expands the code block selection to include the next logical block. |
Find | Opens a search panel that you can use to search for a particular code segment. The next match will be selected and all matching code will appear highlighted. Click the chevron to expand the search panel for find and replace operations.![]() |
Find next | Jumps to the next occurrence of the find string. |
Find next selection | Finds the next occurrence of the currently selected code. |
Find previous | Jumps to the previous occurrence of the find string. |
Find previous selection | Finds the previous occurrence of the currently selected code. |
Find with selection | Finds all occurrences of the currently selected code. |
Fold | Folds the innermost uncollapsed region at the cursor. |
Fold all | Folds all regions in the editor. |
Fold all block comments | Folds all regions that start with a block comment token (for example /*). |
Fold all regions | Folds all regions from markers (for example #region). |
Fold level x | Folds all regions of level x, except the region at the current cursor position. |
Fold recursively | Folds the innermost uncollapsed region at the cursor and all regions inside that region. |
Format document | Restructures all your code to be more readable. |
Format selection | Restructures the selected code to be more readable. |
Go to bracket | Jumps to the next open or close bracket. |
Go to definition | Takes you to the line of code where the selected element is defined. |
Go to line | Jumps to a specific line of code. |
Go to next problem | Displays the next error or warning. |
Go to previous problem | Displays the previous error or warning. |
Go to symbol | Find the first occurrence of the specified symbol. |
Indent line | Indents the current line of code. |
Join lines | Joins the current line of code with the line below. |
Move caret left | Moves the cursor one space to the left. |
Move caret right | Moves the cursor one space to the right. |
Move last selection to next find match | Selects the next occurrence of the find string. |
Move last selection to previous find match | Selects the previous occurrence of the find string. |
Move line down | Moves the current line of code under the line that follows. |
Move line up | Moves the current line of code above the preceding line. |
Open link | Opens the selected link. |
Outdent line | Outdents the current line of code. |
Peek definition | Previews the definition of a type without leaving your current editing location. |
Peek references | Displays inline reference information without leaving your current editing location. |
Remove line comment | Uncomments the current line of code. |
Rename symbol | Renames the current symbol. |
Replace | Displays the Find and Replace panel that you can use to find and replace specific code blocks. |
Replace with next value | Increments numerical values by 1 and toggles a boolean value between true and false. |
Replace with previous value | Decreases numerical values by 1 and toggles a boolean value between true and false. |
Select all occurrences of find match | Selects multiple occurrences of the specified text for simultaneous editing. |
Select to bracket | Selects the next set of brackets. |
Show accessibility help | Displays accessibility shortcuts. |
Show editor context menu | Displays the popup menu featuring select editor commands. |
Shrink selection | Shrinks the code block selection to exclude the last logical block. |
Soft undo | Moves the cursor to its previous position. |
Sort lines ascending | Sorts lines of code in alphabetical order. |
Sort lines descending | Sorts lines of code in reverse alphabetical order. |
Toggle block comment | Comments or uncomments a code block. |
Toggle high contrast theme | Switches between color themes featuring white and dark backgrounds. |
Toggle line comment | Comments or uncomments a line of code. |
Toggle tab key moves focus | Toggles the behavior of the tab key from inserting an indent to shifting focus. |
Transform to lowercase | Converts the selected text to lowercase. |
Transform to title case | Converts the selected text to title case (first letter in each word is capitalized). |
Transform to uppercase | Converts the selected text to uppercase. |
Transpose letters / Transpose characters around the cursor | Switches the position of the characters on either side of the cursor. |
Trigger suggest | Triggers the display of suggested completions. |
Trigger symbol highlight | Triggers the display of symbol highlighting. |
Trim trailing whitespace | Remove all the extra white spaces at the end of each line of code. |
Unfold | Unfolds the collapsed region at the cursor. |
Unfold all | Unfolds all regions in the editor. |
Unfold all regions | Unfolds all regions from markers. |
Unfold recursively | Unfolds the region at the cursor and all regions inside that region. |