PDF (adobe.com)

Use code hints



The code hints feature helps you insert and edit code quickly and without mistakes. As you type characters in Code view, you see a list of candidates that automatically complete your entry. For example, when you type the first characters of a tag, attribute, or CSS property name, you see a list of options beginning with those characters. This feature simplifies the insertion and editing of code. You can also use it to see the available attributes for a tag, the available parameters for a function, or the available methods for an object.

Code hints are available for several kinds of code. When you type the beginning character of a particular code type, you see a list of appropriate candidates. For example, to display a list of code hints for HTML tag names, type a right angle bracket (<). Similarly, to display JavaScript code hinting, type a period (dot operator) after an object.

For best results, especially when using code hints for functions and objects, set the Delay option in the Code Hints preferences dialog box to 0 seconds.

The code hinting feature also recognizes custom JavaScript classes that are not built in to the language. You can write these custom classes yourself or add them through third-party libraries like Prototype.

The list of code hints disappears when you press Backspace (Windows) or Delete (Macintosh).

For a video tutorial on code hinting, see www.adobe.com/go/lrvid4048_dw.

Supported languages and technologies

Dreamweaver supports code hinting for the following languages and technologies:

  • HTML

  • CSS

  • DOM (Document Object Model)

  • JavaScript (includes custom class hinting)

  • Ajax

  • Spry

  • Adobe ColdFusion

  • JSP

  • PHP MySQL

  • ASP JavaScript

  • ASP VBScript

  • ASP.NET C#

  • ASP.NET VB

Display a code hints menu

The code hints menu appears automatically as you type in Code view. But you can also display the code hints menu manually, without typing.

  1. In Code view (Window > Code), place the insertion point inside a tag.
  2. Press Control+Spacebar.

Insert code in Code view by using code hints

  1. Type the beginning of a piece of code. For example, to insert a tag, type a right angle bracket (<). To insert an attribute, place the insertion point immediately after a tag name and press Spacebar.

    A list of items (such as tag names or attribute names) appears.

    To close the list at any time, press Esc.
  2. Scroll through the list by using the scroll bar or the Up Arrow and Down Arrow keys.
  3. To insert an item from the list, double-click it, or select it and press Enter (Windows) or Return (Macintosh).
    If a recently created CSS style doesn’t appear in a code hints list of CSS styles, select Refresh Style List from the code hints list. If Design view is visible, sometimes invalid code appears in Design view temporarily after you select Refresh Style List. To remove that invalid code from Design view, press F5 to refresh after you finish inserting the style.
  4. To insert a closing tag, type </ (slash).
    Note: By default, Dreamweaver determines when a closing tag is needed and inserts if automatically. You can change this default behavior so that Dreamweaver inserts a closing tag after you type the final angle bracket (>) of the opening tag. Alternatively, the default behavior can be to insert no closing tag at all. Select Edit > Preferences > Code Hints, and then select one of the Close Tags options.

Edit a tag by using code hints

  • To replace an attribute with a different attribute, delete the attribute and its value. Then add an attribute and its value as described in the previous procedure.

  • To change a value, delete the value, and then add a value as described in the previous procedure.

Refreshing JavaScript code hints

Dreamweaver automatically refreshes the list of available code hints as you work in JavaScript files. For example, suppose you are working in a primary HTML file and switch to a JavaScript file to make a change. That change is reflected in the list of code hints when you return to the primary HTML file. However, automatic updating works only if you edit your JavaScript files in Dreamweaver.

If you edit your JavaScript files outside Dreamweaver, press Control+period to refresh the JavaScript code hints.

Code hinting and syntax errors

Code hints sometimes don’t work properly if Dreamweaver detects syntax errors in your code. Dreamweaver alerts you to syntax errors by displaying information about them in a bar at the top of the page. The Syntax Error Information Bar displays the first line of code on which Dreamweaver encounters the error. As you fix errors, Dreamweaver continues to display any errors that occur later.

Dreamweaver provides additional help by highlighting (in red) the line numbers where syntax errors occur. The highlight appears in the Code view of the file that contains the error.

Dreamweaver displays syntax errors not only for the current page but also for related pages. For example, suppose you are working on an HTML page that uses an included JavaScript file. If the included file contains an error, Dreamweaver displays an alert for the JavaScript file as well. You can easily open the related file containing the error by clicking its name at the top of the document.

You can disable the Syntax Error Information Bar by clicking the Syntax Error Alerts button in the Coding toolbar.

Set code hints preferences

You can change default preferences for code hints. For example, if you don’t want to show CSS property names or Spry code hints, you can deselect them in code hints preferences. You can also set preferences for code hint delay time and closing tags.

Even if code hints are disabled, you can still display a pop-up hint in Code view by pressing Control+Spacebar.
  1. Select Edit > Preferences.
  2. Select Code Hints from the Category list on the left.
  3. Set any of the following options:
    Close Tags
    Specifies how you want Dreamweaver to insert closing tags. By default, Dreamweaver inserts the closing tag automatically after you type the characters </. You can change this default behavior so that the closing tag is inserted after you type the final angle bracket (>) of the opening tag, or so that no closing tag is inserted at all.

    Enable Code Hints
    Displays code hints while you enter code in Code view. Drag the Delay slider to set the time in seconds before appropriate hints are displayed.

    Menus
    Sets exactly which type of code hints you want displayed while typing. You can use all or some of the menus.