Follow

Using the code editor

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 definitionTakes you to the line of code where the selected element is defined.
Peek definitionDisplays the definition of a type without leaving your current editing location.
Peek referencesDisplays inline reference information without leaving your current editing location.
Go to symbolFind the first occurrence of the specified symbol.
Rename symbolRenames the current symbol.
Change all occurrencesReplace all occurrences of the selected code with the code you enter or pick from the list.
Format documentRestructures all your code to be more readable.
Format selectionRestructures the selected code to be more readable.
CutRemoves 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).
CopyCopies 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 paletteDisplays 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 aboveAdds a cursor to the line above for simultaneous editing.
Add cursor belowAdds  a cursor to the line below for simultaneous editing.
Add cursors to bottomAdds a cursor to the last line of code.
Add cursors to line endsAdds a cursor to the end of each line.
Add cursors to topAdds a cursor to the first line of code.
Add line commentComments out the selected code.
Add selection to next find matchAdds the next occurrence of the find string to the selection.
Add selection to previous find matchAdds the previous occurrence of the find string to the selection.
Change all occurrencesReplace all occurrences of the selected code with the code you enter or pick from the list.
Command paletteDisplays the list of editor commands.
CopyCopies 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 downCopies the current line of code and pastes it below.
Copy line upCopies the current line of code and pastes it above.
Copy with syntax highlightingCopies the currently selected code, along with any syntax highlighting.
CutRemoves the currently selected code and copies it to the clipboard.
Delete all leftDeletes all code before the cursor within the current line.
Delete all rightDeletes all code after the cursor within the current line.
Delete lineDeletes the current line of code.
Editor font zoom inIncreases the font size of the editor.
Editor font zoom outDecreases the font size of the editor.
Editor font zoom resetResets the font size of the editor to the default size.
Expand selectionExpands the code block selection to include the next logical block.
FindOpens 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 nextJumps to the next occurrence of the find string.
Find next selectionFinds the next occurrence of the currently selected code.
Find previousJumps to the previous occurrence of the find string.
Find previous selectionFinds the previous occurrence of the currently selected code.
Find with selectionFinds all occurrences of the currently selected code.
FoldFolds the innermost uncollapsed region at the cursor.
Fold allFolds all regions in the editor.
Fold all block commentsFolds all regions that start with a block comment token (for example /*).
Fold all regionsFolds all regions from markers (for example #region).
Fold level xFolds all regions of level x, except the region at the current cursor position.
Fold recursivelyFolds the innermost uncollapsed region at the cursor and all regions inside that region.
Format documentRestructures all your code to be more readable.
Format selectionRestructures the selected code to be more readable.
Go to bracketJumps to the next open or close bracket.
Go to definitionTakes you to the line of code where the selected element is defined.
Go to lineJumps to a specific line of code.
Go to next problemDisplays the next error or warning.
Go to previous problemDisplays the previous error or warning.
Go to symbolFind the first occurrence of the specified symbol.
Indent lineIndents the current line of code.
Join linesJoins the current line of code with the line below.
Move caret leftMoves the cursor one space to the left.
Move caret rightMoves the cursor one space to the right.
Move last selection to next find matchSelects the next occurrence of the find string.
Move last selection to previous find matchSelects the previous occurrence of the find string.
Move line downMoves the current line of code under the line that follows.
Move line upMoves the current line of code above the preceding line.
Open linkOpens the selected link.
Outdent lineOutdents the current line of code.
Peek definitionPreviews the definition of a type without leaving your current editing location.
Peek referencesDisplays inline reference information without leaving your current editing location.
Remove line commentUncomments the current line of code.
Rename symbolRenames the current symbol.
ReplaceDisplays the Find and Replace panel that you can use to find and replace specific code blocks.
Replace with next valueIncrements numerical values by 1 and toggles a boolean value between true and false.
Replace with previous valueDecreases numerical values by 1 and toggles a boolean value between true and false.
Select all occurrences of find matchSelects multiple occurrences of the specified text for simultaneous editing.
Select to bracketSelects the next set of brackets.
Show accessibility helpDisplays accessibility shortcuts.
Show editor context menuDisplays the popup menu featuring select editor commands.
Shrink selectionShrinks the code block selection to exclude the last logical block.
Soft undoMoves the cursor to its previous position.
Sort lines ascendingSorts lines of code in alphabetical order.
Sort lines descendingSorts lines of code in reverse alphabetical order.
Toggle block commentComments or uncomments a code block.
Toggle high contrast themeSwitches between color themes featuring white and dark backgrounds.
Toggle line commentComments or uncomments a line of code.
Toggle tab key moves focusToggles the behavior of the tab key from inserting an indent to shifting focus.
Transform to lowercaseConverts the selected text to lowercase.
Transform to title caseConverts the selected text to title case (first letter in each word is capitalized).
Transform to uppercaseConverts the selected text to uppercase.
Transpose letters / Transpose characters around the cursorSwitches the position of the characters on either side of the cursor.
Trigger suggestTriggers the display of suggested completions.
Trigger symbol highlightTriggers the display of symbol highlighting.
Trim trailing whitespaceRemove all the extra white spaces at the end of each line of code.
UnfoldUnfolds the collapsed region at the cursor.
Unfold allUnfolds all regions in the editor.
Unfold all regionsUnfolds all regions from markers.
Unfold recursivelyUnfolds the region at the cursor and all regions inside that region.


0 Comments

Please sign in to leave a comment.

Search: WildApricot.com 

About results ( seconds) Sort by: 
Sorry, an error occured when performing search.