Use Dreamweaver's code hinting and code completion features to minimize coding time.

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.

Supported languages and technologies

Dreamweaver supports code hinting for the following languages and technologies:

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 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.

Basic HTML code hints
Basic HTML code hints

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 name code hints
Attribute name code hints

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. 

Example of static attribute value hints
Example of static attribute value hints

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.

Dynamic code hints for src
Dynamic code hints for src

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.

Including a CC library asset in your code
Including a CC library asset in your code

Note:

Only 50 CC library assets can be displayed within the code hints. These hints appear in alphabetical order.

Note:

Inclusion of remote CC library assets in Dreamweaver code is not supported.

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 href
Dynamic code hints for href

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.

Dynamic code hints for id
Dynamic code hints for id

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

Dynamic code hints for style
Dynamic code hints for style

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 @rule code hints
CSS @rule code hints

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. 

Code hints and help for CSS properties
Code hints and help for CSS properties

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.

CSS color-related code hints
CSS color-related code hints

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

Color swatches from CC libraries are indicated by the cloud icon
Color swatches from CC libraries are indicated by the cloud icon

Note:

Only 50 CC library assets can be displayed within the code hints. These hints appear in alphabetical order.

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.

Psuedo-selector code hints
Psuedo-selector code hints

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.

Pseudo-element code hints
Pseudo-element code hints

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
Code hints for background CSS property
Code hints for background CSS 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.

Tips that appear for CSS properties
Tips that appear for CSS properties

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.

JavaScript code hints
JavaScript code hints

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. 

Note:

This automatic update works only if you edit your JavaScript files in Dreamweaver.

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.

Code hint indicating variable type
Code hint indicating variable type

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.

PHP 7 code hints
PHP 7 code hints

An example of PHP object code hinting
An example of PHP object code hinting

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: 

  1. Quit Dreamweaver.

  2. Open brackets.json from the following location, using a text editor:

    • Win%appdata%\Adobe\Dreamweaver CC 2017\<locale>\Configuration\Brackets\
    • macOS~/Library/Application Support/Adobe/Dreamweaver CC 2017/<locale>/Configuration/Brackets/
  3. Click the Save Structure button in the upper right corner of the dialog box.

    In the JSON file, add a comma after the last name/value pair.

    Add the following line with your preferred delay time in milliseconds: "delayInPHPHint": <time in milliseconds>. For example, "delayInPHPHint": 200.

  4. Save the file, and launch Dreamweaver.

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.

Note:

The code hints you create are specifically for the site selected in the Dreamweaver Files panel. For the code hints to display, the page you are working on must reside in the currently selected site.

  1. Select Site > Site Options > Site-Specific Code Hints.

    By default, the Site-Specific Code Hints feature scans your site to determine which Content Management System (CMS) framework you’re using. Dreamweaver supports three frameworks by default: Drupal, Joomla, and Wordpress.

    The four buttons to the right of the Structure pop-up menu let you import, save, rename, or delete framework structures.

    Note:

    You cannot delete or rename the existing default framework structures.

  2. In the subroot text box, specify the subroot folder where you store your framework’s files. You can click the folder icon next to the text box to browse to the framework files’ location.

    Dreamweaver displays a file tree structure of folders that contain your framework files. If the folders and files you want to scan are all displayed, click OK to run the scan. If you want to customize the scan, go on to the next steps.

  3. Click the plus (+) button above the Files window to select a file or folder that you want to add to the scan. In the Add Files/Folders dialog box, you can specify particular filename extensions that you want to include.

    Note:

    Specify a particular filename extension to speed up the scanning process.

  4. To remove files from the scan, select the files you don’t want scanned, and then click the minus (-) button above the Files window.

    Note:

    If your selected framework is Drupal or Joomla, the Site-Specific Code Hints dialog box displays an additional path to a file within your Dreamweaver configuration folder.

    Don’t delete this—it’s required when using these frameworks.

  5. To customize how the Site-Specific Code Hints feature treats a particular file or folder, select it from the list and do one of the following:

    • Select Scan This Folder to include the selected folder in the scan.
    • Select Recursive to include all files and folders within a selected directory.
    • Click the Extensions button to open the Find Extensions dialog box, where you can specify the filename extensions you want included in your scan for a particular file or folder.

Save site structure

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

  1. Quit Dreamweaver.

  2. Step text
  3. Create the structure of files and folders as you want it, adding and deleting files and folders as necessary.

  4. Specify a name for your site structure and click Save.

Note:

If the specified name is already in use, Dreamweaver prompts you to enter a different name, or to confirm that you want to overwrite the structure with the same name. You cannot overwrite any of the default framework structures.

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”.

  1. Display the structure that you want to rename.

  2. Click the Rename Structure icon button in the upper right corner of the dialog box.

  3. Specify a new name for the structure and click Rename.

Note:

If the name you specify is already in use, Dreamweaver prompts you to enter a different name, or to confirm that you want to overwrite the structure with the same name. You cannot overwrite any of the default framework structures.

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. 

  1. Click the plus (+) button above the Files window to open the Add File/Folder dialog box.

  2. In the Add File/Folder text box, enter the path to the file or folder you want to add. You can also click the folder icon next to the text box to browse to a file or folder.

  3. Click the plus (+) button above the Extensions window to specify the filename extensions of files you want to scan.

    Note:

    Specify a particular filename extension to speed up the scanning process.

  4. Click Add.

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.

  1. In the Site-Specific Code Hints dialog box, click the Extensions button.

    The Find Extensions dialog box lists the current scannable extensions.

  2. To add another extension to the list, click the plus (+) button above the Extensions window.

  3. To delete an extension from the list, click the minus (-) button.

This work is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License  Twitter™ and Facebook posts are not covered under the terms of Creative Commons.

Legal Notices   |   Online Privacy Policy