Code hinting and code completion

Dreamweaver’s intelligent code completion or code hinting features allow you to insert and edit code quickly by reducing typos and other common mistakes.

You can also use this feature to see:

• Available attributes for a tag,
• Available parameters for a function, or
• Available methods for an object.

Dreamweaver supports code hinting for the following languages and technologies:

• HTML
• CSS
• JavaScript 
• PHP

Read on to learn how code hints and code completion work for these languages.

Enable code hints

To enable code hints, click Edit > Preferences > Code Hints, and select Enable Code Hints. To disable code hinting, deselect Enable Code Hints.

To enable auto insertion of Braces and Quotes, select Auto-insert Braces and Auto-insert Quotes respectively.

To enable descriptions in code hints, select Enable description tooltips. You can then see the descriptions with your code hints.

HTML code hints

The following types of code hints are available for HTML:

• Tag hints
• Attribute name hints
• Attribute value hints

Tag hints

Press the < key on the keyboard to start typing your code. As you type, Dreamweaver displays valid HTML tags. If the string you are typing appears in the menu, scroll to it and press Enter or Return to complete your entry.

For example, when you type <, a pop-up menu shows a list of tag names. Instead of typing the rest of the tag name, you can select the tag from the menu to include it in your text.

These HTML tag hints also include a short description of the tag where applicable.

Attribute name hints

Dreamweaver displays appropriate attributes for tags while coding in Dreamweaver. Type in a tag name and press the spacebar to display the valid attribute names you can use.

Attribute value hints

Attribute value hint text can be static or dynamic (as in the code hints display values based on what is
present in related files). 

Most attribute value hints are static. Take for example the target attribute value, which in itself is static in nature, and so the hints are static as well. 

Dreamweaver displays dynamic code hints for those attribute values that require it - such as id, target, src, href, and class.

Here are a few examples of dynamically displayed code hints. 

Dynamic code hints for src

In this example, when you type src, you are presented with valid attribute values, and when you select images, Dreamweaver displays actual valid images that are present in your images folder. You can then scroll down and choose the one you want.

If you have assets in CC Libraries, then these assets also show up when you type src. These CC library assets are indicated using a cloud icon.

When you choose a CC library asset, a pop-up menu appears allowing you to resample the image size, and change the image format.

Dynamic code hints for href

When you type href, Dreamweaver displays a list of files in your folder, while also giving you the option to browse and select the file you want to link to.

Dynamic code hints for id and style

If you have defined ids in your CSS files, then when you type id in your HTML files, Dreamweaver displays all available ids.

Similarly, if you have defined CSS styles, then when you type style in your HTML files, Dreamweaver displays all available styles.

CSS code hints

Code hints are available for the following different types of CSS:

• @rules
• Properties
• Pseudo-selectors and pseudo-elements
• Shorthand

Apart from code hints, tips are also available for CSS properties.

Code hints for CSS @rules

Dreamweaver displays code hints for all @rules along with a description of the CSS rule as shown here.

CSS properties hints

When you type in CSS properties, when you type the colon, code hints appear to help you choose a valid value.

In the following example code, when font-family: is typed, valid font-sets appear.

You can choose one of the font sets, or you can open the Manage Fonts dialog from within these hints, and set your preferred fonts. 

Another example of helpful code hints is when you work with color in CSS. When you type in any color-related property (such as border color or background color), when you press the colon, code hints displays a list of colors. You can pick a color from the list, or you can open the Color Picker from within the code hints itself, and set a preferred color.

If you have color swatches in CC libraries, code hints displays these swatches as well.

Pseudo-selector and pseudo-element hints

You can add a CSS pseudo-selector to a selector to define a particular state of the element. For example, when you use :hover, the style is applied when the user hovers over the element specified by the selector.

When you type ":", Dreamweaver shows a list of valid pseudo-selectors if the cursor is in the right context.

When you type "::", Dreamweaver shows a list of valid pseudo-elements (used to style specified parts of an element) if the cursor is in the right context.

CSS shorthand hints

Shorthand properties are CSS properties that let you set the values of several other CSS properties simultaneously. Some examples of CSS shorthand properties are background and font properties.

As seen in the below example, if you type a CSS shorthand property (such as background, for instance), after you type a space, Dreamweaver displays:

• Appropriate property values in order of relevancy
• Mandatory values that have to be used (for example, if you use font, then font-size, and font-family are mandatory)
• Browser expansion for that property

When the CSS shorthand properties are filled out, the code hints also display the property values you have typed.

CSS code tips

For some CSS properties (such as box-shadow or text-shadow), Dreamweaver displays tips that indicate what values should follow it, and also indicates which values are the mandatory values using an asterisk. 

You can also see how the browser interprets the CSS.

JavaScript code hints

In JavaScript files, Dreamweaver provides code hints for variables and function parameters. 

In the below example, the code snippet indicates the type.

Dreamweaver automatically refreshes the list of available code hints as you work in JavaScript files. For example, if you are working in a primary HTML file and switch to a JavaScript file to make a change. The change you make in the JavaScript file is reflected in the list of code hints when you return to the primary HTML file. 

Live Object Inspection

Dreamweaver also automatically refreshes JavaScript type code hints.

For example, if you have defined a variable as a numeral, Dreamweaver retains that information. When you reference that variable later in your code, it indicates its type.

If you change the variable type (say to a string), then Dreamweaver's code hints automatically indicate that the variable is a string.

Dynamic documentation inclusion

If you have added comments for a particular function, then when that function is hinted, Dreamweaver also displays the documentation for that function. 

PHP code hints

Dreamweaver supports code hinting for PHP 5.6 and 7.1 versions. These PHP code hints are site-specific and cover all core functions, classes, and constants.

For more information on PHP 5.6, and 7.1 see PHP Manual.

For more information on site-specific code hints, see Site-specific code hints.

A helpful PHP code hints feature is the auto completion of variables.

When you type a dollar sign ($), a list of all variables in your current script appears. Select the one you want, and press Enter/Return. Variables from related files are also listed, eliminating the danger of reusing the same variable for a different purpose.

When PHP 7.1 is set as the default, Dreamweaver displays PHP 7.1 specific code hints.

Edit the delay settings for PHP code hints

To improve the code typing performance in .php files, Dreamweaver 2017.5 and later has an added delay for PHP code hints. When you type PHP code, Dreamweaver displays the hints after a 400ms delay. If you want to modify the delay settings for PHP code, follow this procedure: 

Site-specific code hints

Dreamweaver lets developers working with Joomla, Drupal, Wordpress or other frameworks, to view PHP code hints as they write in Code view. To display these code hints, you first need to create a configuration file using the Site-Specific Code Hints dialog box. The configuration tells Dreamweaver where to look for code hints that are specific to your site.

For a video tutorial on working with Site-specific code hints, see www.adobe.com/go/learn_dw_comm13_en.

Create the configuration file

Use the Site-Specific Code Hints dialog box to create the configuration file needed to display code hints in Dreamweaver.

By default, Dreamweaver stores the configuration file in the Adobe Dreamweaver CS5\configuration\Shared\Dinamico\Presets directory.

Save site structure

You can save the customized site structure you’ve created in the Site-Specific Code Hints dialog box.

Rename site structures

When renaming your site structure, keep in mind that you cannot use the names of any of the three default site framework structures, or the word “custom”.

Add files or folders to a site structure

You can add any files or folders that are associated with your framework. After you add files or folders, you can then specify the filename extensions of the files you want to scan. 

Scan a site for filename extensions

Use the Find Extensions dialog box to view and edit filename extensions that are included in the site structure.