User Guide Cancel

Code hinting and code completion

  1. Dreamweaver User Guide
  2. Introduction
    1. Responsive web design basics
    2. What's new in Dreamweaver
    3. Web development using Dreamweaver - An Overview
    4. Dreamweaver / Common Questions
    5. Keyboard shortcuts
    6. Dreamweaver system requirements
    7. Feature summary
  3. Dreamweaver and Creative Cloud
    1. Synchronize Dreamweaver settings with Creative Cloud
    2. Creative Cloud Libraries in Dreamweaver
    3. Using Photoshop files in Dreamweaver
    4. Work with Adobe Animate and Dreamweaver
    5. Extract web-optimized SVG files from Libraries
  4. Dreamweaver workspaces and views
    1. The Dreamweaver workspace
    2. Optimize Dreamweaver workspace for visual development
    3. Search files based on filename or content | Mac OS
  5. Set up sites
    1. About Dreamweaver sites
    2. Set up a local version of your site
    3. Connect to a publishing server
    4. Set up a testing server
    5. Import and export Dreamweaver site settings
    6. Bring existing websites from a remote server to your local site root
    7. Accessibility features in Dreamweaver
    8. Advanced settings
    9. Set site preferences for transferring files
    10. Specify proxy server settings in Dreamweaver
    11. Synchronize Dreamweaver settings with Creative Cloud
    12. Using Git in Dreamweaver
  6. Manage files
    1. Create and open files
    2. Manage files and folders
    3. Getting and putting files to and from your server
    4. Check in and check out files
    5. Synchronize files
    6. Compare files for differences
    7. Cloak files and folders in your Dreamweaver site
    8. Enable Design Notes for Dreamweaver sites
    9. Preventing potential Gatekeeper exploit
  7. Layout and design
    1. Use visual aids for layout
    2. About using CSS to lay out your page
    3. Design responsive websites using Bootstrap
    4. Creating and using media queries in Dreamweaver
    5. Present content with tables
    6. Colors
    7. Responsive design using fluid grid layouts
    8. Extract in Dreamweaver
  8. CSS
    1. Understand Cascading Style Sheets
    2. Laying out pages using CSS Designer
    3. Using CSS preprocessors in Dreamweaver
    4. How to set CSS Style preferences in Dreamweaver
    5. Move CSS rules in Dreamweaver
    6. Convert inline CSS to a CSS rule in Dreamweaver
    7. Work with div tags
    8. Apply gradients to background
    9. Create and edit CSS3 transition effects in Dreamweaver
    10. Format code
  9. Page content and assets
    1. Set page properties
    2. Set CSS heading properties and CSS link properties
    3. Work with text
    4. Find and replace text, tags, and attributes
    5. DOM panel
    6. Edit in Live View
    7. Encoding documents in Dreamweaver
    8. Select and view elements in the Document window
    9. Set text properties in the Property inspector
    10. Spell check a web page
    11. Using horizontal rules in Dreamweaver
    12. Add and modify font combinations in Dreamweaver
    13. Work with assets
    14. Insert and update dates in Dreamweaver
    15. Create and manage favorite assets in Dreamweaver
    16. Insert and edit images in Dreamweaver
    17. Add media objects
    18. Adding videos in Dreamweaver
    19. Insert HTML5 video
    20. Insert SWF files
    21. Add audio effects
    22. Insert HTML5 audio in Dreamweaver
    23. Work with library items
    24. Using Arabic and Hebrew text in Dreamweaver
  10. Linking and navigation
    1. About linking and navigation
    2. Linking
    3. Image maps
    4. Troubleshoot links
  11. jQuery widgets and effects
    1. Use jQuery UI and mobile widgets in Dreamweaver
    2. Use jQuery effects in Dreamweaver
  12. Coding websites
    1. About coding in Dreamweaver
    2. Coding environment in Dreamweaver
    3. Set coding preferences
    4. Customize code coloring
    5. Write and edit code
    6. Code hinting and code completion
    7. Collapse and expand code
    8. Reuse code with snippets
    9. Lint code
    10. Optimize code
    11. Edit code in Design view
    12. Work with head content for pages
    13. Insert server-side includes in Dreamweaver
    14. Using tag libraries in Dreamweaver
    15. Importing custom tags into Dreamweaver
    16. Use JavaScript behaviors (general instructions)
    17. Apply built-in JavaScript behaviors
    18. About XML and XSLT
    19. Perform server-side XSL transformations in Dreamweaver
    20. Performing client-side XSL transformations in Dreamweaver
    21. Add character entities for XSLT in Dreamweaver
    22. Format code
  13. Cross-product workflows
    1. Installing and using extensions to Dreamweaver
    2. In-App updates in Dreamweaver
    3. Insert Microsoft Office documents in Dreamweaver (Windows only)
    4. Working with Fireworks and Dreamweaver
    5. Edit content in Dreamweaver sites using Contribute
    6. Dreamweaver-Business Catalyst integration
    7. Create personalized email campaigns
  14. Templates
    1. About Dreamweaver templates
    2. Recognizing templates and template-based documents
    3. Create a Dreamweaver template
    4. Create editable regions in templates
    5. Create repeating regions and tables in Dreamweaver
    6. Use optional regions in templates
    7. Define editable tag attributes in Dreamweaver
    8. How to create nested templates in Dreamweaver
    9. Edit, update, and delete templates
    10. Export and import xml content in Dreamweaver
    11. Apply or remove a template from an existing document
    12. Edit content in Dreamweaver templates
    13. Syntax rules for template tags in Dreamweaver
    14. Set highlighting preferences for template regions
    15. Benefits of using templates in Dreamweaver
  15. Mobile and multiscreen
    1. Create media queries
    2. Changing page orientation for mobile devices
    3. Create web apps for mobile devices using Dreamweaver
  16. Dynamic sites, pages and web forms
    1. Understand web applications
    2. Set up your computer for application development
    3. Troubleshoot database connections
    4. Removing connection scripts in Dreamweaver
    5. Design dynamic pages
    6. Dynamic content sources overview
    7. Define sources of dynamic content
    8. Add dynamic content to pages
    9. Changing dynamic content in Dreamweaver
    10. Display database records
    11. Provide and troubleshoot live data in Dreamweaver
    12. Add custom server behaviors in Dreamweaver
    13. Building forms using Dreamweaver
    14. Use forms to collect information from users
    15. Create and enable ColdFusion forms in Dreamweaver
    16. Create web forms
    17. Enhanced HTML5 support for form elements
    18. Develop a form using Dreamweaver
  17. Building applications visually
    1. Build master and detail pages in Dreamweaver
    2. Build search and results pages
    3. Build a record insert page
    4. Build an update record page in Dreamweaver
    5. Building record delete pages in Dreamweaver
    6. Use ASP commands to modify database in Dreamweaver
    7. Build a registration page
    8. Build a login page
    9. Build a page that only authorized users can access
    10. Securing folders in Coldfusion using Dreamweaver
    11. Using ColdFusion components in Dreamweaver
  18. Test, preview, and publish websites
    1. Preview pages
    2. Preview Dreamweaver web pages on multiple devices
    3. Test your Dreamweaver site
  19. Troubleshooting
    1. Fixed issues
    2. Known issues

 

 

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.

Code Hints preferences
Code Hints preferences

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.

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.

 Adobe

Get help faster and easier

New user?

Adobe MAX 2024

Adobe MAX
The Creativity Conference

Oct 14–16 Miami Beach and online

Adobe MAX

The Creativity Conference

Oct 14–16 Miami Beach and online

Adobe MAX 2024

Adobe MAX
The Creativity Conference

Oct 14–16 Miami Beach and online

Adobe MAX

The Creativity Conference

Oct 14–16 Miami Beach and online