This window is where you can customize the Web Editor to work exactly the way you want it to. To get to the Preferences window, go to Web Editor > Preferences, or press the shortcut Cmd+, (that’s the command key and the comma key.)
There are five preference tabs: General, Editor, Extensions, Colors, and Placeholders.
General
This is where you can configure some of the more basic stuff the Web Editor does.
When application starts
Choose which action the editor will take when you first open it. “Show initial menu” brings up the splash screen that features quick links to create new or open previous projects. “Show empty screen” takes you straight to an empty website project. “Open last project” reopens the most recently accessed project.
Preferred external browser
This drop-down menu allows you to choose the browser that launches when you click the preview button in the upper-right corner of the Web Editor window.
Default location
This is the location that the Web Editor uses to store new projects. You can always change this location after you’ve started a project.
Show the full path in the application’s title
The title bar of the Web Editor will show the full path to the currently selected file.
Editor
The settings in this tab only apply to the editor panes.
Select the display features to be used
These options adjust how code is displayed in the editors.
- Show white space guide: Displays arrows in places where the Tab key has been used, and center dots where the space key has been used. This helps you determine where text may line up on separate lines.
- Syntax highlighting: Toggles color schemes being used to highlight code
- Display EOL: “EOL” means “end of line”; shows notation for character returns and line feeds (CR and LF)
- Show line numbers: Displays line numbers in the left gutter
- Display indent guide: Displays vertical columns where tab lines are located
- Show right margin: Displays a right margin guide line
Select the features that the Editor will apply to the open file
These options affect the currently open file’s permissions and actions.
- Folding enabled: Enables foldable blocks
- Read only: Disables the ability to edit the open file
- Wrap mode: Wraps long lines of code to following lines, so that there’s no need to scroll left and right to see the entire line
- Auto-indent: Set the cursor to indent the next line when pressing enter, if the current code block is indented
- Over type: Allows typing over existing characters, insead of inserting characters before existing content
Select the auto-completion options to be used
Auto-completion is a very smart tool. It’s kind of like spell check for web code, but a bit different. It ultimately reduces the number of errors that you make by ensuring that all of your HTML code is entered properly—both in spelling and syntax.
- Auto-completion enabled: Allows the editor to guess and suggest code that you are entering (this helps you avoid syntax errors, which almost always result in code failure!)
- Allow multiple selection: When suggestions pop up as you type out code, this option allows you to select multiple suggestions at once by holding the Cmd key and clicking them.
- Add double quotes to HTML parameters: Automatically includes double quotes around certain values in the HTML, which is required by certain browsers.
- Close HTML and XML tags automatically: Almost every HTML or XML tag requires a corresponding closing tag, and this option will include them for you so you don’t forget.
- Wrap selection in quotes when hitting ‘ or “ key: Highlight a block of text and hit ‘ or “ to add quotes on the beginning and end of the selection.
- Edit opening and closing tags simultaneously: When you edit either an opening or closing tag, its corresponding tag will also be edited at the same time. Two cursors!
Select fonts and font sizes used in the editing panes
Choose fonts and font sizes to be displayed in each editing pane. You can also specify how many spaces will be inserted whenever you use the Tab key.
Extensions
This is where you can configure how the Web Editor recognizes file types by extension, and how to handle them.
Choose a programming language from the drop-down menu and adjust the list of associated file extensions as necessary. Each item in the drop-down corresponds to a color scheme that can be adjusted in the Colors tab.
To add an extension to the list, click the + button, type the extension, and press enter. To remove an extension from the list, select it and click the - button.
Colors
You can adjust the color scheme of the various programming languages, either by choosing the color associated with each code element manually, or by choosing a predefined color scheme.
Language
Select the coding language for which you want to display the color settings.
Color Scheme
These are the available preset coloring schemes that you can choose from. You can save your own custom scheme and access it from the menu.
Element
This is the list of elements that can be styled for the currently selected coding language.
- FG: The foreground color to be applied to the corresponding element
- BG: The background color to be applied to the corresponding element
File Extensions
This is the list of file extensions to which the current color scheme will be applied. You can add extensions by pressing the + button found below this window, and you can delete extensions by selecting them and clicking the - button.
Import Scheme
If you have a color scheme saved from TextMate or Vim, you can click this button and find the scheme file on your computer. This replaces all your currently selected color scheme settings. Imported themes may not look exactly the way they did in their origin program.
Preview
Allows you to see what the scheme looks like in the editor before applying the changes.
Save as…
Allows you to save the currently configured color scheme so that it can be accessed later from the Color Scheme drop-down menu.
Placeholders
A placeholder is the definition of a variable that is used within a Web Editor theme. To create a new placeholder, click the + button, enter its name on in the left column, and enter its value in the right column. To delete a placeholder, select it and click the - button.
